/
DevDenzo
/
DigitalStore
Обзор
Документация
Войти
/
DevDenzo
/
DigitalStore
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/Header/DrawerList.css
94 строки
2 KB
Denis Sklyarskij
Адаптив для пустой корзины и индикатор корзины мобильного меню
29 ноя 2025, 20:14
29 ноя 2025, 20:14
a276e4e
Код
Авторство
О чём код?
.drawer { /* drawer */ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(224, 224, 224, 0.5); } .drawer__close-button { /* drawer__close-button */ position: absolute; right: 50%; width: 22px; height: 22px; padding: 0; display: flex; justify-content: center; align-items: center; background-color: transparent; margin-top: 18px; margin-right: 12px; color: #cc4c4c; border: 1px solid #cc4c4c; border-radius: 4px; } .drawer__content { width: 50%; height: 100%; background-color: #ffffff; border-radius: 4px; box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2); } .drawer__list { margin: 0; padding: 12px 0; } .drawer__list-item { list-style: none; } .drawer__list-item:not(:last-child) { margin-bottom: 12px; } .drawer__link { position: relative; display: flex; align-items: center; gap: 12px; color: #cc4c4c; padding: 6px 12px; text-decoration: none; font-size: 16px; border-radius: 4px; transition: background-color 0.3s ease-in-out; } .drawer__link:focus { background-color: #cc4c4c; color: #ffffff; } .drawer__link:focus .drawer__badge { background-color: #ffffff; color: #900000; } .drawer__link:focus-visible { outline: none; } .drawer__icon { display: inline-flex; justify-content: center; align-items: center; } .drawer__badge { position: absolute; top: 0; left: 0; display: inline-block; width: 18px; height: 18px; font-size: 12px; background-color: #cc4c4c; color: #ffffff; border-radius: 50%; text-align: center; pointer-events: none; }