mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
2d8635d29d
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While we are doing this to improve our development experience in the short term, efforts are also in place to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted back out in the future when components is ready to leverage it as well. PR Close #57132
78 lines
1.4 KiB
SCSS
78 lines
1.4 KiB
SCSS
: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);
|
|
}
|
|
}
|
|
}
|