/
GEOSHEV
/
StudLab
Обзор
Документация
Войти
/
GEOSHEV
/
StudLab
Код
Запросы
1
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
develop
src/components/buttons/LockToggle.css
77 строк
1 KB
George
Обновил: Линтер по всем файлам
21 мар 2025, 14:25
21 мар 2025, 14:25
2b503d4
Код
Авторство
О чём код?
.switch-lock-container { display: flex; align-items: center; justify-content: space-between; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; width: 90%; height: 45px; background: #272a38; border-radius: 2px; } .icon-box { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: #303549; border-radius: 2px; } .icon { width: 24px; height: 24px; } .lock-status { color: white; font-size: 14px; } .switch { position: relative; display: inline-block; width: 34px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ''; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #2196f3; } input:checked + .slider:before { transform: translateX(14px); }