{"id":18440584,"url":"https://github.com/fooloomanzoo/input-picker-pattern","last_synced_at":"2025-07-14T23:04:06.321Z","repository":{"id":57741259,"uuid":"105032862","full_name":"fooloomanzoo/input-picker-pattern","owner":"fooloomanzoo","description":"A pattern for polymer elements to create a picker for an input","archived":false,"fork":false,"pushed_at":"2018-11-16T16:54:02.000Z","size":1026,"stargazers_count":0,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T22:35:41.652Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fooloomanzoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-27T15:03:51.000Z","updated_at":"2018-11-16T16:54:04.000Z","dependencies_parsed_at":"2022-08-29T07:20:23.320Z","dependency_job_id":null,"html_url":"https://github.com/fooloomanzoo/input-picker-pattern","commit_stats":null,"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"purl":"pkg:github/fooloomanzoo/input-picker-pattern","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Finput-picker-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Finput-picker-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Finput-picker-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Finput-picker-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fooloomanzoo","download_url":"https://codeload.github.com/fooloomanzoo/input-picker-pattern/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fooloomanzoo%2Finput-picker-pattern/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265365543,"owners_count":23753349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T06:31:29.276Z","updated_at":"2025-07-14T23:04:06.298Z","avatar_url":"https://github.com/fooloomanzoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/input-picker-pattern.svg)](https://www.npmjs.com/package/@fooloomanzoo/input-picker-pattern)\r\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/input-picker-pattern)\r\n\r\n_[API \u0026 Demo](https://fooloomanzoo.github.io/input-picker-pattern)_\r\n\r\nThe repository includes various helper components and standard styles used in elements like [number-input](https://github.com/fooloomanzoo/number-input), [text-input](https://github.com/fooloomanzoo/text-input), [color-input](https://github.com/fooloomanzoo/color-input), [datetime-input](https://github.com/fooloomanzoo/datetime-input), [datetime-picker](https://github.com/fooloomanzoo/datetime-picker) and [color-picker](https://github.com/fooloomanzoo/color-picker).\r\n\r\nIt includes the following component-pattern:\r\n  - input-pattern\r\n  - input-picker-pattern\r\n\r\nand component-mixins:\r\n  - overlay-picker-mixin\r\n  - form-element-mixin\r\n  - switch-container-mixin\r\n\r\nand style-mixins:\r\n  - dropdown-style\r\n  - dropdown-tip-style\r\n  - input-shared-style\r\n  - input-picker-shared-style\r\n\r\nand components:\r\n  - overlay-element\r\n    - A simple element, that creates an overlay using `iron-overlay-behavior`.\r\n\r\n### default style-properties and -mixins\r\n\r\n#### input-shared-style\r\nCustom property                     | Description                                   | Default\r\n------------------------------------|-----------------------------------------------|--------------------\r\n`--input-color`                     | text-color of the input                       | inherit\r\n`--input-background`                | background of the input                       | transparent\r\n`--input-border-width`              | border-width of the input                     | thin\r\n`--input-border-style`              | border-style of the input                     | dotted\r\n`--input-border-color`              | border-color of the input                     | rgba(0, 0, 0, 0.25)\r\n`--input-padding`                   | padding of the input                          | 0.25em\r\n`--input-border-radius`             | border-radius of the input                    | 0.25em\r\n`--input-transition-duration`       | transition-duration of the input              | 250ms\r\n`--input-transition-property`       | transition-property of the input              | background\r\n`--input-transition-timing-function`| transition-timing-function of the input       | cubic-bezier(0.6, 1, 0.2, 1)\r\n`--input-align`                     | text-align of the input input                 | center\r\n`--input-cursor`                    | cursor of the input input                     | initial\r\n`--input-focus-color`               | text-color of the focused and hovered input   | inherit\r\n`--input-focus-background`          | background of the focused and hovered input   | rgba(0, 0, 0, 0.1)\r\n`--input-focus-border-style`        | border-style of the focused and hovered input | dotted\r\n`--input-focus-border-color`        | border-color of the focused and hovered input | rgba(0,0,0,0.5)\r\n`--input-invalid-color`             | text-color of the invalid input               | inherit\r\n`--input-invalid-background`        | background of the invalid input               | rgba(255, 0, 0, 0.25)\r\n`--input-invalid-border-style`      | border-style of the invalid input             | dotted\r\n`--input-invalid-border-color`      | border-color of the invalid input             | rgba(255, 0, 0, 0.5)\r\n`--input-disabled-color`            | text-color of the disabled input              | inherit\r\n`--input-disabled-background`       | background of the disabled input              | transparent\r\n`--input-disabled-font-style`       | font-style of the disabled elements           | oblique\r\n`--input-disabled-opacity`          | opacity of the disabled input                 | 0.75\r\n`--input-placeholder-opacity`       | opacity of the placeholder                    | 0.75\r\n`--input-placeholder-align`         | text-align of the placeholder                 | center\r\n`--input-selection-color`           | text-color of the selected text               | inherit\r\n`--input-selection-background`      | background of the selected text               | rgba(255, 255, 255, 0.5)\r\n`--input-style`                     | mixin applied to the input                    | {}\r\n`--input-focus`                     | mixin applied to the focused and hovered input| {}\r\n`--input-invalid`                   | mixin applied to the invalid input            | {}\r\n`--input-disabled`                  | mixin applied to the disabled input           | {}\r\n`--input-placeholder`               | mixin applied to the placeholder              | {}\r\n\r\nFor custom-inputs like `number-input`, `integer-input` and `text-input`, that are used inside the element, you can additionally use:\r\n\r\nCustom property                     | Description                                    | Default\r\n------------------------------------|------------------------------------------------|--------------------\r\n`--inner-input-color`          | text-color of the inner input element    | inherit\r\n`--inner-input-background`     | background of the inner input element    | transparent\r\n`--inner-input-border-width`   | border-width of the inner input element  | thin\r\n`--inner-input-border-style`   | border-style of the inner input element  | dotted\r\n`--inner-input-border-color`   | border-color of the inner input element  | transparent\r\n`--inner-input-padding`        | padding of the inner input element       | 0.15em\r\n`--inner-input-border-radius`  | border-radius of the inner input element | 0.2em\r\n`--inner-input-focus-color`    | text-color of the focused and hovered inner input element | currentColor\r\n`--inner-input-focus-background`   | background of the focused and hovered inner input element | rgba(0, 0, 0, 0.1)\r\n`--inner-input-focus-border-style` | border-style of the focused and hovered inner input element | dotted\r\n`--inner-input-focus-border-color` | border-color of the focused and hovered inner input element | rgba(0,0,0,0.1)\r\n`--inner-input-invalid-color`      | text-color of the invalid inner input element | inherit\r\n`--inner-input-invalid-background` | background of the invalid inner input element | rgba(255,255,255,0.5)\r\n`--inner-input-invalid-border-style` | border-style of the invalid inner input element | dotted\r\n`--inner-input-invalid-border-color` | border-color of the invalid inner input element | rgba(255,0,0,0.25)\r\n\r\n\r\n#### input-picker-shared-style\r\nCustom property                   | Description                                  | Default\r\n----------------------------------|----------------------------------------------|--------------------\r\n`--input-picker-color`            | text-color of the picker                     | #dfdfdf\r\n`--input-picker-background`       | background of the picker                     | #222\r\n`--input-picker-padding`          | padding of the picker                        | 0.3em\r\n`--input-picker-border-radius`    | border-radius                                | 0.5em\r\n`--input-picker-box-shadow`       | box-shadow                                   | 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4)\r\n`--input-icon-border-radius`      | border-radius of the icons                   | 0.3em\r\n`--input-icon-padding`            | padding of the icons and buttons             | 0.5em\r\n`--input-icon-height`             | height of the icons and buttons              | 1em\r\n`--input-icon-width`              | width of the icons and buttons               | 1em\r\n`--input-icon-background`         | background of the icons and buttons          | transparent\r\n`--input-icon`                    | mixin applied to the icons and buttons       | {}\r\n`--input-picker`                  | mixin applied to the picker                  | {}\r\n\r\nThe icons will apply all `--input-focus-*`-properties when hovered or focused. The native inputs, select-boxes and buttons apply the related style properties. Some `--input-`properties are set by default:\r\n\r\nCustom property                   | Default\r\n----------------------------------|--------------------\r\n`--input-cursor`                  | pointer\r\n`--inner-input-padding`           | 1px\r\n`--inner-input-border-radius`     | 3px\r\n`--inner-input-focus-color`       | #f1f1f1\r\n`--inner-input-focus-background`  | --primary-color, #394FE8\r\n`--input-disabled`                | { font-weight: lighter; }\r\n\r\n\r\n#### dropdown-style\r\nCustom property                       | Description                                                      | Default\r\n--------------------------------------|------------------------------------------------------------------|--------------------\r\n--dropdown-transition-duration        | transition duration for changing opacity when opening or closing | 250ms\r\n--dropdown-transition-timing-function | dimensions of the tip of the dropdown                            | cubic-bezier(0.6, 1, 0.2, 1)\r\n--dropdown-background                 | background of the dropdown                                       | --input-picker-background, transparent\r\n\r\n#### dropdown-tip-style\r\nCustom property                   | Description                                   | Default\r\n----------------------------------|-----------------------------------------------|--------------------\r\n--dropdown-tip-size               | dimensions of the tip of the dropdown         | 6px\r\n--dropdown-tip-gap                | gap to the outside of the tip                 | 12px\r\n--dropdown-background             | background of the of the dropdown and the tip | --input-picker-background, transparent\r\n\r\n\r\n#### overlays\r\nHave a look at iron-overlay-behavior's [repository](https://github.com/PolymerElements/iron-overlay-behavior#styling) to find out more about its style-properties.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffooloomanzoo%2Finput-picker-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffooloomanzoo%2Finput-picker-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffooloomanzoo%2Finput-picker-pattern/lists"}