Tabs: fix tabs style (#11536)

packages/tabs/src/tab-nav.vue

@@ -249,7 +249,7 @@
           {scrollBtn}
           <div class={['el-tabs__nav-scroll']} ref="navScroll">
             <div
-              class={['el-tabs__nav', stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']}
+              class={['el-tabs__nav', `is-${ this.rootTabs.tabPosition }`, stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']}
               ref="nav"
               style={navStyle}
               role="tablist"
@@ -278,4 +278,3 @@
     }
   };
 </script>
-

packages/theme-chalk/src/tabs.scss

@@ -307,6 +307,27 @@
     .el-tabs__nav-wrap.is-right {
       margin-bottom: 0;
 
+      > .el-tabs__nav-prev,
+      > .el-tabs__nav-next {
+        height: 30px;
+        line-height: 30px;
+        width: 100%;
+        text-align: center;
+        cursor: pointer;
+  
+        i {
+          transform: rotateZ(90deg);
+        }
+      }
+      > .el-tabs__nav-prev {
+        left: auto;
+        top: 0;
+      }
+      > .el-tabs__nav-next {
+        right: auto;
+        bottom: 0;
+      }
+
       &.is-scrollable {
         padding: 30px 0;
       }
@@ -319,34 +340,14 @@
       }
     }
 
-    .el-tabs__nav {
+    .el-tabs__nav.is-left,
+    .el-tabs__nav.is-right {
       float: none;
     }
     .el-tabs__item.is-left,
     .el-tabs__item.is-right {
       display: block;
     }
-
-    .el-tabs__nav-prev,
-    .el-tabs__nav-next {
-      height: 30px;
-      line-height: 30px;
-      width: 100%;
-      text-align: center;
-      cursor: pointer;
-
-      i {
-        transform: rotateZ(90deg);
-      }
-    }
-    .el-tabs__nav-prev {
-      left: auto;
-      top: 0;
-    }
-    .el-tabs__nav-next {
-      right: auto;
-      bottom: 0;
-    }
   }
   @include m(left) {
     .el-tabs__header.is-left {