marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ux: centralize toggle switch styles

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 12:51:48 +01:00
parent 8b0769fba2
commit 4a9e0e1791
5 changed files with 67 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -216,6 +216,63 @@
margin: 0.35rem 0 0; margin: 0.35rem 0 0;
} }
:where(.toggle-switch, .switch) {
--ui-toggle-width: 44px;
--ui-toggle-height: 24px;
--ui-toggle-thumb-size: 18px;
--ui-toggle-thumb-offset: 3px;
--ui-toggle-bg: var(--color-border);
--ui-toggle-active-bg: var(--color-primary);
--ui-toggle-thumb-bg: var(--color-surface);
--ui-toggle-disabled-opacity: 0.5;
--ui-toggle-transition: 0.2s;
position: relative;
display: inline-block;
width: var(--ui-toggle-width);
height: var(--ui-toggle-height);
}
:where(.toggle-switch input, .switch input) {
opacity: 0;
width: 0;
height: 0;
}
:where(.toggle-switch .toggle-slider, .switch .slider) {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--ui-toggle-bg);
border-radius: 999px;
transition: var(--ui-toggle-transition);
}
:where(.toggle-switch .toggle-slider, .switch .slider):before {
position: absolute;
content: "";
width: var(--ui-toggle-thumb-size);
height: var(--ui-toggle-thumb-size);
left: var(--ui-toggle-thumb-offset);
bottom: var(--ui-toggle-thumb-offset);
background: var(--ui-toggle-thumb-bg);
border-radius: 999px;
transition: var(--ui-toggle-transition);
}
:where(.toggle-switch input:checked + .toggle-slider, .switch input:checked + .slider) {
background: var(--ui-toggle-active-bg);
}
:where(.toggle-switch input:checked + .toggle-slider, .switch input:checked + .slider):before {
transform: translateX(calc(var(--ui-toggle-width) - var(--ui-toggle-thumb-size) - (var(--ui-toggle-thumb-offset) * 2)));
}
:where(.toggle-switch input:disabled + .toggle-slider, .switch input:disabled + .slider) {
opacity: var(--ui-toggle-disabled-opacity);
cursor: not-allowed;
}
:where(button) { :where(button) {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);

46
frontend/src/pages/admin/plugins.astro
View file

@ -128,49 +128,9 @@ import { API_BASE } from '../../lib/api';
} }
.toggle-switch { .toggle-switch {
position: relative; --ui-toggle-width: 48px;
width: 48px; --ui-toggle-height: 26px;
height: 26px; --ui-toggle-thumb-size: 20px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-border);
border-radius: 26px;
transition: 0.3s;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background: var(--color-surface);
border-radius: 50%;
transition: 0.3s;
}
input:checked + .toggle-slider {
background: var(--color-primary);
}
input:checked + .toggle-slider:before {
transform: translateX(22px);
}
input:disabled + .toggle-slider {
cursor: not-allowed;
opacity: 0.5;
} }
.loading { .loading {

40
frontend/src/pages/admin/voting.astro
View file

@ -360,46 +360,8 @@ import { API_BASE } from '../../lib/api';
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
/* Toggle Switch */
.toggle-switch { .toggle-switch {
position: relative; --ui-toggle-active-bg: var(--color-success);
width: 44px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-border);
border-radius: 24px;
transition: 0.2s;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: 0.2s;
}
input:checked + .toggle-slider {
background: var(--color-success);
}
input:checked + .toggle-slider:before {
transform: translateX(20px);
} }
/* Phase Flow */ /* Phase Flow */

50
frontend/src/pages/communities/[slug]/plugins.astro
View file

@ -479,53 +479,9 @@ const { slug } = Astro.params;
} }
.switch { .switch {
position: relative; --ui-toggle-bg: var(--color-neutral);
display: inline-block; --ui-toggle-active-bg: var(--color-primary);
width: 44px; --ui-toggle-thumb-bg: var(--color-on-primary);
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-neutral);
transition: 0.2s;
border-radius: 999px;
}
.slider:before {
position: absolute;
content: '';
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--color-on-primary);
transition: 0.2s;
border-radius: 999px;
}
input:checked + .slider {
background-color: var(--color-primary);
}
input:checked + .slider:before {
transform: translateX(20px);
}
input:disabled + .slider {
opacity: 0.5;
cursor: default;
} }
.loading { .loading {

41
frontend/src/pages/communities/[slug]/voting-config.astro
View file

@ -76,44 +76,9 @@ const { slug } = Astro.params;
} }
.toggle-switch { .toggle-switch {
position: relative; --ui-toggle-width: 48px;
width: 48px; --ui-toggle-height: 26px;
height: 26px; --ui-toggle-thumb-size: 20px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-border);
border-radius: 26px;
transition: 0.3s;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background: var(--color-surface);
border-radius: 50%;
transition: 0.3s;
}
input:checked + .toggle-slider {
background: var(--color-primary);
}
input:checked + .toggle-slider:before {
transform: translateX(22px);
} }
.default-badge { .default-badge {