UNPKG

@ebay/skin

Version:

Skin - CSS modules that represent the brand eBay

131 lines (118 loc) 2.89 kB
.select { color: var(--select-foreground-color, var(--color-foreground-primary)); font-size: var(--font-size-default); position: relative; } span.select { display: inline-block; } .select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var( --select-background-color, var(--color-background-secondary) ); border-color: var(--select-border-color, var(--color-stroke-default)); 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-stroke-default)); 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-stroke-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-stroke-default)); } [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; }