fix(VSwitch): label when using direction vertical (#19504)

fixes #18952 Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Mar 29, 2024 · 6748fd7 · 6748fd7
1 parent 07cfde8
commit 6748fd7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -120,3 +120,10 @@
   &.v-switch--inset
     .v-selection-control__wrapper
       width: auto
+
+  &.v-input--vertical
+    .v-label
+      min-width: max-content
+
+    .v-selection-control__wrapper
+      transform: $switch-thumb-vertical-transform
diff --git a/packages/vuetify/src/components/VSwitch/_variables.scss b/packages/vuetify/src/components/VSwitch/_variables.scss
@@ -27,6 +27,7 @@ $switch-thumb-width: 20px !default;
 $switch-thumb-offset: 2px !default;
 $switch-thumb-radius: 50% !default;
 $switch-thumb-transition: .15s .05s transform settings.$decelerated-easing, .2s color settings.$standard-easing, .2s background-color settings.$standard-easing !default;
+$switch-thumb-vertical-transform: rotate(-90deg) !default;
 
 $switch-track-background: rgb(var(--v-theme-surface-variant)) !default;
 $switch-track-radius: 9999px !default;