Source code
Revision control
Copy as Markdown
Other Tools
.toggle-outer {
display: flex;
justify-content: space-between;
padding: var(--content-spacing-small);
border-radius: var(--border-radius-medium);
border: 2px solid var(--color-utils-gray-light);
color: var(--theme-text-dark);
width: 100%;
height: 40px;
align-items: center;
}
.toggle-description {
margin-right: 16px;
}
.toggle-container {
display: flex;
justify-content: center;
flex-direction: column;
width: 42px;
height: 22px;
position: relative;
}
.toggle-container .label {
width: 42px;
height: 16px;
display: flex;
background-color: var(--theme-toggle-background);
border-radius: 22px;
cursor: pointer;
border: var(--theme-medium-border);
}
.toggle-container .switch {
position: absolute;
inset-inline-start: 0;
top: 3px;
background-color: var(--theme-toggle-foreground);
border-radius: 22px;
transition: var(--transition-default);
width: 45%;
height: 16px;
pointer-events: none;
border: var(--theme-medium-border);
}
.toggle-container .switch::before {
position: absolute;
content: "";
height: 22px;
width: 22px;
top: calc(50% - 11px);
inset-inline-start: calc(var(--theme-border-width-medium) * -1);
background-color: var(--theme-toggle-switch);
border-radius: var(--border-radius-50);
transition: var(--transition-default);
}
.toggle-container .label input[type="checkbox"] {
width: 44px;
height: 16px;
z-index: -1;
position: absolute;
inset-inline-start: -6px;
top: 0;
}
.toggle-container .label input[type="checkbox"]:checked + .switch::before {
inset-inline-start: calc(100% - 22px + var(--theme-border-width-medium));
}
.toggle-container .label input[type="checkbox"]:checked + .switch {
width: 100%;
}