45 lines
1.9 KiB
CSS
45 lines
1.9 KiB
CSS
|
.select {
|
||
|
|
appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
background-color: var(
|
||
|
|
--codex-select-background,
|
||
|
|
var(--codex-background-secondary)
|
||
|
|
);
|
||
|
|
outline: 2px solid transparent;
|
||
|
|
outline-offset: 2px;
|
||
|
|
color: var(--codex-color);
|
||
|
|
border-radius: var(--codex-border-radius);
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
padding-inline-end: 2.25rem;
|
||
|
|
transition: box-shadow 0.35s;
|
||
|
|
border: var(--codex-select-border, 1px solid var(--codex-border-color));
|
||
|
|
background-image: var(
|
||
|
|
--codex-select-icon-url,
|
||
|
|
url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 4.06066C8.15829 3.8654 7.84171 3.8654 7.64645 4.06066L5.35355 6.35355C5.15829 6.54882 4.84171 6.54882 4.64645 6.35355C4.45118 6.15829 4.45118 5.84171 4.64645 5.64645L6.93934 3.35356C7.52513 2.76777 8.47487 2.76777 9.06066 3.35355L11.3536 5.64645C11.5488 5.84171 11.5488 6.15829 11.3536 6.35355C11.1583 6.54882 10.8417 6.54882 10.6464 6.35355L8.35355 4.06066Z' fill='%236b7280'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 11.9393C8.15829 12.1346 7.84171 12.1346 7.64645 11.9393L5.35355 9.64645C5.15829 9.45119 4.84171 9.45119 4.64645 9.64645C4.45118 9.84171 4.45118 10.1583 4.64645 10.3536L6.93934 12.6464C7.52513 13.2322 8.47487 13.2322 9.06066 12.6464L11.3536 10.3536C11.5488 10.1583 11.5488 9.84171 11.3536 9.64645C11.1583 9.45119 10.8417 9.45119 10.6464 9.64645L8.35355 11.9393Z' fill='%236b7280'/%3E%3C/svg%3E%0A")
|
||
|
|
);
|
||
|
|
background-position: right 0.5rem center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 1.25em 1.25em;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select:hover,
|
||
|
|
.select:focus-visible,
|
||
|
|
.select:active {
|
||
|
|
box-shadow: 0 0 0 1px var(--codex-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-label {
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-weight: 500;
|
||
|
|
display: block;
|
||
|
|
color: var(--codex-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 801px) {
|
||
|
|
.select {
|
||
|
|
min-width: 20rem;
|
||
|
|
}
|
||
|
|
}
|