@fooloomanzoo/input-picker-pattern NPM

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