127 lines
3.1 KiB
CSS
127 lines
3.1 KiB
CSS
/*
|
||
* VidConf — кастомный селект (DESIGN_SYSTEM.md §4.16).
|
||
* Триггер повторяет геометрию инпута (§4.4), дроплист — паттерн `.menu`
|
||
* (design/mockups/lobby.html). Все правила на var()-токенах — тёмная тема
|
||
* переключается сама через каскад tokens.css, отдельных патчей не требуется
|
||
* (см. §4.16 «Обе темы»).
|
||
*/
|
||
|
||
.vc-select {
|
||
position: relative;
|
||
}
|
||
|
||
.vc-select-trigger {
|
||
width: 100%;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
font: var(--text-body-lg);
|
||
color: var(--color-ink-900);
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
font-family: var(--font-body);
|
||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||
}
|
||
.vc-select-trigger:hover:not(:disabled) {
|
||
border-color: var(--color-border-strong);
|
||
}
|
||
.vc-select-trigger:focus-visible {
|
||
outline: none;
|
||
border-color: var(--color-focus-ring);
|
||
box-shadow: 0 0 0 2px var(--color-focus-ring);
|
||
}
|
||
.vc-select-trigger[aria-expanded='true'] {
|
||
border-color: var(--color-focus-ring);
|
||
box-shadow: 0 0 0 2px var(--color-focus-ring);
|
||
}
|
||
.vc-select-trigger:disabled {
|
||
background: var(--color-bg-alt);
|
||
color: var(--color-ink-300);
|
||
cursor: not-allowed;
|
||
}
|
||
.vc-select-trigger.has-error {
|
||
border-width: 2px;
|
||
border-color: var(--color-danger);
|
||
}
|
||
|
||
.vc-select-value,
|
||
.vc-select-placeholder {
|
||
flex: 1;
|
||
min-width: 0;
|
||
text-align: left;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.vc-select-placeholder {
|
||
color: var(--color-ink-300);
|
||
}
|
||
.vc-select-error-icon {
|
||
color: var(--color-danger);
|
||
flex-shrink: 0;
|
||
}
|
||
.vc-select-chevron {
|
||
color: var(--color-ink-500);
|
||
flex-shrink: 0;
|
||
transition: transform var(--transition-fast);
|
||
}
|
||
.vc-select-chevron.is-open {
|
||
transform: rotate(180deg);
|
||
}
|
||
.vc-select-trigger:disabled .vc-select-chevron {
|
||
color: var(--color-ink-300);
|
||
}
|
||
|
||
.vc-select-panel {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 0;
|
||
width: 100%;
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
margin: 0;
|
||
padding: var(--space-2);
|
||
list-style: none;
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-lg);
|
||
z-index: 30;
|
||
}
|
||
|
||
.vc-select-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
border-radius: var(--radius-sm);
|
||
font: var(--text-body-lg);
|
||
font-weight: 400;
|
||
color: var(--color-ink-900);
|
||
cursor: pointer;
|
||
}
|
||
.vc-select-option.is-active {
|
||
background: var(--color-bg-alt);
|
||
color: var(--color-ink-700);
|
||
}
|
||
.vc-select-option.is-selected {
|
||
font-weight: 600;
|
||
}
|
||
.vc-select-option.is-selected svg {
|
||
color: var(--color-ink-700);
|
||
flex-shrink: 0;
|
||
}
|
||
.vc-select-option.is-disabled {
|
||
color: var(--color-ink-300);
|
||
cursor: not-allowed;
|
||
}
|
||
.vc-select-option.is-disabled.is-active {
|
||
background: transparent;
|
||
color: var(--color-ink-300);
|
||
}
|