91 lines
2.0 KiB
SCSS
91 lines
2.0 KiB
SCSS
@use "../../styles/tokens/typography" as *;
|
|
|
|
.select {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
min-width: 200px;
|
|
|
|
&__trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--nds-spacing-xs);
|
|
height: 38px;
|
|
padding: 0 var(--nds-spacing-sm);
|
|
background-color: var(--nds-surface);
|
|
border: var(--nds-border-width-thin) solid var(--nds-border-strong);
|
|
border-radius: var(--nds-radius-md);
|
|
cursor: pointer;
|
|
@include text-base;
|
|
color: var(--nds-text);
|
|
transition:
|
|
border-color 130ms ease,
|
|
box-shadow 130ms ease;
|
|
&:hover {
|
|
border-color: var(--nds-neutral);
|
|
}
|
|
&:focus-visible {
|
|
outline: none;
|
|
border-color: var(--nds-primary);
|
|
box-shadow: 0 0 0 3px var(--nds-ring);
|
|
}
|
|
|
|
svg {
|
|
color: var(--nds-neutral);
|
|
transition: transform 160ms ease;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
&__placeholder {
|
|
color: var(--nds-neutral);
|
|
}
|
|
|
|
&[data-open="true"] &__trigger {
|
|
border-color: var(--nds-primary);
|
|
}
|
|
&[data-open="true"] &__trigger svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&__menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 40;
|
|
background-color: var(--nds-surface);
|
|
border: var(--nds-border-width-thin) solid var(--nds-border);
|
|
border-radius: var(--nds-radius-md);
|
|
box-shadow: var(--nds-shadow-md);
|
|
padding: var(--nds-spacing-3xs);
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
display: none;
|
|
}
|
|
&__arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
&--disabled {
|
|
cursor: not-allowed;
|
|
background-color: var(--nds-surface);
|
|
color: var(--nds-neutral);
|
|
border-color: var(--nds-border-strong);
|
|
opacity: 0.55;
|
|
& .select__trigger {
|
|
cursor: not-allowed;
|
|
&:hover {
|
|
border-color: var(--nds-border-strong);
|
|
}
|
|
}
|
|
}
|
|
&[data-open="true"] &__menu {
|
|
display: block;
|
|
}
|
|
}
|