fix(Tab): capsure tab shakes

alibaba-fusion · Apr 16, 2019 · a19901f · a19901f
1 parent 2755477
commit a19901f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/src/tab/main.scss b/src/tab/main.scss
@@ -343,6 +343,7 @@
 
     &-capsule > #{$tab-prefix}-bar {
         #{$tab-prefix}-tab {
+            transition: background-color .4s $ease-out-quint, border-color .4s $ease-out-quint;
             border-top: $tab-capsule-tab-border;
             border-bottom: $tab-capsule-tab-border;
             border-left: $tab-capsule-tab-border;

diff --git a/src/tab/rtl.scss b/src/tab/rtl.scss
@@ -43,6 +43,31 @@
         }
     }
 
+    &#{$tab-prefix}-capsule > #{$tab-prefix}-bar {
+        #{$tab-prefix}-tab {
+            border-top: $tab-capsule-tab-border;
+            border-bottom: $tab-capsule-tab-border;
+            border-right: $tab-capsule-tab-border;
+            border-left: 0;
+            &:first-child {
+                border-left: 0;
+                border-radius: 0 $tab-capsule-corner-radius $tab-capsule-corner-radius 0;
+            }
+
+            &:last-child {
+                border-radius: $tab-capsule-corner-radius 0 0 $tab-capsule-corner-radius;
+                border-left: $tab-capsule-tab-border;
+            }
+
+            &.active {
+                margin-left: -$tab-capsule-tab-border-line-width;
+                margin-right: auto;
+                border-left: $tab-capsule-tab-border;
+                border-color: $tab-capsule-tab-border-line-color-active;
+            }
+        }
+    }
+
     #{$tab-prefix}-btn-next {
         left: $tab-nav-arrow-right-positon-right;
         right: auto;