From e5e5f76910b33df1cf64b9d57f658ff54e7664d4 Mon Sep 17 00:00:00 2001
From: Jacek Karczmarczyk <jk@drukcd.pl>
Date: Thu, 1 Aug 2019 17:22:12 +0200
Subject: [PATCH] fix(VTabs): margins in RTL mode (#8123)

* fix(VTabs): margins in RTL mode

* refactor: use ltr()
---
 .../vuetify/src/components/VTabs/VTabs.sass   | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass
index 14408c78147..c1f2991d31d 100644
--- 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