UNPKG

@spectrum-css/textfield

Version:

The Spectrum CSS textfield component

370 lines (369 loc) 18.2 kB
{ "sourceFile": "index.css", "selectors": [ ".is-focused .spectrum-Textfield-input", ".is-focused .spectrum-Textfield-input::placeholder", ".is-focused .spectrum-Textfield-input:hover", ".is-focused .spectrum-Textfield-input:hover::placeholder", ".is-invalid .spectrum-Textfield-input", ".is-invalid .spectrum-Textfield-input:focus", ".is-invalid .spectrum-Textfield-input:focus-visible", ".is-invalid .spectrum-Textfield-input:focus:hover", ".is-invalid .spectrum-Textfield-input:hover:not(.is-disabled)", ".is-invalid.is-focused .spectrum-Textfield-input", ".is-invalid.is-focused .spectrum-Textfield-input:hover", ".is-invalid.is-keyboardFocused .spectrum-Textfield-input", ".is-invalid:focus .spectrum-Textfield-input", ".is-invalid:focus .spectrum-Textfield-input:hover", ".is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input", ".is-keyboardFocused .spectrum-Textfield-input", ".is-keyboardFocused .spectrum-Textfield-input::placeholder", ".is-valid .spectrum-Textfield-input", ".spectrum-Textfield", ".spectrum-Textfield .spectrum-FieldLabel", ".spectrum-Textfield .spectrum-HelpText", ".spectrum-Textfield .spectrum-Textfield-input", ".spectrum-Textfield .spectrum-Textfield-input::placeholder", ".spectrum-Textfield--multiline", ".spectrum-Textfield--multiline .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--grows .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--grows.spectrum-Textfield--sideLabel .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input", ".spectrum-Textfield--quiet .spectrum-FieldLabel", ".spectrum-Textfield--quiet .spectrum-Textfield-characterCount", ".spectrum-Textfield--quiet .spectrum-Textfield-input", ".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon", ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input", ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder", ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input", ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input", ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon", ".spectrum-Textfield--quiet.is-keyboardFocused:after", ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input", ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon", ".spectrum-Textfield--quiet:after", ".spectrum-Textfield--sideLabel", ".spectrum-Textfield--sideLabel .spectrum-FieldLabel", ".spectrum-Textfield--sideLabel .spectrum-HelpText", ".spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount", ".spectrum-Textfield--sideLabel .spectrum-Textfield-input", ".spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield--sideLabel:after", ".spectrum-Textfield--sizeL", ".spectrum-Textfield--sizeS", ".spectrum-Textfield--sizeXL", ".spectrum-Textfield-characterCount", ".spectrum-Textfield-input", ".spectrum-Textfield-input:-moz-ui-invalid", ".spectrum-Textfield-input::placeholder", ".spectrum-Textfield-input:disabled", ".spectrum-Textfield-input:disabled::placeholder", ".spectrum-Textfield-input:focus", ".spectrum-Textfield-input:focus::placeholder", ".spectrum-Textfield-input:focus:hover", ".spectrum-Textfield-input:focus:hover::placeholder", ".spectrum-Textfield-input:hover", ".spectrum-Textfield-input:hover::placeholder", ".spectrum-Textfield-input:lang(ja)::placeholder", ".spectrum-Textfield-input:lang(ko)::placeholder", ".spectrum-Textfield-input:lang(zh)::placeholder", ".spectrum-Textfield-input:read-only", ".spectrum-Textfield-input:read-only::placeholder", ".spectrum-Textfield-input[type=\"number\"]", ".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button", ".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button", ".spectrum-Textfield.is-disabled .spectrum-FieldLabel", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input", ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--quiet", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--sizeL", ".spectrum-Textfield.spectrum-Textfield--sizeS", ".spectrum-Textfield.spectrum-Textfield--sizeXL", ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], "modifiers": [ "--mod-texfield-animation-duration", "--mod-text-area-min-block-size", "--mod-text-area-min-block-size-quiet", "--mod-text-area-min-inline-size", "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", "--mod-textfield-border-color-disabled", "--mod-textfield-border-color-focus", "--mod-textfield-border-color-focus-hover", "--mod-textfield-border-color-hover", "--mod-textfield-border-color-invalid-default", "--mod-textfield-border-color-invalid-focus", "--mod-textfield-border-color-invalid-focus-hover", "--mod-textfield-border-color-invalid-hover", "--mod-textfield-border-color-invalid-keyboard-focus", "--mod-textfield-border-color-keyboard-focus", "--mod-textfield-border-width", "--mod-textfield-character-count-font-family", "--mod-textfield-character-count-font-size", "--mod-textfield-character-count-font-weight", "--mod-textfield-character-count-spacing-block", "--mod-textfield-character-count-spacing-block-quiet", "--mod-textfield-character-count-spacing-block-side", "--mod-textfield-character-count-spacing-inline", "--mod-textfield-character-count-spacing-inline-side", "--mod-textfield-corner-radius", "--mod-textfield-focus-indicator-color", "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", "--mod-textfield-font-weight", "--mod-textfield-height", "--mod-textfield-helptext-spacing-block", "--mod-textfield-icon-color-invalid", "--mod-textfield-icon-color-valid", "--mod-textfield-icon-size-invalid", "--mod-textfield-icon-size-valid", "--mod-textfield-icon-spacing-block-invalid", "--mod-textfield-icon-spacing-block-valid", "--mod-textfield-icon-spacing-inline-end-invalid", "--mod-textfield-icon-spacing-inline-end-quiet-invalid", "--mod-textfield-icon-spacing-inline-end-quiet-valid", "--mod-textfield-icon-spacing-inline-end-valid", "--mod-textfield-icon-spacing-inline-start-invalid", "--mod-textfield-icon-spacing-inline-start-valid", "--mod-textfield-label-spacing-block", "--mod-textfield-label-spacing-block-quiet", "--mod-textfield-label-spacing-inline-side-label", "--mod-textfield-min-width", "--mod-textfield-placeholder-font-size", "--mod-textfield-spacing-block-end", "--mod-textfield-spacing-block-quiet", "--mod-textfield-spacing-block-start", "--mod-textfield-spacing-inline", "--mod-textfield-spacing-inline-quiet", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", "--mod-textfield-text-color-focus-hover", "--mod-textfield-text-color-hover", "--mod-textfield-text-color-invalid", "--mod-textfield-text-color-keyboard-focus", "--mod-textfield-text-color-readonly", "--mod-textfield-text-color-valid", "--mod-textfield-width" ], "component": [ "--spectrum-text-field-minimum-width-multiplier", "--spectrum-textfield-background-color", "--spectrum-textfield-background-color-disabled", "--spectrum-textfield-border-color", "--spectrum-textfield-border-color-disabled", "--spectrum-textfield-border-color-focus", "--spectrum-textfield-border-color-focus-hover", "--spectrum-textfield-border-color-hover", "--spectrum-textfield-border-color-invalid-default", "--spectrum-textfield-border-color-invalid-focus", "--spectrum-textfield-border-color-invalid-focus-hover", "--spectrum-textfield-border-color-invalid-hover", "--spectrum-textfield-border-color-invalid-keyboard-focus", "--spectrum-textfield-border-color-keyboard-focus", "--spectrum-textfield-border-width", "--spectrum-textfield-character-count-font-family", "--spectrum-textfield-character-count-font-size", "--spectrum-textfield-character-count-font-weight", "--spectrum-textfield-character-count-spacing-block", "--spectrum-textfield-character-count-spacing-block-quiet", "--spectrum-textfield-character-count-spacing-block-side", "--spectrum-textfield-character-count-spacing-inline", "--spectrum-textfield-character-count-spacing-inline-side", "--spectrum-textfield-corner-radius", "--spectrum-textfield-focus-indicator-color", "--spectrum-textfield-focus-indicator-gap", "--spectrum-textfield-focus-indicator-width", "--spectrum-textfield-font-family", "--spectrum-textfield-font-weight", "--spectrum-textfield-height", "--spectrum-textfield-helptext-spacing-block", "--spectrum-textfield-icon-color-invalid", "--spectrum-textfield-icon-color-valid", "--spectrum-textfield-icon-size-invalid", "--spectrum-textfield-icon-size-valid", "--spectrum-textfield-icon-spacing-block-invalid", "--spectrum-textfield-icon-spacing-block-valid", "--spectrum-textfield-icon-spacing-inline-end-invalid", "--spectrum-textfield-icon-spacing-inline-end-quiet-invalid", "--spectrum-textfield-icon-spacing-inline-end-quiet-valid", "--spectrum-textfield-icon-spacing-inline-end-valid", "--spectrum-textfield-icon-spacing-inline-start-invalid", "--spectrum-textfield-icon-spacing-inline-start-valid", "--spectrum-textfield-input-line-height", "--spectrum-textfield-label-spacing-block", "--spectrum-textfield-label-spacing-block-quiet", "--spectrum-textfield-label-spacing-inline-side-label", "--spectrum-textfield-min-width", "--spectrum-textfield-placeholder-font-size", "--spectrum-textfield-spacing-block-end", "--spectrum-textfield-spacing-block-quiet", "--spectrum-textfield-spacing-block-start", "--spectrum-textfield-spacing-inline", "--spectrum-textfield-spacing-inline-quiet", "--spectrum-textfield-text-color-default", "--spectrum-textfield-text-color-disabled", "--spectrum-textfield-text-color-focus", "--spectrum-textfield-text-color-focus-hover", "--spectrum-textfield-text-color-hover", "--spectrum-textfield-text-color-invalid", "--spectrum-textfield-text-color-keyboard-focus", "--spectrum-textfield-text-color-readonly", "--spectrum-textfield-text-color-valid", "--spectrum-textfield-width" ], "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", "--spectrum-character-count-to-field-quiet-extra-large", "--spectrum-character-count-to-field-quiet-large", "--spectrum-character-count-to-field-quiet-medium", "--spectrum-character-count-to-field-quiet-small", "--spectrum-checkmark-icon-size-100", "--spectrum-checkmark-icon-size-200", "--spectrum-checkmark-icon-size-300", "--spectrum-checkmark-icon-size-75", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-75", "--spectrum-component-edge-to-text-100", "--spectrum-component-edge-to-text-200", "--spectrum-component-edge-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-workflow-icon-100", "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-100", "--spectrum-disabled-content-color", "--spectrum-field-edge-to-alert-icon-extra-large", "--spectrum-field-edge-to-alert-icon-large", "--spectrum-field-edge-to-alert-icon-medium", "--spectrum-field-edge-to-alert-icon-quiet", "--spectrum-field-edge-to-alert-icon-small", "--spectrum-field-edge-to-border-quiet", "--spectrum-field-edge-to-text-quiet", "--spectrum-field-edge-to-validation-icon-extra-large", "--spectrum-field-edge-to-validation-icon-large", "--spectrum-field-edge-to-validation-icon-medium", "--spectrum-field-edge-to-validation-icon-quiet", "--spectrum-field-edge-to-validation-icon-small", "--spectrum-field-label-to-component", "--spectrum-field-label-to-component-quiet-extra-large", "--spectrum-field-label-to-component-quiet-large", "--spectrum-field-label-to-component-quiet-medium", "--spectrum-field-label-to-component-quiet-small", "--spectrum-field-text-to-alert-icon-extra-large", "--spectrum-field-text-to-alert-icon-large", "--spectrum-field-text-to-alert-icon-medium", "--spectrum-field-text-to-alert-icon-small", "--spectrum-field-text-to-validation-icon-extra-large", "--spectrum-field-text-to-validation-icon-large", "--spectrum-field-text-to-validation-icon-medium", "--spectrum-field-text-to-validation-icon-small", "--spectrum-field-top-to-validation-icon-extra-large", "--spectrum-field-top-to-validation-icon-large", "--spectrum-field-top-to-validation-icon-medium", "--spectrum-field-top-to-validation-icon-small", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", "--spectrum-gray-300", "--spectrum-gray-500", "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-help-text-to-component", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", "--spectrum-negative-visual-color", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-focus", "--spectrum-neutral-content-color-focus-hover", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", "--spectrum-positive-visual-color", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", "--spectrum-side-label-character-count-to-field", "--spectrum-side-label-character-count-top-margin-extra-large", "--spectrum-side-label-character-count-top-margin-large", "--spectrum-side-label-character-count-top-margin-medium", "--spectrum-side-label-character-count-top-margin-small", "--spectrum-spacing-100", "--spectrum-spacing-200", "--spectrum-texfield-animation-duration", "--spectrum-text-area-min-block-size", "--spectrum-text-area-min-block-size-quiet", "--spectrum-text-area-min-inline-size", "--spectrum-text-area-minimum-height", "--spectrum-text-area-minimum-width", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], "system-theme": [ "--system-textfield-background-color", "--system-textfield-background-color-disabled", "--system-textfield-border-color", "--system-textfield-border-color-disabled", "--system-textfield-border-color-focus", "--system-textfield-border-color-focus-hover", "--system-textfield-border-color-hover", "--system-textfield-border-color-keyboard-focus", "--system-textfield-border-width", "--system-textfield-icon-spacing-block-invalid", "--system-textfield-quiet-border-color-disabled", "--system-textfield-size-l-icon-spacing-block-invalid", "--system-textfield-size-s-icon-spacing-block-invalid", "--system-textfield-size-xl-icon-spacing-block-invalid" ], "passthroughs": [], "high-contrast": [ "--highcontrast-textfield-border-color", "--highcontrast-textfield-border-color-focus", "--highcontrast-textfield-border-color-hover", "--highcontrast-textfield-border-color-invalid-default", "--highcontrast-textfield-border-color-invalid-focus", "--highcontrast-textfield-border-color-invalid-hover", "--highcontrast-textfield-border-color-invalid-keyboard-focus", "--highcontrast-textfield-border-color-keyboard-focus", "--highcontrast-textfield-focus-indicator-color", "--highcontrast-textfield-text-color-default", "--highcontrast-textfield-text-color-disabled", "--highcontrast-textfield-text-color-hover", "--highcontrast-textfield-text-color-invalid", "--highcontrast-textfield-text-color-keyboard-focus", "--highcontrast-textfield-text-color-readonly", "--highcontrast-textfield-text-color-valid" ] }