Files
modeling-app/src/components/Toggle/Toggle.module.css
Frank Noirot 23181d8144 Franknoirot/settings search (#2270)
* Search and highlight, no scroll yet

* Tweak toggle look

* Style search, fix state changes

* Separate out settings components

* Include description in results, minor style tweaks

* Fix tsc import

* Remove unused imports in Settings

* fmt
2024-04-30 14:37:32 -04:00

58 lines
1.3 KiB
CSS

.toggle {
@apply flex items-center gap-2 w-fit;
@apply text-chalkboard-110;
--toggle-size: 0.75rem;
--padding: 0.25rem;
--border: 1px;
}
:global(.dark) .toggle {
@apply text-chalkboard-10;
}
.toggle:focus-within > span {
@apply outline-none ring-2;
}
.toggle input {
@apply sr-only;
}
.toggle > span {
@apply relative rounded border border-chalkboard-70 hover:border-chalkboard-80 cursor-pointer;
border-width: var(--border);
width: calc(
2 * (var(--toggle-size) + var(--padding) * 2 - var(--border) * 2)
);
height: calc(var(--toggle-size) + var(--padding) * 2 - var(--border) * 2);
}
:global(.dark) .toggle > span {
@apply border-chalkboard-40 hover:border-chalkboard-30;
}
.toggle > span::after {
width: var(--toggle-size);
height: var(--toggle-size);
border-radius: calc(var(--toggle-size) / 8);
content: '';
@apply absolute bg-chalkboard-70;
top: 50%;
left: 50%;
translate: calc(-100% - var(--padding) + var(--border)) -50%;
transition: translate 0.08s ease-out;
}
:global(.dark) .toggle > span::after {
@apply bg-chalkboard-50;
}
.toggle input:checked + span::after {
translate: calc(50% - var(--padding) + var(--border)) -50%;
@apply bg-chalkboard-110;
}
:global(.dark) .toggle input:checked + span::after {
@apply bg-chalkboard-10;
}