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. ``` - +