/
githubmirror
/
angular
Обзор
Документация
Войти
/
githubmirror
/
angular
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
adev/shared-docs/components/slide-toggle/slide-toggle.component.scss
78 строк
1 KB
Joey Perrott
refactor(docs-infra): migrate @angular/docs from dev-infra into adev directory (#57132)
30 июл 2024, 18:51
30 июл 2024, 18:51
2d8635d
Код
Авторство
О чём код?
:host, label { display: inline-flex; gap: 0.5em; align-items: center; } .docs-label { font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 160%; // 1.4rem letter-spacing: -0.00875rem; color: var(--quaternary-contrast); } .docs-toggle { position: relative; display: inline-block; width: 3rem; height: 1.5rem; border: 1px solid var(--senary-contrast); border-radius: 34px; input { opacity: 0; width: 0; height: 0; } } .docs-slider { position: absolute; cursor: pointer; border-radius: 34px; inset: 0; background-color: var(--septenary-contrast); transition: background-color 0.3s ease, border-color 0.3s ease; // background &::before { content: ''; position: absolute; inset: 0; border-radius: 34px; background: var(--pink-to-purple-horizontal-gradient); opacity: 0; transition: opacity 0.3s ease; } // toggle knob &::after { position: absolute; content: ''; height: 1.25rem; width: 1.25rem; left: 0.125rem; bottom: 0.125rem; background-color: var(--page-background); transition: transform 0.3s ease, background-color 0.3s ease; border-radius: 50%; } } input { &:checked + .docs-slider { // background &::before { opacity: 1; } // toggle knob &::after { transform: translateX(1.5rem); } } }