@shopify/polaris/build/esnext/components/TextField/TextField.css

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-TextField_1spwi { --pc-text-field-contents: 20; --pc-text-field-backdrop: 10; font-size: var(--p-font-size-5); font-weight: var(--p-font-weight-regular); line-height: var(--p-line-height-3); border: none; text-transform: initial; letter-spacing: initial; position: relative; display: flex; align-items: center; color: var(--p-text); cursor: text; }

@media (min-width: 40em) { .Polaris-TextField_1spwi { font-size: var(--p-font-size-3); } }

.Polaris-TextField_1spwi svg { fill: var(--p-icon); }

.Polaris-TextField--multiline_1jgfe { padding: 0; flex-wrap: wrap; }

.Polaris-TextField--multiline_1jgfe > .Polaris-TextField__Input_30ock { overflow: auto; padding-left: var(--p-space-3); padding-right: var(--p-space-3); resize: none; }

.Polaris-TextField--hasValue_1mx8d { color: var(--p-text); }

.Polaris-TextField--focus_383dj > .Polaris-TextField__Input_30ock, .Polaris-TextField--focus_383dj > .Polaris-TextField__VerticalContent_edn5f, .Polaris-TextField__Input_30ock:focus { outline: none; }

.Polaris-TextField--focus_383dj > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2::after, .Polaris-TextField--focus_383dj > .Polaris-TextField__VerticalContent_edn5f ~ .Polaris-TextField__Backdrop_1x2i2::after, .Polaris-TextField__Input_30ock:focus ~ .Polaris-TextField__Backdrop_1x2i2::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-TextField--error_37uk1 .Polaris-TextField__Input_30ock::placeholder { color: #9c9798; }

.Polaris-TextField--error_37uk1 > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2 { background-color: var(--p-surface-critical-subdued); border-color: var(--p-border-critical); }

.Polaris-TextField--error_37uk1 > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2::after { border-color: var(--p-focused); }

.Polaris-TextField--readOnly_vi6ia > .Polaris-TextField__Backdrop_1x2i2 { background-color: var(--p-action-secondary-disabled); }

.Polaris-TextField--disabled_hcuh9 { color: var(--p-text-disabled); cursor: initial; }

.Polaris-TextField--disabled_hcuh9 > .Polaris-TextField__Backdrop_1x2i2 { background-color: var(--p-surface-disabled); border-top-color: var(--p-border-disabled); }

.Polaris-TextField--disabled_hcuh9 svg { fill: var(--p-icon-disabled); }

.Polaris-TextField__Input_30ock { font-size: var(--p-font-size-5); font-weight: var(--p-font-weight-regular); line-height: var(--p-line-height-3); border: none; text-transform: initial; letter-spacing: initial; position: relative; z-index: var(--pc-text-field-contents); display: block; flex: 1 1; width: 100%; min-width: 0; min-height: 2.25rem; margin: 0; padding: calc((var(--p-line-height-6) - var(--p-line-height-3) - var(--p-space-05))/2) var(--p-space-3); background: none; border: var(--p-border-transparent); font-family: var(--p-font-family-sans); -webkit-appearance: none; appearance: none; caret-color: var(--p-text); color: var(--p-text); }

@media (min-width: 40em) { .Polaris-TextField__Input_30ock { font-size: var(--p-font-size-3); } }

.Polaris-TextField__Prefix_10fbz + .Polaris-TextField__Input_30ock { padding-left: 0; }

.Polaris-TextField__Input_30ock:disabled { opacity: 1; background: none; color: var(--p-text-disabled); -webkit-text-fill-color: var(--p-text-disabled); }

.Polaris-TextField__Input_30ock:invalid { box-shadow: none; }

.Polaris-TextField__Input_30ock::placeholder { color: var(--p-text-subdued); }

.Polaris-TextField__Input_30ock[type='number'] { -webkit-appearance: textfield; appearance: textfield; }

.Polaris-TextField__Input_30ock[type='number']::-webkit-outer-spin-button, .Polaris-TextField__Input_30ock[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

.Polaris-TextField__Input_30ock:-webkit-autofill { border-radius: var(--p-border-radius-1); }

.Polaris-TextField__Input_30ock.Polaris-TextField--suggestion_yv4pe::selection { color: var(--p-text-disabled); background: transparent; }

.Polaris-TextField__Input--hasClearButton_15k6h[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.Polaris-TextField__Input--suffixed_1tsyu { padding-right: 0; }

.Polaris-TextField__Input--alignRight_1d0yj { text-align: right; }

.Polaris-TextField__Input--alignLeft_exwxn { text-align: left; }

.Polaris-TextField__Input--alignCenter_7nhdy { text-align: center; }

.Polaris-TextField__Backdrop_1x2i2 { position: relative; position: absolute; z-index: var(--pc-text-field-backdrop); top: 0; right: 0; bottom: 0; left: 0; background-color: var(--p-surface); border: var(--p-border-width-1) solid var(--p-border-subdued); border-top-color: var(--p-border-shadow); border-radius: var(--p-border-radius-1); pointer-events: none; }

.Polaris-TextField__Backdrop_1x2i2::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-TextField__Prefix_10fbz, .Polaris-TextField__Suffix_10fbu { position: relative; z-index: var(--pc-text-field-contents); flex: 0 0 auto; color: var(--p-text-subdued); -webkit-user-select: none; user-select: none; }

.Polaris-TextField__Prefix_10fbz { margin-left: var(--p-space-3); margin-right: var(--p-space-2); }

.Polaris-TextField__Suffix_10fbu { margin-left: var(--p-space-1); margin-right: var(--p-space-3); }

.Polaris-TextField__VerticalContent_edn5f { position: relative; z-index: var(--pc-text-field-contents); color: var(--p-text-subdued); -webkit-user-select: none; user-select: none; padding: var(--p-space-2) var(--p-space-2) 0 var(--p-space-2); max-height: 8.75rem; overflow: scroll; border: var(--p-border-transparent); width: 100%; }

.Polaris-TextField__VerticalContent_edn5f > .Polaris-TextField__Input_30ock { padding-left: var(--p-space-0); padding-right: var(--p-space-0); }

@media (min-width: 30.625em) { .Polaris-TextField__VerticalContent_edn5f { max-height: 20.5rem; } }

.Polaris-TextField__CharacterCount_163be { color: var(--p-text-subdued); z-index: var(--pc-text-field-contents); margin: 0 var(--p-space-3) 0 var(--p-space-1); pointer-events: none; text-align: right; }

.Polaris-TextField__AlignFieldBottom_9rm8m { align-self: flex-end; width: 100%; padding-bottom: var(--p-space-2); }

.Polaris-TextField__ClearButton_b7wzn { position: relative; -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; z-index: var(--pc-text-field-contents); margin: 0 var(--p-space-3) 0 var(--p-space-1); }

.Polaris-TextField__ClearButton_b7wzn::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-TextField__ClearButton_b7wzn:focus { outline: none; }

.Polaris-TextField__ClearButton_b7wzn:focus:enabled::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-TextField__ClearButton_b7wzn:disabled { cursor: default; }

.Polaris-TextField__Spinner_mzr5w { --pc-text-field-spinner-offset-large: calc(var(--p-text-field-spinner-offset) + var(--p-border-width-1)); z-index: var(--pc-text-field-contents); margin: var(--pc-text-field-spinner-offset-large); color: var(--p-icon); display: flex; align-self: stretch; flex-direction: column; width: 1.375rem; cursor: pointer; }

.Polaris-TextField__SpinnerIcon_185nu { height: 0.75rem; width: 0.75rem; }

.Polaris-TextField__Resizer_mlqsu { position: absolute; bottom: 0; left: 0; right: 0; height: 0; visibility: hidden; overflow: hidden; }

.Polaris-TextField__DummyInput_1u3lq { font-size: var(--p-font-size-5); font-weight: var(--p-font-weight-regular); line-height: var(--p-line-height-3); border: none; text-transform: initial; letter-spacing: initial; padding: calc((var(--p-line-height-6) - var(--p-line-height-3) - var(--p-space-05))/2) var(--p-space-3); word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; }

@media (min-width: 40em) { .Polaris-TextField__DummyInput_1u3lq { font-size: var(--p-font-size-3); } }

.Polaris-TextField__Segment_xdd2a { --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-1) - var(--p-text-field-spinner-offset)); background: var(--p-surface-neutral); border-radius: var(--pc-text-field-spinner-border-radius); display: flex; flex: 1 1; justify-content: center; align-items: center; -webkit-appearance: none; appearance: none; border: none; }

.Polaris-TextField__Segment_xdd2a:focus { outline: none; }

.Polaris-TextField__Segment_xdd2a:active { background: var(--p-surface-neutral-pressed); }

.Polaris-TextField__Segment_xdd2a:first-child { border-top-right-radius: var(--pc-text-field-spinner-border-radius); margin-bottom: var(--p-text-field-spinner-offset); }

.Polaris-TextField__Segment_xdd2a:last-child { border-bottom-right-radius: var(--pc-text-field-spinner-border-radius); }

.Polaris-TextField__Segment_xdd2a:not(:first-child) { margin-top: 0; }

.Polaris-TextField--monospaced_2esgp { font-family: var(--p-font-family-mono); }