98 lines
2.0 KiB
CSS
98 lines
2.0 KiB
CSS
/* Toggle CSS variables (can be set on the element or a parent):
|
|
--toggle-default-checked: true | false
|
|
--toggle-default-disabled: true | false
|
|
--toggle-on-bg: color
|
|
--toggle-off-bg: color
|
|
--toggle-knob: color
|
|
--primary-color: fallback color for --toggle-on-bg
|
|
Size overrides: --toggle-width, --toggle-height
|
|
*/
|
|
|
|
.toggle {
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.track {
|
|
--toggle-width: 44px;
|
|
--toggle-height: 24px;
|
|
width: var(--toggle-width);
|
|
height: var(--toggle-height);
|
|
background: var(--toggle-off-bg, var(--background-opaque));
|
|
border-radius: 999px;
|
|
position: relative;
|
|
transition: background 0.18s ease;
|
|
}
|
|
|
|
.knob {
|
|
width: calc(var(--toggle-height) - 6px);
|
|
height: calc(var(--toggle-height) - 6px);
|
|
background: var(--toggle-knob, #fff);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
transition: transform 0.18s ease, background 0.18s ease;
|
|
}
|
|
|
|
.toggle.on .track {
|
|
background: var(--toggle-on-bg, var(--primary-color, #0b74ff));
|
|
}
|
|
|
|
.toggle.on .knob {
|
|
transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
|
|
}
|
|
|
|
.toggle.sm .track {
|
|
--toggle-width: 34px;
|
|
--toggle-height: 18px
|
|
}
|
|
|
|
.toggle.lg .track {
|
|
--toggle-width: 56px;
|
|
--toggle-height: 32px
|
|
}
|
|
|
|
.toggle:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6
|
|
}
|
|
|
|
.toggle-label-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.toggle-label {
|
|
display: block;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
font-size: 0.95rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.toggle-description {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
color: var(--muted-color, rgba(0, 0, 0, 0.6));
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.cookie-toggle-item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
padding: 8px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.cookie-toggle-item .toggle {
|
|
flex: 1;
|
|
width: 100%;
|
|
} |