/
guselnikov
/
inst
Обзор
Документация
Войти
/
guselnikov
/
inst
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
admin/src/components/ui/Checkbox.module.css
100 строк
2 KB
Viktor Guselnikov
first_commit
07 июл 2026, 11:54
07 июл 2026, 11:54
098126a
Код
Авторство
О чём код?
.root { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; user-select: none; } .disabled { opacity: 0.45; cursor: not-allowed; } .input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .box { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; border-radius: 5px; background: var(--bg-muted); box-shadow: var(--shadow-inset); border: 1px solid var(--border); color: var(--accent-text); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .check { width: 12px; height: 10px; opacity: 0; transform: scale(0.85); transition: opacity 150ms var(--ease), transform 150ms var(--ease); } .input:focus-visible + .box { box-shadow: var(--shadow-inset), 0 0 0 2px var(--border-focus); } .input:checked + .box { background: var(--accent); border-color: var(--accent); } .input:checked + .box .check { opacity: 1; transform: scale(1); } .root:hover:not(.disabled) .box { background: var(--bg-elevated); } .root:hover:not(.disabled) .input:checked + .box { background: var(--accent-hover); border-color: var(--accent-hover); } .content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .label { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.35; } .hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; }