@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
131 lines (118 loc) • 2.89 kB
CSS
.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;
}