174 lines
3.0 KiB
CSS
174 lines
3.0 KiB
CSS
.select {
|
|
position: relative;
|
|
background-color: var(--Surface-UI-Fill-Default);
|
|
border: 1px solid var(--Border-Interactive-Default);
|
|
border-radius: var(--Corner-radius-md);
|
|
height: 56px;
|
|
box-sizing: border-box;
|
|
|
|
&[data-required] .label::after {
|
|
content: " *";
|
|
}
|
|
&[data-open] {
|
|
.chevron {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.selectedText {
|
|
min-height: 24px;
|
|
}
|
|
}
|
|
&[data-focused] {
|
|
outline-offset: -2px;
|
|
outline: 2px solid var(--Border-Interactive-Focus);
|
|
|
|
.button,
|
|
.input {
|
|
outline: none;
|
|
}
|
|
.input {
|
|
min-height: 24px;
|
|
}
|
|
.label {
|
|
color: var(--Text-Interactive-Focus);
|
|
}
|
|
}
|
|
&[data-disabled] {
|
|
border: none;
|
|
background-color: var(--Surface-Primary-Disabled);
|
|
color: var(--Text-Interactive-Disabled);
|
|
.button,
|
|
.input,
|
|
.label,
|
|
.selectValue {
|
|
color: var(--Text-Interactive-Disabled);
|
|
}
|
|
}
|
|
&[data-invalid] {
|
|
border-color: var(--Border-Interactive-Error);
|
|
}
|
|
&[data-invalid][data-focused] {
|
|
outline: 2px solid var(--Border-Interactive-Error);
|
|
}
|
|
}
|
|
|
|
.chevron {
|
|
display: inline-flex;
|
|
transform: rotate(90deg);
|
|
transition: transform 150ms ease;
|
|
}
|
|
|
|
.inner {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: var(--Corner-radius-md);
|
|
|
|
&.button {
|
|
padding: 0 var(--Space-x15);
|
|
gap: var(--Space-x1);
|
|
}
|
|
|
|
.button {
|
|
padding: 0 var(--Space-x15) 0 var(--Space-x1);
|
|
height: 100%;
|
|
}
|
|
|
|
> label {
|
|
flex: 1;
|
|
height: 100%;
|
|
padding: 0 0 0 var(--Space-x15);
|
|
}
|
|
}
|
|
|
|
.button,
|
|
.input {
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
.input {
|
|
height: 1px;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
&[value]:not([value=""]) {
|
|
min-height: 24px;
|
|
}
|
|
}
|
|
|
|
.input,
|
|
.selectedText {
|
|
min-height: 0;
|
|
transition: min-height 150ms ease;
|
|
}
|
|
|
|
.selectedText:not(:empty) {
|
|
min-height: 24px;
|
|
}
|
|
|
|
.displayText {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&:has(.input) {
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
.selectValue {
|
|
align-items: flex-start;
|
|
color: var(--Text-Default);
|
|
}
|
|
|
|
.label {
|
|
color: var(--Text-Interactive-Placeholder);
|
|
white-space: nowrap;
|
|
transition: font-size 150ms ease;
|
|
}
|
|
|
|
.popover {
|
|
background-color: var(--Surface-Primary-Default);
|
|
border-radius: var(--Corner-radius-md);
|
|
box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x1);
|
|
overflow: auto;
|
|
padding: var(--Space-x2);
|
|
outline: none;
|
|
min-width: 280px;
|
|
scrollbar-color: var(--Icon-Interactive-Disabled);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.listBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x1);
|
|
outline: none;
|
|
}
|
|
|
|
.listBoxItem {
|
|
padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
|
|
color: var(--Text-Default);
|
|
border-radius: var(--Corner-radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--Space-x1);
|
|
|
|
&[data-focused] {
|
|
outline: none;
|
|
}
|
|
&[data-focused],
|
|
&[data-hovered] {
|
|
background-color: var(--Surface-Primary-Hover);
|
|
}
|
|
}
|