/
merulaalba
/
RestoApp
Обзор
Документация
Войти
/
merulaalba
/
RestoApp
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
src/components/blocks/portion.css
90 строк
2 KB
merulaalba
Add modal
19 июл 2026, 16:07
19 июл 2026, 16:07
e01b80c
Код
Авторство
О чём код?
.portion { list-style: none; .portion__item { transition: all 0.2s ease-in-out; } .portion__button { width: 247px; display: flex; flex-direction: column; justify-content: center; padding: var(--smallest-spacing) 12px; color: var(--color-neutral-100); background-color: var(--color-neutral-700); border: none; border-radius: 12px; cursor: pointer; &:focus-within { outline: 2px solid var(--color-neutral-100); } &:hover, &:has(input:checked):hover { color: var(--color-neutral-800); background-color: var(--color-neutral-100); } &:hover .portion__price, &:has(input:checked):hover .portion__price { color: var(--color-neutral-800); } &:hover .portion__weight { color: var(--color-neutral-500); } &:hover .portion__weight::before { background-color: var(--color-neutral-500); } } .portion__button:has(input:checked) { background-color: var(--badge-active); & .portion__price { color: var(--color-neutral-100); } } .portion__wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 17px; margin-block: 0; } .portion__size { font-weight: 600; } .portion__weight { position: relative; color: var(--color-neutral-400); transition: all 0.2s ease-in-out; &::before { position: absolute; display: block; content: ""; top: 10px; left: -10px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-neutral-400); transition: all 0.2s ease-in-out; } } .portion__price { font-size: var(--badge-text); line-height: var(--badge-line-height); color: var(--color-neutral-400); text-align: center; } }