API & Demo

The repository includes various helper components and standard styles used in elements like number-input, text-input, color-input, datetime-input, datetime-picker and color-picker.

It includes the following component-pattern:

• input-pattern
• input-picker-pattern

and component-mixins:

• overlay-picker-mixin
• form-element-mixin
• switch-container-mixin

and style-mixins:

• dropdown-style
• dropdown-tip-style
• input-shared-style
• input-picker-shared-style

and components:

• overlay-element
  • A simple element, that creates an overlay using iron-overlay-behavior.

default style-properties and -mixins

input-shared-style

Custom property | Description | Default ------------------------------------|-----------------------------------------------|-------------------- --input-color | text-color of the input | inherit --input-background | background of the input | transparent --input-border-width | border-width of the input | thin --input-border-style | border-style of the input | dotted --input-border-color | border-color of the input | rgba(0, 0, 0, 0.25) --input-padding | padding of the input | 0.25em --input-border-radius | border-radius of the input | 0.25em --input-transition-duration | transition-duration of the input | 250ms --input-transition-property | transition-property of the input | background --input-transition-timing-function| transition-timing-function of the input | cubic-bezier(0.6, 1, 0.2, 1) --input-align | text-align of the input input | center --input-cursor | cursor of the input input | initial --input-focus-color | text-color of the focused and hovered input | inherit --input-focus-background | background of the focused and hovered input | rgba(0, 0, 0, 0.1) --input-focus-border-style | border-style of the focused and hovered input | dotted --input-focus-border-color | border-color of the focused and hovered input | rgba(0,0,0,0.5) --input-invalid-color | text-color of the invalid input | inherit --input-invalid-background | background of the invalid input | rgba(255, 0, 0, 0.25) --input-invalid-border-style | border-style of the invalid input | dotted --input-invalid-border-color | border-color of the invalid input | rgba(255, 0, 0, 0.5) --input-disabled-color | text-color of the disabled input | inherit --input-disabled-background | background of the disabled input | transparent --input-disabled-font-style | font-style of the disabled elements | oblique --input-disabled-opacity | opacity of the disabled input | 0.75 --input-placeholder-opacity | opacity of the placeholder | 0.75 --input-placeholder-align | text-align of the placeholder | center --input-selection-color | text-color of the selected text | inherit --input-selection-background | background of the selected text | rgba(255, 255, 255, 0.5) --input-style | mixin applied to the input | {} --input-focus | mixin applied to the focused and hovered input| {} --input-invalid | mixin applied to the invalid input | {} --input-disabled | mixin applied to the disabled input | {} --input-placeholder | mixin applied to the placeholder | {}

For custom-inputs like number-input, integer-input and text-input, that are used inside the element, you can additionally use:

Custom property | Description | Default ------------------------------------|------------------------------------------------|-------------------- --inner-input-color | text-color of the inner input element | inherit --inner-input-background | background of the inner input element | transparent --inner-input-border-width | border-width of the inner input element | thin --inner-input-border-style | border-style of the inner input element | dotted --inner-input-border-color | border-color of the inner input element | transparent --inner-input-padding | padding of the inner input element | 0.15em --inner-input-border-radius | border-radius of the inner input element | 0.2em --inner-input-focus-color | text-color of the focused and hovered inner input element | currentColor --inner-input-focus-background | background of the focused and hovered inner input element | rgba(0, 0, 0, 0.1) --inner-input-focus-border-style | border-style of the focused and hovered inner input element | dotted --inner-input-focus-border-color | border-color of the focused and hovered inner input element | rgba(0,0,0,0.1) --inner-input-invalid-color | text-color of the invalid inner input element | inherit --inner-input-invalid-background | background of the invalid inner input element | rgba(255,255,255,0.5) --inner-input-invalid-border-style | border-style of the invalid inner input element | dotted --inner-input-invalid-border-color | border-color of the invalid inner input element | rgba(255,0,0,0.25)

input-picker-shared-style

Custom property | Description | Default ----------------------------------|----------------------------------------------|-------------------- --input-picker-color | text-color of the picker | #dfdfdf --input-picker-background | background of the picker | #222 --input-picker-padding | padding of the picker | 0.3em --input-picker-border-radius | border-radius | 0.5em --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) --input-icon-border-radius | border-radius of the icons | 0.3em --input-icon-padding | padding of the icons and buttons | 0.5em --input-icon-height | height of the icons and buttons | 1em --input-icon-width | width of the icons and buttons | 1em --input-icon-background | background of the icons and buttons | transparent --input-icon | mixin applied to the icons and buttons | {} --input-picker | mixin applied to the picker | {}

The 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:

Custom property | Default ----------------------------------|-------------------- --input-cursor | pointer --inner-input-padding | 1px --inner-input-border-radius | 3px --inner-input-focus-color | #f1f1f1 --inner-input-focus-background | --primary-color, #394FE8 --input-disabled | { font-weight: lighter; }

dropdown-style

Custom property | Description | Default --------------------------------------|------------------------------------------------------------------|-------------------- --dropdown-transition-duration | transition duration for changing opacity when opening or closing | 250ms --dropdown-transition-timing-function | dimensions of the tip of the dropdown | cubic-bezier(0.6, 1, 0.2, 1) --dropdown-background | background of the dropdown | --input-picker-background, transparent

dropdown-tip-style

Custom property | Description | Default ----------------------------------|-----------------------------------------------|-------------------- --dropdown-tip-size | dimensions of the tip of the dropdown | 6px --dropdown-tip-gap | gap to the outside of the tip | 12px --dropdown-background | background of the of the dropdown and the tip | --input-picker-background, transparent

overlays

Have a look at iron-overlay-behavior's repository to find out more about its style-properties.