Files
sendou.ink/app/components/elements/Select.module.css
2026-08-30 14:01:31 +03:00

82 lines
1.5 KiB
CSS

.selectValue {
font-size: var(--font-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
color: var(--color-text);
&[data-placeholder] {
color: var(--color-text-high);
}
/* two-line items render only their label line inside the trigger */
& [slot="description"] {
display: none;
}
}
.item {
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-1-5);
border-radius: var(--radius-field);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&[data-disabled] {
color: var(--color-text-high);
}
}
.noResults {
font-size: var(--font-md);
font-weight: var(--weight-bold);
text-align: center;
padding-block: var(--s-8);
color: var(--color-text-high);
}
.label {
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin: 0;
display: block;
text-box: trim-start cap alphabetic;
}
.clearButton {
position: absolute;
bottom: -21px;
right: 9px;
}
.categoryHeading {
display: flex;
align-items: center;
gap: var(--s-2);
font-weight: var(--weight-extra);
color: var(--color-text-high);
text-transform: uppercase;
font-size: var(--font-2xs);
padding-block-start: var(--s-3);
padding-block-end: var(--s-1);
padding-inline: var(--s-1-5);
white-space: nowrap;
& img {
border-radius: 100%;
background-color: var(--color-bg-higher);
padding: var(--s-1);
min-width: 28px;
}
}
.categoryDivider {
background-color: var(--color-border);
width: 100%;
height: 2px;
margin-block: var(--s-2);
}