mirror of
https://github.com/glitch-soc/mastodon.git
synced 2026-03-29 11:11:11 +02:00
67 lines
1.6 KiB
SCSS
67 lines
1.6 KiB
SCSS
.wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
/* Dropdown indicator icon */
|
|
&::after {
|
|
--icon-size: 11px;
|
|
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
inset-inline-end: 9px;
|
|
width: var(--icon-size);
|
|
background-color: var(--color-text-tertiary);
|
|
pointer-events: none;
|
|
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='black'/></svg>");
|
|
mask-position: right center;
|
|
mask-size: var(--icon-size);
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
&:has(.select:focus-visible)::after {
|
|
background-color: var(--color-text-secondary);
|
|
}
|
|
|
|
&:has(.select:disabled)::after {
|
|
background-color: var(--color-text-disabled);
|
|
}
|
|
}
|
|
|
|
.select {
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 100%;
|
|
height: 41px;
|
|
padding-inline-start: 10px;
|
|
padding-inline-end: 30px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: var(--color-text-primary);
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: 4px;
|
|
outline: 0;
|
|
|
|
@media screen and (width <= 600px) {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--outline-focus-default);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--color-text-disabled);
|
|
border-color: transparent;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-has-error='true'] & {
|
|
border-color: var(--color-border-error);
|
|
}
|
|
}
|