Files
cursor-byok/apps/desktop/src/shared/ui/Select.module.scss
T

126 lines
2.4 KiB
SCSS

@use "../../styles/typography" as type;
.trigger,
.combo input {
width: 100%;
height: 34px;
color: var(--vscode-input-foreground);
background: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border, transparent);
border-radius: 5px;
outline: none;
font-size: type.$font-size-xs;
&:focus {
border-color: var(--vscode-focusBorder);
}
}
.trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 10px;
}
.optionContent {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
> :last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.dropdownIcon {
transition: transform 160ms ease;
}
.dropdownIconOpen {
transform: rotate(180deg);
}
.comboRow {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
}
.combo {
min-width: 0;
flex: 1;
height: 34px;
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid var(--vscode-input-border, transparent);
border-radius: 6px;
background: var(--vscode-input-background);
&:focus-within {
border-color: var(--vscode-focusBorder);
}
}
.combo input {
min-width: 0;
flex: 1;
padding: 0 10px;
border: 0;
background: transparent;
}
.comboToggle {
width: 34px;
height: 34px;
flex: 0 0 34px;
align-self: center;
padding: 0;
color: var(--vscode-descriptionForeground);
background: transparent;
border: 0;
appearance: none;
font-size: type.$font-size-base;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
&:hover {
color: var(--vscode-foreground);
}
&:disabled {
cursor: not-allowed;
opacity: 0.6;
}
}
.menu {
position: fixed;
z-index: 14000;
overflow: hidden;
padding: 4px;
background: var(--vscode-dropdown-background);
border: 1px solid var(--vscode-dropdown-border);
border-radius: 6px;
box-shadow: var(--oa-dropdown-shadow);
button {
width: 100%;
min-height: 30px;
display: block;
padding: 5px 8px;
color: var(--vscode-dropdown-foreground);
text-align: left;
background: transparent;
border: 0;
border-radius: 4px;
font-size: type.$font-size-xs;
&:hover,
&[data-active],
&[aria-selected="true"] {
background: var(--vscode-list-activeSelectionBackground);
color: var(--vscode-list-activeSelectionForeground);
}
}
}