diff --git a/front/src/components/ui/Toggle.vue b/front/src/components/ui/Toggle.vue
index fac89cb85..4b599cc54 100644
--- a/front/src/components/ui/Toggle.vue
+++ b/front/src/components/ui/Toggle.vue
@@ -21,10 +21,7 @@ const diameter = big ? '28px' : '20px'
type="checkbox"
style="opacity: 0; /* Hide even before stylesheet is loaded */"
>
- {{ label }}
+ {{ label }}
@@ -71,28 +68,19 @@ const diameter = big ? '28px' : '20px'
aspect-ratio: 2;
background-color: var(--void-color);
left: 0;
- top: var(--padding);
+ top: calc(var(--padding) * 2 - var(--diameter) / 2);
}
&::after {
height: calc(var(--diameter) - var(--lineWidth) * 2);
aspect-ratio: 1;
background-color: var(--pin-color);
left: var(--lineWidth);
- top: calc(var(--padding) + var(--lineWidth));
+ top: calc(var(--padding) * 2 - var(--diameter) / 2 + var(--lineWidth));
transition: all .2s;
}
> span {
- padding-left: calc(var(--diameter) + 8px);
- position: relative;
- top: 2px;
- }
-
- > span.big {
- padding-left: calc(var(--diameter) + 16px);
- position: relative;
- top: 6px;
- font-size: 16px;
+ padding-left: calc(var(--diameter) * 2 - 12px);
}
}
diff --git a/front/ui-docs/components/ui/toggle.md b/front/ui-docs/components/ui/toggle.md
index 657f51257..e8e0148dd 100644
--- a/front/ui-docs/components/ui/toggle.md
+++ b/front/ui-docs/components/ui/toggle.md
@@ -57,9 +57,14 @@ Pass a `big` prop to create a larger toggle.
```
-
+