fix(VTabs): margins in RTL mode (#8123)

* fix(VTabs): margins in RTL mode * refactor: use ltr()
vuetifyjs · Aug 1, 2019 · e5e5f76 · e5e5f76
1 parent d53c43c
commit e5e5f76
Showing 1 changed file with 33 additions and 17 deletions.
diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass
@@ -47,9 +47,14 @@
   height: $tabs-bar-height
 
   // https://github.com/vuetifyjs/vuetify/issues/6932
-  &.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows)
-    > .v-slide-group__wrapper > .v-tabs-bar__content > .v-tab:first-of-type
-      margin-left: $tabs-item-mobile-no-arrows-margin
+  &.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows) > .v-slide-group__wrapper > .v-tabs-bar__content
+    & > .v-tab:first-child,
+    & > .v-tabs-slider-wrapper + .v-tab
+      +ltr()
+        margin-left: $tabs-item-mobile-no-arrows-margin
+
+      +rtl()
+        margin-right: $tabs-item-mobile-no-arrows-margin
 
   &.v-item-group > *
     cursor: initial
@@ -103,32 +108,35 @@
     transition: $primary-transition
 
 // Modifier
-.v-tabs--align-with-title > .v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows)
-  > .v-slide-group__wrapper > .v-tabs-bar__content > .v-tab:first-of-type
-    margin-left: $tabs-item-align-with-title-margin
+.v-tabs--align-with-title > .v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows) > .v-slide-group__wrapper > .v-tabs-bar__content
+  & > .v-tab:first-child,
+  & > .v-tabs-slider-wrapper + .v-tab
+    +ltr()
+      margin-left: $tabs-item-align-with-title-margin
+
+    +rtl()
+      margin-right: $tabs-item-align-with-title-margin
 
 .v-tabs--fixed-tabs,
 .v-tabs--centered
-  .v-tabs-bar__content > *:last-child
-    margin-right: auto
+  +ltr()
+    .v-tabs-bar__content > *:last-child
+      margin-right: auto
 
-  .v-tabs-bar__content > *:first-child:not(.v-tabs-slider-wrapper)
-    margin-left: auto
+    .v-tabs-bar__content > *:first-child:not(.v-tabs-slider-wrapper)
+      margin-left: auto
 
-  .v-tabs-slider-wrapper + *
-    margin-left: auto
+    .v-tabs-slider-wrapper + *
+      margin-left: auto
 
   +rtl()
     .v-tabs-bar__content > *:last-child
-      margin-right: 0
       margin-left: auto
 
     .v-tabs-bar__content > *:first-child:not(.v-tabs-slider-wrapper)
-      margin-left: 0
       margin-right: auto
 
     .v-tabs-slider-wrapper + *
-      margin-left: 0
       margin-right: auto
 
 .v-tabs--fixed-tabs
@@ -158,10 +166,18 @@
 .v-tabs--right
   .v-tab:first-child,
   .v-tabs-slider-wrapper + .v-tab
-    margin-left: auto
+    +ltr()
+      margin-left: auto
+
+    +rtl()
+      margin-right: auto
 
   .v-tab:last-child
-    margin-right: 0
+    +ltr()
+      margin-right: 0
+
+    +rtl()
+      margin-left: 0
 
 .v-tabs--vertical
   display: flex