UNPKG

@ebay/skin

Version:

Skin - CSS modules that represent the brand eBay

117 lines (116 loc) 2.82 kB
.select { color: var(--select-foreground-color, var(--color-foreground-primary)); font-size: var(--font-size-body); position: relative; } span.select { display: inline-block; } .select select { appearance: none; background-color: var( --select-background-color, var(--color-background-secondary) ); border-color: var(--select-border-color, var(--color-border-medium)); border-radius: var(--select-border-radius, var(--border-radius-50)); border-style: solid; border-width: 1px; color: inherit; font-family: inherit; font-size: 1em; height: 40px; padding: 0 var(--spacing-400) 0 var(--spacing-200); vertical-align: middle; } .select svg.icon--12 { height: 100%; pointer-events: none; position: absolute; right: 16px; top: 0; } .select--large select { font-size: var(--font-size-medium); height: 48px; } .select--fluid, .select--fluid select { width: 100%; } .select--borderless select { background-color: initial; border: 0; padding-left: 0; width: auto; } .select--borderless select:focus { background-color: initial; text-decoration: underline; } .select select:focus { background-color: var( --select-focus-background-color, var(--color-background-primary) ); } .select select:focus:not(:read-only) { background-color: var( --select-focus-background-color, var(--color-background-primary) ); border-color: var(--select-focus-border-color, var(--color-border-medium)); outline: 0; text-decoration: underline; } .select select::-ms-expand { display: none; } .select select[disabled] { border-color: var( --textbox-disabled-border-color, var(--color-background-disabled) ); color: var( --select-disabled-foregound-color, var(--color-foreground-disabled) ); opacity: 1; } .select select[disabled] + svg { color: var( --select-disabled-foregound-color, var(--color-foreground-on-disabled) ); } .select select[readonly] { background-color: initial; border: none; } .select select[aria-invalid="true"] { border-color: var( --select-invalid-border-color, var(--color-border-attention) ); border-style: solid; border-width: 1px; } .select select[aria-invalid="true"]:focus { background-color: var( --select-focus-background-color, var(--color-background-primary) ); border-color: var(--select-focus-border-color, var(--color-border-medium)); } [dir="rtl"] .select > select { padding-left: 30px; padding-right: var(--spacing-200); } [dir="rtl"] .select svg { left: 16px; right: auto; } [dir="rtl"] .select--underline svg.icon { left: 0; right: auto; }