UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

59 lines (47 loc) 1.6 kB
.spectrum-Search { display: inline-block; position: relative; } .spectrum-Search .spectrum-ClearButton { position: absolute; right: 0; top: 0; } .spectrum-Search-input { display: block; -webkit-appearance: none; outline-offset: -2px; padding-left: var(--spectrum-search-padding-left, 36px); text-indent: 0; padding-right: var(--spectrum-search-padding-right, 28px); } .spectrum-Search-input::-webkit-search-cancel-button, .spectrum-Search-input::-webkit-search-decoration { -webkit-appearance: none; } .spectrum-Search-input.spectrum-Textfield--quiet { padding-left: var(--spectrum-search-quiet-padding-left, 24px); padding-right: var(--spectrum-search-quiet-padding-right, 20px); } .spectrum-Search-input.spectrum-Textfield--quiet ~ .spectrum-Search-icon { left: 0; } .spectrum-Search-input.spectrum-Textfield--quiet ~ .spectrum-Search-clear { right: -8px; } .spectrum-Search-input.spectrum-Textfield--quiet ~ .spectrum-Search-rightIcon { right: 0; } .spectrum-Search-icon { display: block; position: absolute; left: 12px; top: calc(var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height)) / 2 - var(--spectrum-icon-magnifier-width, var(--spectrum-global-dimension-size-200)) / 2); pointer-events: none; } .spectrum-Search-icon { color: var(--spectrum-textfield-icon-color, var(--spectrum-alias-icon-color)); } .spectrum-Search-input:disabled ~ .spectrum-Search-icon { color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled)); }