🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
polythene-css-textfield
Advanced tools
polythene-css-textfield - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-core-css'), require('polythene-core-textfield'), require('polythene-theme')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'polythene-core-css', 'polythene-core-textfield', 'polythene-theme'], factory) : | ||
| (factory((global.polythene = {}),global['polythene-core-css'],global['polythene-core-textfield'],global['polythene-theme'])); | ||
| }(this, (function (exports,polytheneCoreCss,polytheneCoreTextfield,polytheneTheme) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-theme'), require('polythene-core-css'), require('polythene-core-textfield')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'polythene-theme', 'polythene-core-css', 'polythene-core-textfield'], factory) : | ||
| (factory((global.polythene = {}),global['polythene-theme'],global['polythene-core-css'],global['polythene-core-textfield'])); | ||
| }(this, (function (exports,polytheneTheme,polytheneCoreCss,polytheneCoreTextfield) { 'use strict'; | ||
| var classes = { | ||
| component: "pe-textfield", | ||
| var classes = { | ||
| component: "pe-textfield", | ||
| // elements | ||
| counter: "pe-textfield__counter", | ||
| error: "pe-textfield__error", | ||
| errorPlaceholder: "pe-textfield__error-placeholder", | ||
| focusHelp: "pe-textfield__help-focus", | ||
| help: "pe-textfield__help", | ||
| input: "pe-textfield__input", | ||
| inputArea: "pe-textfield__input-area", | ||
| label: "pe-textfield__label", | ||
| optionalIndicator: "pe-textfield__optional-indicator", | ||
| requiredIndicator: "pe-textfield__required-indicator", | ||
| // elements | ||
| counter: "pe-textfield__counter", | ||
| error: "pe-textfield__error", | ||
| errorPlaceholder: "pe-textfield__error-placeholder", | ||
| focusHelp: "pe-textfield__help-focus", | ||
| help: "pe-textfield__help", | ||
| input: "pe-textfield__input", | ||
| inputArea: "pe-textfield__input-area", | ||
| label: "pe-textfield__label", | ||
| optionalIndicator: "pe-textfield__optional-indicator", | ||
| requiredIndicator: "pe-textfield__required-indicator", | ||
| // states | ||
| hasCounter: "pe-textfield--counter", | ||
| hasFloatingLabel: "pe-textfield--floating-label", | ||
| hasFullWidth: "pe-textfield--full-width", | ||
| hideClear: "pe-textfield--hide-clear", | ||
| hideSpinner: "pe-textfield--hide-spinner", | ||
| hideValidation: "pe-textfield--hide-validation", | ||
| isDense: "pe-textfield--dense", | ||
| isRequired: "pe-textfield--required", | ||
| stateDirty: "pe-textfield--dirty", | ||
| stateDisabled: "pe-textfield--disabled", | ||
| stateFocused: "pe-textfield--focused", | ||
| stateInvalid: "pe-textfield--invalid", | ||
| stateReadonly: "pe-textfield--readonly" | ||
| }; | ||
| // states | ||
| hasCounter: "pe-textfield--counter", | ||
| hasFloatingLabel: "pe-textfield--floating-label", | ||
| hasFullWidth: "pe-textfield--full-width", | ||
| hideClear: "pe-textfield--hide-clear", | ||
| hideSpinner: "pe-textfield--hide-spinner", | ||
| hideValidation: "pe-textfield--hide-validation", | ||
| isDense: "pe-textfield--dense", | ||
| isRequired: "pe-textfield--required", | ||
| stateDirty: "pe-textfield--dirty", | ||
| stateDisabled: "pe-textfield--disabled", | ||
| stateFocused: "pe-textfield--focused", | ||
| stateInvalid: "pe-textfield--invalid", | ||
| stateReadonly: "pe-textfield--readonly" | ||
| }; | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var layout = (function (selector, componentVars) { | ||
| return [_defineProperty({}, selector, [polytheneCoreCss.mixin.clearfix(), { | ||
| position: "relative", | ||
| lineHeight: polytheneTheme.vars.line_height, | ||
| display: "inline-block", | ||
| boxSizing: "border-box", | ||
| margin: 0, | ||
| overflow: "visible", // Firefox needs this | ||
| paddingBottom: componentVars.vertical_spacing_bottom + "px", | ||
| width: "100%", | ||
| maxWidth: "100%", | ||
| " .pe-textfield__input-area": { | ||
| var layout = (function (selector, componentVars) { | ||
| return [_defineProperty({}, selector, [polytheneCoreCss.mixin.clearfix(), { | ||
| position: "relative", | ||
| paddingTop: componentVars.vertical_spacing_top + "px", | ||
| lineHeight: polytheneTheme.vars.line_height, | ||
| display: "inline-block", | ||
| boxSizing: "border-box", | ||
| margin: 0, | ||
| overflow: "visible", // Firefox needs this | ||
| paddingBottom: componentVars.vertical_spacing_bottom + "px", | ||
| width: "100%", | ||
| maxWidth: "100%", | ||
| "&:after": [polytheneCoreCss.mixin.defaultTransition("opacity", componentVars.input_focus_border_animation_duration), { | ||
| position: "absolute", | ||
| content: "\"\"", | ||
| bottom: 0, | ||
| left: 0, | ||
| height: componentVars.input_focus_border_width + "px", | ||
| width: "100%", | ||
| opacity: 0 | ||
| }] | ||
| }, | ||
| ".pe-textfield--focused .pe-textfield__input-area:after": { | ||
| opacity: 1 | ||
| }, | ||
| " .pe-textfield__input-area": { | ||
| position: "relative", | ||
| paddingTop: componentVars.vertical_spacing_top + "px", | ||
| " .pe-textfield__input": { | ||
| display: "block", | ||
| fontSize: componentVars.font_size_input + "px", | ||
| lineHeight: componentVars.line_height_input + "px", | ||
| width: "100%", | ||
| background: "none", | ||
| textAlign: "left", | ||
| color: "inherit", | ||
| borderWidth: componentVars.input_border_width + "px", | ||
| borderStyle: "none none solid none", | ||
| borderRadius: 0, | ||
| margin: 0, | ||
| padding: componentVars.input_padding_v + "px " + componentVars.input_padding_h + "px", | ||
| // disable glow on textfield--invalid fields | ||
| "&:textfield--invalid": { | ||
| boxShadow: "none" | ||
| "&:after": [polytheneCoreCss.mixin.defaultTransition("opacity", componentVars.input_focus_border_animation_duration), { | ||
| position: "absolute", | ||
| content: "\"\"", | ||
| bottom: 0, | ||
| left: 0, | ||
| height: componentVars.input_focus_border_width + "px", | ||
| width: "100%", | ||
| opacity: 0 | ||
| }] | ||
| }, | ||
| ":invalid": { | ||
| boxShadow: "none" | ||
| ".pe-textfield--focused .pe-textfield__input-area:after": { | ||
| opacity: 1 | ||
| }, | ||
| // Remove clear cross icon from IE | ||
| "::-ms-clear": { | ||
| width: 0, | ||
| height: 0 | ||
| } | ||
| }, | ||
| " textarea.pe-textfield__input": { | ||
| margin: componentVars.input_padding_v + "px " + componentVars.input_padding_h + "px", | ||
| padding: 0, | ||
| display: "block" | ||
| }, | ||
| // focus border | ||
| " textfield__input:focus, &.pe-textfield--focused .pe-textfield__input": { | ||
| "border-width": componentVars.input_border_width + "px", | ||
| outline: "none" | ||
| }, | ||
| " .pe-textfield__input": { | ||
| display: "block", | ||
| fontSize: componentVars.font_size_input + "px", | ||
| lineHeight: componentVars.line_height_input + "px", | ||
| width: "100%", | ||
| background: "none", | ||
| textAlign: "left", | ||
| color: "inherit", | ||
| borderWidth: componentVars.input_border_width + "px", | ||
| borderStyle: "none none solid none", | ||
| borderRadius: 0, | ||
| margin: 0, | ||
| padding: componentVars.input_padding_v + "px " + componentVars.input_padding_h + "px", | ||
| " .pe-textfield__label": { | ||
| position: "absolute", | ||
| display: "block", | ||
| top: componentVars.vertical_spacing_top + componentVars.input_padding_v + "px", | ||
| bottom: 0, | ||
| left: componentVars.input_padding_h + "px", | ||
| right: componentVars.input_padding_h + "px", | ||
| fontSize: componentVars.font_size_input + "px", | ||
| lineHeight: componentVars.line_height_input + "px", | ||
| pointerEvents: "none", | ||
| whiteSpace: "nowrap", | ||
| textAlign: "left", | ||
| cursor: "text" | ||
| }, | ||
| ".pe-textfield--dirty .pe-textfield__label": { | ||
| visibility: "hidden" | ||
| }, | ||
| // disable glow on textfield--invalid fields | ||
| "&:textfield--invalid": { | ||
| boxShadow: "none" | ||
| }, | ||
| ":invalid": { | ||
| boxShadow: "none" | ||
| }, | ||
| // Remove clear cross icon from IE | ||
| "::-ms-clear": { | ||
| width: 0, | ||
| height: 0 | ||
| } | ||
| }, | ||
| " textarea.pe-textfield__input": { | ||
| margin: componentVars.input_padding_v + "px " + componentVars.input_padding_h + "px", | ||
| padding: 0, | ||
| display: "block" | ||
| }, | ||
| "&:not(.pe-textfield--no-char)": { | ||
| " .pe-textfield__required-indicator, .pe-textfield__optional-indicator": { | ||
| padding: "0 0 0 .25em" | ||
| } | ||
| }, | ||
| // focus border | ||
| " textfield__input:focus, &.pe-textfield--focused .pe-textfield__input": { | ||
| "border-width": componentVars.input_border_width + "px", | ||
| outline: "none" | ||
| }, | ||
| ".pe-textfield--floating-label": { | ||
| paddingBottom: componentVars.floating_label_vertical_spacing_bottom + "px", | ||
| " .pe-textfield__input-area": { | ||
| paddingTop: componentVars.floating_label_vertical_spacing_top + "px" | ||
| " .pe-textfield__label": { | ||
| position: "absolute", | ||
| display: "block", | ||
| top: componentVars.vertical_spacing_top + componentVars.input_padding_v + "px", | ||
| bottom: 0, | ||
| left: componentVars.input_padding_h + "px", | ||
| right: componentVars.input_padding_h + "px", | ||
| fontSize: componentVars.font_size_input + "px", | ||
| lineHeight: componentVars.line_height_input + "px", | ||
| pointerEvents: "none", | ||
| whiteSpace: "nowrap", | ||
| textAlign: "left", | ||
| cursor: "text" | ||
| }, | ||
| ".pe-textfield--dirty .pe-textfield__label": { | ||
| visibility: "hidden" | ||
| }, | ||
| " .pe-textfield__label": [polytheneCoreCss.mixin.defaultTransition("all", componentVars.floating_label_animation_duration), { | ||
| top: componentVars.floating_label_vertical_spacing_top + componentVars.input_padding_v + "px" | ||
| }], | ||
| ".pe-textfield--focused, &.pe-textfield--dirty": { | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.font_size_floating_label + "px", | ||
| top: componentVars.floating_label_top + "px", | ||
| visibility: "visible" | ||
| "&:not(.pe-textfield--no-char)": { | ||
| " .pe-textfield__required-indicator, .pe-textfield__optional-indicator": { | ||
| padding: "0 0 0 .25em" | ||
| } | ||
| }, | ||
| ".pe-textfield--dense": { | ||
| fontSize: componentVars.dense_font_size_input + "px", | ||
| paddingBottom: componentVars.dense_floating_label_vertical_spacing_bottom + "px", | ||
| ".pe-textfield--floating-label": { | ||
| paddingBottom: componentVars.floating_label_vertical_spacing_bottom + "px", | ||
| " .pe-textfield__input-area": { | ||
| paddingTop: componentVars.dense_floating_label_vertical_spacing_top + "px" | ||
| paddingTop: componentVars.floating_label_vertical_spacing_top + "px" | ||
| }, | ||
| " .pe-textfield__input": { | ||
| fontSize: componentVars.dense_font_size_input + "px" | ||
| }, | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.dense_font_size_input + "px", | ||
| top: componentVars.dense_floating_label_vertical_spacing_top + componentVars.input_padding_v + "px" | ||
| }, | ||
| " .pe-textfield__label": [polytheneCoreCss.mixin.defaultTransition("all", componentVars.floating_label_animation_duration), { | ||
| top: componentVars.floating_label_vertical_spacing_top + componentVars.input_padding_v + "px" | ||
| }], | ||
| ".pe-textfield--focused, &.pe-textfield--dirty": { | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.dense_font_size_floating_label + "px", | ||
| top: componentVars.dense_floating_label_top + "px" | ||
| fontSize: componentVars.font_size_floating_label + "px", | ||
| top: componentVars.floating_label_top + "px", | ||
| visibility: "visible" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| }, | ||
| ".pe-textfield--disabled, &.pe-textfield--readonly": { | ||
| " .pe-textfield__label": { | ||
| cursor: "auto" | ||
| }, | ||
| " .pe-textfield__input": { | ||
| "border-bottom": "none" | ||
| }, | ||
| " .pe-textfield__input-area:after": { | ||
| opacity: 1, | ||
| height: "1px", | ||
| bottom: "-1px", | ||
| backgroundPosition: "top", | ||
| backgroundSize: "4px 1px", | ||
| backgroundRepeat: "repeat-x" | ||
| } | ||
| }, | ||
| ".pe-textfield--dense": { | ||
| fontSize: componentVars.dense_font_size_input + "px", | ||
| paddingBottom: componentVars.dense_floating_label_vertical_spacing_bottom + "px", | ||
| " .pe-textfield__error, .pe-textfield__error-placeholder, .pe-textfield__help, .pe-textfield__counter": { | ||
| marginTop: componentVars.margin_top_error_message + "px", | ||
| fontSize: componentVars.font_size_error + "px", | ||
| lineHeight: polytheneTheme.vars.line_height, | ||
| minHeight: componentVars.font_size_error * polytheneTheme.vars.line_height + "px" | ||
| }, | ||
| " .pe-textfield__input-area": { | ||
| paddingTop: componentVars.dense_floating_label_vertical_spacing_top + "px" | ||
| }, | ||
| " .pe-textfield__counter": { | ||
| textAlign: "right", | ||
| float: "right", | ||
| padding: "0 0 0 16px" | ||
| }, | ||
| " .pe-textfield__input": { | ||
| fontSize: componentVars.dense_font_size_input + "px" | ||
| }, | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.dense_font_size_input + "px", | ||
| top: componentVars.dense_floating_label_vertical_spacing_top + componentVars.input_padding_v + "px" | ||
| }, | ||
| " .pe-textfield__help-focus": [polytheneCoreCss.mixin.defaultTransition("opacity"), { | ||
| opacity: 0 | ||
| }], | ||
| ".pe-textfield--focused .pe-textfield__help-focus, &.pe-textfield--dirty .pe-textfield__help-focus": { | ||
| opacity: 1 | ||
| }, | ||
| ".pe-textfield--focused, &.pe-textfield--dirty": { | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.dense_font_size_floating_label + "px", | ||
| top: componentVars.dense_floating_label_top + "px" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| ".pe-textfield--hide-clear": { | ||
| " .pe-textfield__input::-ms-clear": { | ||
| display: "none" | ||
| } | ||
| }, | ||
| ".pe-textfield--hide-spinner": { | ||
| " input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button": { | ||
| "-webkit-appearance": "none", | ||
| margin: 0 | ||
| ".pe-textfield--disabled, &.pe-textfield--readonly": { | ||
| " .pe-textfield__label": { | ||
| cursor: "auto" | ||
| }, | ||
| " .pe-textfield__input": { | ||
| "border-bottom": "none" | ||
| }, | ||
| " .pe-textfield__input-area:after": { | ||
| opacity: 1, | ||
| height: "1px", | ||
| bottom: "-1px", | ||
| backgroundPosition: "top", | ||
| backgroundSize: "4px 1px", | ||
| backgroundRepeat: "repeat-x" | ||
| } | ||
| }, | ||
| " input[type=number]": { | ||
| "-moz-appearance": "textfield" | ||
| } | ||
| } | ||
| }, { | ||
| ".pe-textfield--full-width": { | ||
| width: "100%", | ||
| padding: 0, | ||
| " .pe-textfield__input-area": { | ||
| padding: 0 | ||
| " .pe-textfield__error, .pe-textfield__error-placeholder, .pe-textfield__help, .pe-textfield__counter": { | ||
| marginTop: componentVars.margin_top_error_message + "px", | ||
| fontSize: componentVars.font_size_error + "px", | ||
| lineHeight: polytheneTheme.vars.line_height, | ||
| minHeight: componentVars.font_size_error * polytheneTheme.vars.line_height + "px" | ||
| }, | ||
| " .pe-textfield__input": { | ||
| padding: componentVars.full_width_input_padding_v + "px " + componentVars.full_width_input_padding_h + "px" | ||
| " .pe-textfield__counter": { | ||
| textAlign: "right", | ||
| float: "right", | ||
| padding: "0 0 0 16px" | ||
| }, | ||
| " .pe-textfield__error, .pe-textfield__help, .pe-textfield__counter": { | ||
| paddingLeft: componentVars.full_width_input_padding_h + "px", | ||
| paddingRight: componentVars.full_width_input_padding_h + "px" | ||
| " .pe-textfield__help-focus": [polytheneCoreCss.mixin.defaultTransition("opacity"), { | ||
| opacity: 0 | ||
| }], | ||
| ".pe-textfield--focused .pe-textfield__help-focus, &.pe-textfield--dirty .pe-textfield__help-focus": { | ||
| opacity: 1 | ||
| }, | ||
| " .pe-textfield__label": { | ||
| top: componentVars.full_width_input_padding_v + "px", | ||
| left: componentVars.full_width_input_padding_h + "px", | ||
| right: componentVars.full_width_input_padding_h + "px" | ||
| ".pe-textfield--hide-clear": { | ||
| " .pe-textfield__input::-ms-clear": { | ||
| display: "none" | ||
| } | ||
| }, | ||
| ".pe-textfield--dense": { | ||
| " .pe-textfield__input": { | ||
| fontSize: componentVars.dense_full_width_font_size_input + "px", | ||
| padding: componentVars.dense_full_width_input_padding_v + "px " + componentVars.dense_full_width_input_padding_h + "px" | ||
| ".pe-textfield--hide-spinner": { | ||
| " input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button": { | ||
| "-webkit-appearance": "none", | ||
| margin: 0 | ||
| }, | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.dense_full_width_font_size_input + "px", | ||
| top: componentVars.dense_full_width_input_padding_v + "px", | ||
| left: componentVars.dense_full_width_input_padding_h + "px", | ||
| right: componentVars.dense_full_width_input_padding_h + "px" | ||
| " input[type=number]": { | ||
| "-moz-appearance": "textfield" | ||
| } | ||
| } | ||
| } | ||
| }])]; | ||
| }); | ||
| }, { | ||
| ".pe-textfield--full-width": { | ||
| width: "100%", | ||
| padding: 0, | ||
| function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| " .pe-textfield__input-area": { | ||
| padding: 0 | ||
| }, | ||
| var style = function style(scopes, selector, componentVars, tint) { | ||
| return [_defineProperty$1({}, scopes.map(function (s) { | ||
| return s + selector; | ||
| }).join(","), { | ||
| // border color | ||
| color: componentVars["color_" + tint + "_focus_border"], // override by specifying "color" | ||
| " .pe-textfield__input": { | ||
| padding: componentVars.full_width_input_padding_v + "px " + componentVars.full_width_input_padding_h + "px" | ||
| }, | ||
| " .pe-textfield__input-area": { | ||
| color: "inherit", | ||
| backgroundColor: componentVars["color_" + tint + "_input_background"], | ||
| " .pe-textfield__error, .pe-textfield__help, .pe-textfield__counter": { | ||
| paddingLeft: componentVars.full_width_input_padding_h + "px", | ||
| paddingRight: componentVars.full_width_input_padding_h + "px" | ||
| }, | ||
| "&:after": { | ||
| backgroundColor: "currentcolor" | ||
| " .pe-textfield__label": { | ||
| top: componentVars.full_width_input_padding_v + "px", | ||
| left: componentVars.full_width_input_padding_h + "px", | ||
| right: componentVars.full_width_input_padding_h + "px" | ||
| }, | ||
| ".pe-textfield--dense": { | ||
| " .pe-textfield__input": { | ||
| fontSize: componentVars.dense_full_width_font_size_input + "px", | ||
| padding: componentVars.dense_full_width_input_padding_v + "px " + componentVars.dense_full_width_input_padding_h + "px" | ||
| }, | ||
| " .pe-textfield__label": { | ||
| fontSize: componentVars.dense_full_width_font_size_input + "px", | ||
| top: componentVars.dense_full_width_input_padding_v + "px", | ||
| left: componentVars.dense_full_width_input_padding_h + "px", | ||
| right: componentVars.dense_full_width_input_padding_h + "px" | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "&.pe-textfield--counter ": { | ||
| " .pe-textfield__input-area:after": { | ||
| backgroundColor: componentVars["color_" + tint + "_counter_ok_border"] | ||
| } | ||
| }, | ||
| }])]; | ||
| }); | ||
| " .pe-textfield__input": { | ||
| color: componentVars["color_" + tint + "_input_text"], | ||
| borderColor: componentVars["color_" + tint + "_input_bottom_border"] | ||
| }, | ||
| function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| " .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_label_text"] | ||
| }, | ||
| var style = function style(scopes, selector, componentVars, tint) { | ||
| return [_defineProperty$1({}, scopes.map(function (s) { | ||
| return s + selector; | ||
| }).join(","), { | ||
| // border color | ||
| color: componentVars["color_" + tint + "_focus_border"], // override by specifying "color" | ||
| "&.pe-textfield--disabled, &.pe-textfield--readonly": { | ||
| " .pe-textfield__input-area:after": { | ||
| backgroundColor: "transparent", | ||
| backgroundImage: "linear-gradient(to right, " + componentVars["color_" + tint + "_disabled_label_text"] + " 20%, rgba(255, 255, 255, 0) 0%)" | ||
| } | ||
| }, | ||
| " .pe-textfield__input-area": { | ||
| color: "inherit", | ||
| backgroundColor: componentVars["color_" + tint + "_input_background"], | ||
| "&.pe-textfield--disabled": { | ||
| " .pe-textfield__input, .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_disabled_label_text"] | ||
| } | ||
| }, | ||
| "&:after": { | ||
| backgroundColor: "currentcolor" | ||
| } | ||
| }, | ||
| "&.pe-textfield--counter ": { | ||
| " .pe-textfield__input-area:after": { | ||
| backgroundColor: componentVars["color_" + tint + "_counter_ok_border"] | ||
| } | ||
| }, | ||
| "&.pe-textfield--readonly": { | ||
| " .pe-textfield__input, .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_readonly_label_text"] | ||
| } | ||
| }, | ||
| " .pe-textfield__input": { | ||
| color: componentVars["color_" + tint + "_input_text"], | ||
| borderColor: componentVars["color_" + tint + "_input_bottom_border"] | ||
| }, | ||
| "&.pe-textfield--focused": { | ||
| // note: not when textfield--dirty and not textfield--focused | ||
| "&.pe-textfield--floating-label .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_highlight_text"] | ||
| " .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_label_text"] | ||
| }, | ||
| "&.pe-textfield--required.pe-textfield--floating-label": { | ||
| " .pe-textfield__required-indicator": { | ||
| color: componentVars["color_" + tint + "_required_symbol"] | ||
| "&.pe-textfield--disabled, &.pe-textfield--readonly": { | ||
| " .pe-textfield__input-area:after": { | ||
| backgroundColor: "transparent", | ||
| backgroundImage: "linear-gradient(to right, " + componentVars["color_" + tint + "_disabled_label_text"] + " 20%, rgba(255, 255, 255, 0) 0%)" | ||
| } | ||
| } | ||
| }, | ||
| }, | ||
| " .pe-textfield__help, .pe-textfield__counter": { | ||
| color: componentVars["color_" + tint + "_help_text"] | ||
| }, | ||
| "&.pe-textfield--disabled": { | ||
| " .pe-textfield__input, .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_disabled_label_text"] | ||
| } | ||
| }, | ||
| "&.pe-textfield--invalid:not(.pe-textfield--hide-validation)": { | ||
| " .pe-textfield__input": { | ||
| borderColor: componentVars["color_" + tint + "_input_error_border"], | ||
| boxShadow: "none" | ||
| "&.pe-textfield--readonly": { | ||
| " .pe-textfield__input, .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_readonly_label_text"] | ||
| } | ||
| }, | ||
| " .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_input_error_text"] | ||
| "&.pe-textfield--focused": { | ||
| // note: not when textfield--dirty and not textfield--focused | ||
| "&.pe-textfield--floating-label .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_highlight_text"] | ||
| }, | ||
| "&.pe-textfield--required.pe-textfield--floating-label": { | ||
| " .pe-textfield__required-indicator": { | ||
| color: componentVars["color_" + tint + "_required_symbol"] | ||
| } | ||
| } | ||
| }, | ||
| " .pe-textfield__error, .pe-textfield__counter, .pe-textfield__help": { | ||
| color: componentVars["color_" + tint + "_input_error_text"] | ||
| " .pe-textfield__help, .pe-textfield__counter": { | ||
| color: componentVars["color_" + tint + "_help_text"] | ||
| }, | ||
| "&.pe-textfield--required .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_input_error_text"] | ||
| "&.pe-textfield--invalid:not(.pe-textfield--hide-validation)": { | ||
| " .pe-textfield__input": { | ||
| borderColor: componentVars["color_" + tint + "_input_error_border"], | ||
| boxShadow: "none" | ||
| }, | ||
| " .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_input_error_text"] | ||
| }, | ||
| " .pe-textfield__error, .pe-textfield__counter, .pe-textfield__help": { | ||
| color: componentVars["color_" + tint + "_input_error_text"] | ||
| }, | ||
| "&.pe-textfield--required .pe-textfield__label": { | ||
| color: componentVars["color_" + tint + "_input_error_text"] | ||
| }, | ||
| "&, &.pe-textfield--counter": { | ||
| " .pe-textfield__input-area:after": { | ||
| backgroundColor: componentVars["color_" + tint + "_input_error_border"] | ||
| } | ||
| } | ||
| }, | ||
| "&, &.pe-textfield--counter": { | ||
| " .pe-textfield__input-area:after": { | ||
| backgroundColor: componentVars["color_" + tint + "_input_error_border"] | ||
| } | ||
| " .pe-textfield__input:-webkit-autofill": { | ||
| "-webkit-box-shadow": "0 0 0px 1000px " + componentVars["color_" + tint + "_input_background"] + " inset", | ||
| color: componentVars["color_" + tint + "_input_text"] + " !important" | ||
| } | ||
| }, | ||
| })]; | ||
| }; | ||
| " .pe-textfield__input:-webkit-autofill": { | ||
| "-webkit-box-shadow": "0 0 0px 1000px " + componentVars["color_" + tint + "_input_background"] + " inset", | ||
| color: componentVars["color_" + tint + "_input_text"] + " !important" | ||
| } | ||
| })]; | ||
| }; | ||
| var color = (function (selector, componentVars) { | ||
| return [style([".pe-dark-tone", ".pe-dark-tone "], selector, componentVars, "dark"), // has/inside dark tone | ||
| style(["", ".pe-light-tone", ".pe-light-tone "], selector, componentVars, "light")]; | ||
| }); | ||
| var color = (function (selector, componentVars) { | ||
| return [style([".pe-dark-tone", ".pe-dark-tone "], selector, componentVars, "dark"), // has/inside dark tone | ||
| style(["", ".pe-light-tone", ".pe-light-tone "], selector, componentVars, "light")]; | ||
| }); | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var fns = [layout, color]; | ||
| var selector = "." + classes.component; | ||
| var fns = [layout, color]; | ||
| var selector = "." + classes.component; | ||
| var addStyle = function addStyle(customSelector, customVars) { | ||
| return polytheneCoreCss.styler.generateStyles([customSelector, selector], _extends({}, polytheneCoreTextfield.vars, customVars), fns); | ||
| }; | ||
| var addStyle = function addStyle(customSelector, customVars) { | ||
| return polytheneCoreCss.styler.generateStyles([customSelector, selector], _extends({}, polytheneCoreTextfield.vars, customVars), fns); | ||
| }; | ||
| var getStyle = function getStyle(customSelector, customVars) { | ||
| return customSelector ? polytheneCoreCss.styler.createStyleSheets([customSelector, selector], _extends({}, polytheneCoreTextfield.vars, customVars), fns) : polytheneCoreCss.styler.createStyleSheets([selector], polytheneCoreTextfield.vars, fns); | ||
| }; | ||
| var getStyle = function getStyle(customSelector, customVars) { | ||
| return customSelector ? polytheneCoreCss.styler.createStyleSheets([customSelector, selector], _extends({}, polytheneCoreTextfield.vars, customVars), fns) : polytheneCoreCss.styler.createStyleSheets([selector], polytheneCoreTextfield.vars, fns); | ||
| }; | ||
| polytheneCoreCss.styler.generateStyles([selector], polytheneCoreTextfield.vars, fns); | ||
| polytheneCoreCss.styler.generateStyles([selector], polytheneCoreTextfield.vars, fns); | ||
| exports.addStyle = addStyle; | ||
| exports.getStyle = getStyle; | ||
| exports.addStyle = addStyle; | ||
| exports.getStyle = getStyle; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| //# sourceMappingURL=polythene-css-textfield.js.map |
| { | ||
| "name": "polythene-css-textfield", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "", | ||
| "main": "dist/polythene-css-textfield.js", | ||
| "main": "dist/polythene-css-textfield", | ||
| "module": "dist/polythene-css-textfield.mjs", | ||
| "scripts": { | ||
| "clean": "rm -rf dist && mkdir dist", | ||
| "clean": "rm -rf dist/*", | ||
| "rollup": "../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.umd.js && ../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.es.js", | ||
| "build:css": "node ../../scripts/writeComponentCSS.js", | ||
| "build": "yarn run rollup && yarn run build:css" | ||
| "build": "yarn run clean && yarn run rollup && yarn run build:css" | ||
| }, | ||
@@ -18,6 +18,6 @@ "files": [ | ||
| "dependencies": { | ||
| "polythene-core-css": "^1.0.0", | ||
| "polythene-core-textfield": "^1.0.0", | ||
| "polythene-css-classes": "^1.0.0", | ||
| "polythene-theme": "^1.0.0" | ||
| "polythene-core-css": "^1.1.0", | ||
| "polythene-core-textfield": "^1.1.0", | ||
| "polythene-css-classes": "^1.1.0", | ||
| "polythene-theme": "^1.1.0" | ||
| }, | ||
@@ -24,0 +24,0 @@ "author": "Arthur Clemens <arthurclemens@gmail.com> (http://arthurclemens.com)", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
96727
3.7%Dependency changes
Updated
polythene-core-css@^1.1.0Updated
polythene-css-classes@^1.1.0Updated
polythene-theme@^1.1.0