56 lines
1.0 KiB
SCSS
56 lines
1.0 KiB
SCSS
.inputWrapper {
|
|
label {
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
span {
|
|
color: var(--color-text-tertiary);
|
|
font-size: var(--fs-2xs);
|
|
line-height: var(--fs-lg);
|
|
}
|
|
}
|
|
|
|
input.input {
|
|
font-size: var(--fs-lg);
|
|
background: none;
|
|
border-radius: var(--space-xs);
|
|
border: 0.5px solid var(--color-text-tertiary);
|
|
padding: var(--space-xs);
|
|
transition: background 200ms;
|
|
|
|
&:hover:not(:disabled) {
|
|
box-shadow: 0 1px var(--space-2xs) 0
|
|
rgb(from var(--color-text-primary) r g b / 10%);
|
|
background: var(--color-bg-highlight);
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px solid var(--color-border-strong);
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: var(--color-bg-disabled);
|
|
}
|
|
}
|
|
|
|
// Use double class to override original styles.
|
|
.toggle.toggle {
|
|
background: var(--color-text-tertiary);
|
|
|
|
&::before {
|
|
box-shadow: none;
|
|
background: var(--color-bg-primary);
|
|
}
|
|
}
|
|
|
|
.toggle.toggleSmall {
|
|
--padding: 2px;
|
|
--diameter: 14px;
|
|
|
|
width: 32px;
|
|
}
|
|
|
|
input:checked + .toggle.toggleSmall::before {
|
|
transform: translateX(var(--diameter));
|
|
}
|