From 495ce70fb150f819fb4def96ba1c4827ceed570f Mon Sep 17 00:00:00 2001 From: Achsan Date: Wed, 12 Jun 2024 06:22:49 -0400 Subject: [PATCH 1/6] style[ui-switch]: Refine translationX CSS logic --- packages/ui/src/components/va-switch/VaSwitch.vue | 7 +------ packages/ui/src/components/va-switch/_variables.scss | 3 +-- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue index 5dcff9d5d3..1069073df9 100644 --- a/packages/ui/src/components/va-switch/VaSwitch.vue +++ b/packages/ui/src/components/va-switch/VaSwitch.vue @@ -350,16 +350,12 @@ defineExpose({ &--checked { .va-switch { &__checker { - transform: translateX(calc(-100% - 0.3rem)); + transform: translateX(calc(100% + 0.7rem)); } &__checker-circle { background-color: var(--va-switch-checker-active-background-color); } - - &__checker-wrapper { - transform: translateX(100%); - } } } @@ -461,7 +457,6 @@ defineExpose({ &__checker-wrapper { position: absolute; margin: auto; - transform: var(--va-switch-checker-wrapper-transform); top: var(--va-switch-checker-wrapper-top); left: var(--va-switch-checker-wrapper-left); bottom: var(--va-switch-checker-wrapper-bottom); diff --git a/packages/ui/src/components/va-switch/_variables.scss b/packages/ui/src/components/va-switch/_variables.scss index bbd1f80778..626b7c0f10 100644 --- a/packages/ui/src/components/va-switch/_variables.scss +++ b/packages/ui/src/components/va-switch/_variables.scss @@ -14,7 +14,6 @@ --va-switch-checker-transition: all 0.2s ease; /* Checker Wrapper */ - --va-switch-checker-wrapper-transform: translateX(0); --va-switch-checker-wrapper-top: 0; --va-switch-checker-wrapper-left: 0; --va-switch-checker-wrapper-bottom: 0; @@ -52,4 +51,4 @@ --va-switch-lg-inner-height: 2.5rem; --va-switch-lg-inner-width: auto; --va-switch-lg-inner-min-width: 5rem; -} +} \ No newline at end of file From 94ff3bfcfb8504d60092196b07e84437c82b3a1c Mon Sep 17 00:00:00 2001 From: Achsan Date: Wed, 12 Jun 2024 06:34:01 -0400 Subject: [PATCH 2/6] style[ui-switch]: Refactor translateX CSS for multi-size implementation --- .../ui/src/components/va-switch/VaSwitch.vue | 27 +++++++++++++++---- .../src/components/va-switch/_variables.scss | 2 +- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue index 1069073df9..8c82e337c5 100644 --- a/packages/ui/src/components/va-switch/VaSwitch.vue +++ b/packages/ui/src/components/va-switch/VaSwitch.vue @@ -349,10 +349,6 @@ defineExpose({ &--checked { .va-switch { - &__checker { - transform: translateX(calc(100% + 0.7rem)); - } - &__checker-circle { background-color: var(--va-switch-checker-active-background-color); } @@ -431,7 +427,7 @@ defineExpose({ } } - &__checker { + #{&}__checker { position: absolute; top: 0; bottom: 0; @@ -442,6 +438,27 @@ defineExpose({ display: flex; justify-content: center; align-items: center; + + @at-root { + .va-switch--checked#{&} { + transform: translateX(2.2rem); + } + + .va-switch--small#{&} { + @at-root { + .va-switch--checked#{&} { + transform: translateX(1.6rem); + } + } + } + .va-switch--large#{&} { + @at-root { + .va-switch--checked#{&} { + transform: translateX(2.9rem); + } + } + } + } } &__checker-circle { diff --git a/packages/ui/src/components/va-switch/_variables.scss b/packages/ui/src/components/va-switch/_variables.scss index 626b7c0f10..a796587a10 100644 --- a/packages/ui/src/components/va-switch/_variables.scss +++ b/packages/ui/src/components/va-switch/_variables.scss @@ -51,4 +51,4 @@ --va-switch-lg-inner-height: 2.5rem; --va-switch-lg-inner-width: auto; --va-switch-lg-inner-min-width: 5rem; -} \ No newline at end of file +} From cf0ae0f8b23c517222316ec707e199f3d60f7738 Mon Sep 17 00:00:00 2001 From: Achsan Date: Wed, 26 Jun 2024 21:01:22 -0400 Subject: [PATCH 3/6] style(ui-switch): Update translateX CSS using calc instead of hardcoded --- .../ui/src/components/va-switch/VaSwitch.vue | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue index 8c82e337c5..770ac891b0 100644 --- a/packages/ui/src/components/va-switch/VaSwitch.vue +++ b/packages/ui/src/components/va-switch/VaSwitch.vue @@ -436,25 +436,48 @@ defineExpose({ box-shadow: var(--va-switch-checker-box-shadow); transition: var(--va-switch-checker-transition); display: flex; - justify-content: center; align-items: center; + width: 100%; @at-root { .va-switch--checked#{&} { - transform: translateX(2.2rem); + transform: + translateX( + calc( + var(--va-switch-checker-wrapper-width) + - var(--va-switch-checker-width) + - 0.3rem + ) + ); } .va-switch--small#{&} { @at-root { .va-switch--checked#{&} { - transform: translateX(1.6rem); + transform: + translateX( + calc( + var(--va-switch-checker-wrapper-width) + - var(--va-switch-checker-width) + - 0.3rem + + 0.4rem + ) + ); } } } .va-switch--large#{&} { @at-root { .va-switch--checked#{&} { - transform: translateX(2.9rem); + transform: + translateX( + calc( + var(--va-switch-checker-wrapper-width) + - var(--va-switch-checker-width) + - 0.3rem + - 0.3rem + ) + ); } } } From 3324b2cdee2f350ec3788f925330e66b658ee137 Mon Sep 17 00:00:00 2001 From: Achsan Date: Wed, 26 Jun 2024 21:05:36 -0400 Subject: [PATCH 4/6] chore(ui-switch): Add sample demo for implementing "sizes with inner label Slot" --- .../components/va-switch/VaSwitch.demo.vue | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/ui/src/components/va-switch/VaSwitch.demo.vue b/packages/ui/src/components/va-switch/VaSwitch.demo.vue index a77e6bddbf..20072e4bbc 100644 --- a/packages/ui/src/components/va-switch/VaSwitch.demo.vue +++ b/packages/ui/src/components/va-switch/VaSwitch.demo.vue @@ -73,6 +73,31 @@ label="large" /> + + + + + + + + + + +
Date: Wed, 26 Jun 2024 21:12:13 -0400 Subject: [PATCH 5/6] style(ui-switch): Update translateX CSS for indeterminate state --- .../ui/src/components/va-switch/VaSwitch.vue | 55 ++++++++++++++----- 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue index 770ac891b0..7169d17734 100644 --- a/packages/ui/src/components/va-switch/VaSwitch.vue +++ b/packages/ui/src/components/va-switch/VaSwitch.vue @@ -334,19 +334,6 @@ defineExpose({ } } - &--indeterminate { - .va-switch { - &__checker { - margin: auto 0; - transform: translateX(-50%); - } - - &__checker-wrapper { - transform: translateX(50%); - } - } - } - &--checked { .va-switch { &__checker-circle { @@ -440,6 +427,20 @@ defineExpose({ width: 100%; @at-root { + .va-switch--indeterminate#{&} { + margin: auto 0; + transform: + translateX( + calc( + calc( + var(--va-switch-checker-wrapper-width) + - var(--va-switch-checker-width) + ) + / 2 + ) + ); + } + .va-switch--checked#{&} { transform: translateX( @@ -453,6 +454,20 @@ defineExpose({ .va-switch--small#{&} { @at-root { + .va-switch--indeterminate#{&} { + transform: + translateX( + calc( + calc( + var(--va-switch-checker-wrapper-width) + - var(--va-switch-checker-width) + + 0.4rem + ) + / 2 + ) + ); + } + .va-switch--checked#{&} { transform: translateX( @@ -468,6 +483,20 @@ defineExpose({ } .va-switch--large#{&} { @at-root { + .va-switch--indeterminate#{&} { + transform: + translateX( + calc( + calc( + var(--va-switch-checker-wrapper-width) + - var(--va-switch-checker-width) + - 0.3rem + ) + / 2 + ) + ); + } + .va-switch--checked#{&} { transform: translateX( From e0f2d821d6734e73ebbef366c7ec76a366cb6261 Mon Sep 17 00:00:00 2001 From: Achsan Date: Wed, 26 Jun 2024 21:14:44 -0400 Subject: [PATCH 6/6] chore(ui-switch): Add sample demo for implementing "sizes with indeterminate" --- .../src/components/va-switch/VaSwitch.demo.vue | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/ui/src/components/va-switch/VaSwitch.demo.vue b/packages/ui/src/components/va-switch/VaSwitch.demo.vue index 20072e4bbc..27ddf290ba 100644 --- a/packages/ui/src/components/va-switch/VaSwitch.demo.vue +++ b/packages/ui/src/components/va-switch/VaSwitch.demo.vue @@ -230,6 +230,22 @@ indeterminate /> + + + + +
{{ valueIndeterminateCustom }}