@spectrum-css/textfield
Version:
The Spectrum CSS textfield component
655 lines (549 loc) • 32 kB
CSS
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
@import "./themes/spectrum-two.css";
.spectrum-Textfield {
/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
/* disallow mod for max compatibility */
--spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
--spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100);
--spectrum-textfield-width: 240px; /* override per api */
--spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
--spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
/* default spacing */
--spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
--spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
--spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
--spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet);
/* default label spacing */
--spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);
/* default help text spacing */
--spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component);
/* default icon spacing - invalid */
--spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet);
/* default icon spacing - valid */
--spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet);
/* font styles */
--spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
/* character count */
--spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight);
--spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200);
--spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);
/* focus indicator */
--spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
--spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
/* Text Colors */
--spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus);
--spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
--spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus);
/* Read Only Text Color */
--spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
/* Disabled Colors */
--spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
/* Invalid Colors */
--spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default);
--spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
--spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
--spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
--spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus);
--spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color);
--spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default);
/* Valid Colors */
--spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default);
--spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color);
/* Focus Indicator Color */
--spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color);
/* Text Area / Multiline */
--spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width);
--spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height);
/* Default sizing values: Medium */
--spectrum-textfield-height: var(--spectrum-component-height-100);
--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium);
--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
/* Text Area / Multiline size medium */
--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
}
/********* Text field t-shirt sizes *********/
.spectrum-Textfield--sizeS {
--spectrum-textfield-height: var(--spectrum-component-height-75);
--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small);
--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75);
--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75);
--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small);
--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small);
--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small);
--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small);
/* Text Area / Multiline size small */
--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75);
}
.spectrum-Textfield--sizeL {
--spectrum-textfield-height: var(--spectrum-component-height-200);
--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large);
--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200);
--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200);
--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large);
--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large);
--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100);
--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100);
--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large);
--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large);
/* Text Area / Multiline size large */
--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200);
}
.spectrum-Textfield--sizeXL {
--spectrum-textfield-height: var(--spectrum-component-height-300);
--spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
--spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
--spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300);
--spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
--spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300);
--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large);
--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large);
--spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200);
--spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200);
--spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large);
--spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large);
/* Text Area / Multiline size extra large */
--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300);
}
/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/
.spectrum-Textfield {
position: relative;
text-overflow: ellipsis;
/* Prevent input from expanding to width of Help text */
inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
/* Grid layout for child components */
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
/*** ↓ Browser Mitigations for Text Field ↓ ***/
/* Edge - Show the overflow for input. */
overflow: visible;
/* Firefox and Safari - Remove the margin for input. */
margin: 0;
}
/********* Child Element - Validation Icons - ⚠️ ✅ *********/
.spectrum-Textfield-validationIcon {
/* specify validation class or web components will apply this to all icons */
.spectrum-Textfield.is-valid &,
.spectrum-Textfield.is-invalid & {
position: absolute;
pointer-events: all;
inset-block-start: 0;
margin-inline-start: auto;
grid-row: 2;
grid-column: 2;
}
.spectrum-Textfield.spectrum-Textfield--sideLabel & {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
}
/****** Validation Icon - Valid ✅ ******/
.spectrum-Textfield.is-valid & {
inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid));
inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid));
color: var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid));
}
/****** Validation Icon - Invalid ⚠️ ******/
.spectrum-Textfield.is-invalid & {
block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid));
inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid));
inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid));
color: var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid));
}
.spectrum-Textfield.is-disabled &,
.spectrum-Textfield.is-readOnly & {
/* Disabled validation icons are transparent */
color: transparent;
}
.spectrum-Textfield--quiet & {
padding-inline-end: 0;
}
.spectrum-Textfield--quiet.is-valid & {
inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-valid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid));
}
.spectrum-Textfield--quiet.is-invalid & {
inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid));
}
}
/********* Child Component - Label *********/
.spectrum-FieldLabel {
.spectrum-Textfield & {
margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block));
grid-row: 1;
grid-column: 1 / span 1;
}
.spectrum-Textfield--quiet & {
margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet));
}
.spectrum-Textfield.is-disabled & {
color: var(--spectrum-textfield-text-color-disabled);
}
}
/********* Child Component - Help Text *********/
.spectrum-Textfield .spectrum-HelpText {
margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
grid-row: 3;
grid-column: 1 / span 2;
}
/********* Child Element - Character Count *********/
.spectrum-Textfield-characterCount {
display: inline-flex;
align-items: flex-end;
justify-content: flex-end;
inline-size: auto;
margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block));
margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline));
margin-inline-end: 0;
font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));
font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family));
font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight));
grid-row: 1;
grid-column: 2 / span 1;
padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2);
.spectrum-Textfield--quiet & {
margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet));
}
}
/********* Child Element - Input *********/
.spectrum-Textfield-input {
/* no mod defined to allow for maximum compatibility */
line-height: var(--spectrum-textfield-input-line-height);
box-sizing: border-box;
inline-size: 100%;
min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width));
block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
vertical-align: top; /* used to align them correctly in forms. */
outline: none;
background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color));
border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width));
border-style: solid;
border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)));
border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius));
transition: border-color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;
font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size));
font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
text-overflow: ellipsis;
/* place in same cell: input, focus indicator, and grows sizer */
grid-row: 2;
grid-column: 1 / span 2;
/*** ↓ Browser Mitigations for Input ↓ ***/
/* Firefox and Safari - Remove the margin for input. */
margin: 0;
appearance: none;
&[type="number"] {
/* stylelint-disable-next-line property-no-vendor-prefix -- Removes the native spin buttons in Firefox. */
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
/* stylelint-disable-next-line property-no-vendor-prefix -- Remove the native spin buttons in webkit-based browsers. */
-webkit-appearance: none;
margin: 0;
}
}
/* Removes the red border that appears in Firefox (normalize). */
&:-moz-ui-invalid {
box-shadow: none;
}
/*** Input Placeholder Text ***/
&::placeholder {
/* Normalize opacity between browsers. */
opacity: 1;
font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size));
font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family));
font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight));
color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)));
transition: color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;
}
/*** Input Placeholder Text - CJK ***/
&:lang(ja),
&:lang(zh),
&:lang(ko) {
&::placeholder {
font-style: normal;
}
}
/* hover */
.spectrum-Textfield:hover &,
&:hover {
border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)));
color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));
&::placeholder {
color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)));
}
}
/* mouse focus */
.is-focused &,
&:focus {
border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)));
color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus));
&::placeholder {
color: var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus));
}
/* focus hover */
&:hover {
border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover));
color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover));
}
&:hover::placeholder {
color: var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover));
}
}
/* keyboard focus */
.is-keyboardFocused & {
border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)));
color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
&::placeholder {
color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
}
/* focus indicator is focused state */
outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid;
outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap));
}
/*** Input Valid ✅ ***/
.is-valid & {
padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)));
}
/*** Input Invalid ⚠️ ***/
.is-invalid & {
padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)));
border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
}
/* Invalid hover */
.is-invalid:hover:not(.is-disabled) &,
.is-invalid &:hover:not(.is-disabled) {
border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)));
}
/* Invalid mouse focus */
.is-invalid.is-focused &,
.is-invalid:focus &,
.is-invalid &:focus {
border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)));
/* focus hover */
&:hover {
border-color: var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover));
}
}
/* invalid keyboard focus */
.is-invalid.is-keyboardFocused &,
.is-invalid &:focus-visible {
border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)));
}
/****** Input Disabled 🚫 ******/
.spectrum-Textfield.is-disabled &,
.spectrum-Textfield.is-disabled:hover &,
&:disabled {
background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
/* Disable the resize functionality when disabled */
resize: none;
/* The opacity must be set to 1 */
opacity: 1;
&::placeholder {
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
}
}
/****** Input - Quiet 🤫 ******/
.spectrum-Textfield--quiet & {
outline: none;
border-block-start-width: 0;
border-inline-width: 0;
margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet));
padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start));
padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet));
background-color: transparent;
border-radius: 0;
/* Treat all quiet inputs and text areas the same */
resize: none;
overflow-y: hidden;
}
/****** Input - Quiet 🤫 + Disabled 🚫 ******/
.spectrum-Textfield--quiet.is-disabled &,
.spectrum-Textfield--quiet.is-disabled:hover &,
&:disabled {
background-color: transparent;
border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
&::placeholder {
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
}
}
/****** Input ReadOnly ******/
.spectrum-Textfield.is-readOnly &,
.spectrum-Textfield.is-readOnly:hover &,
&:read-only {
background-color: transparent;
border-color: transparent;
color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
outline: none;
&::placeholder {
color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)));
background-color: transparent;
}
}
}
/*** Layout Variant - Side Label ***/
.spectrum-Textfield--sideLabel {
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
/*** Focus Indicator ***/
&::after {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
}
.spectrum-FieldLabel {
margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label));
grid-row: 1 / span 2;
grid-column: 1 / span 1;
}
.spectrum-Textfield-characterCount {
align-items: flex-start;
margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side));
margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side));
grid-row: 1;
grid-column: 3 / span 1;
}
.spectrum-HelpText {
grid-row: 2;
grid-column: 2 / span 1;
}
.spectrum-Textfield-validationIcon {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
}
.spectrum-Textfield-input {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
}
}
/*** Text Area ***/
.spectrum-Textfield--multiline {
--spectrum-textfield-input-line-height: normal;
.spectrum-Textfield-input {
min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size));
min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size));
resize: inherit;
}
&.spectrum-Textfield--grows {
.spectrum-Textfield-input {
grid-row: 2 / auto;
}
&.spectrum-Textfield--sideLabel .spectrum-Textfield-input {
grid-row: 1 / auto;
}
}
&.spectrum-Textfield--quiet .spectrum-Textfield-input {
min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet));
/* Treat all quiet inputs and text areas the same */
resize: none;
overflow-y: hidden;
}
}
.spectrum-Textfield--quiet {
&::after {
content: "";
pointer-events: none;
position: absolute;
inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width))));
inset-inline-start: 0;
inline-size: 100%;
block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width));
}
&.is-keyboardFocused::after {
background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
}
/*** Quiet Input Invalid ⚠️ ***/
&.is-invalid .spectrum-Textfield-input {
padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)));
}
/*** Quiet Input Valid ✅ ***/
&.is-valid .spectrum-Textfield-input {
padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)));
}
}
/********* WHCM *********/
@media (forced-colors: active) {
.spectrum-Textfield {
--highcontrast-textfield-border-color: CanvasText;
--highcontrast-textfield-border-color-hover: Highlight;
--highcontrast-textfield-border-color-focus: Highlight;
--highcontrast-textfield-border-color-keyboard-focus: CanvasText;
--highcontrast-textfield-focus-indicator-color: Highlight;
--highcontrast-textfield-border-color-invalid-default: Highlight;
--highcontrast-textfield-border-color-invalid-hover: Highlight;
--highcontrast-textfield-border-color-invalid-focus: Highlight;
--highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight;
--highcontrast-textfield-text-color-valid: CanvasText;
--highcontrast-textfield-text-color-invalid: CanvasText;
.spectrum-Textfield-input {
--highcontrast-textfield-text-color-default: CanvasText;
--highcontrast-textfield-text-color-hover: CanvasText;
--highcontrast-textfield-text-color-keyboard-focus: CanvasText;
--highcontrast-textfield-text-color-disabled: GrayText;
--highcontrast-textfield-text-color-readonly: CanvasText;
&::placeholder {
--highcontrast-textfield-text-color-default: GrayText;
--highcontrast-textfield-text-color-hover: GrayText;
--highcontrast-textfield-text-color-keyboard-focus: GrayText;
--highcontrast-textfield-text-color-disabled: GrayText;
--highcontrast-textfield-text-color-readonly: CanvasText;
}
}
}
}