/
skitchen
/
Portal
Обзор
Документация
Войти
/
skitchen
/
Portal
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/shared/ui/ListBox/ListBox.module.scss
103 строки
2 KB
nikita
Refactor UI components, add Dropdown and list direction options
29 окт 2023, 18:10
29 окт 2023, 18:10
4bac5c0
Код
Авторство
О чём код?
.root { position: relative; } .trigger { border: 1px solid var(--border-color); background-color: var(--main-bg-color); border-radius: var(--border-radius); color: var(--text-primary); outline: none; &:hover { border: 1px solid var(--border-hover-color); } &:disabled { background-color: var(--bg-color-disabled); color: var(--color-disabled); } } .small { padding: 3px 8px; } .medium { padding: 7px 12px; } .large { padding: 11px 16px; } .options { width: 100%; border-bottom: 1px solid var(--border-color); background-color: var(--main-bg-color); position: absolute; z-index: 10000; border-radius: var(--border-radius); } .item { padding: 8px 4px; border: 1px solid var(--border-color); background-color: var(--main-bg-color); cursor: pointer; &:first-child { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } &:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } } .active { background: var(--card-bg-color); } .selected { cursor: auto; } .readonly { opacity: 0.7; border-color: transparent; &:hover { border-color: transparent; } } .optionsTop { bottom: 100%; } .arrow { margin-left: 4px; } .optionsBottomLeft { top: 100%; right: 0; } .optionsBottomRight { top: 100%; left: 0; } .optionsTopRight { bottom: 100%; left: 0; } .optionsTopLeft { right: 0; bottom: 100%; }