UNK-613 Accent rounded tabs

src/components/Tab/STabs.vue

@@ -38,7 +38,7 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
    *
    * `"rounded"` works only when position is `"top"` or `"bottom"`
    */
-  @Prop({ type: String, default: '' }) readonly type!: string
+  @Prop({ type: String, default: '' }) readonly type!: TabsType
   /**
    * Will tabs be closable.
    *
@@ -88,10 +88,9 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
   }
 
   get computedType (): string {
-    if (!(Object.values(TabsType) as Array<string>).includes(this.type)) {
-      return ''
-    }
-    return this.type !== TabsType.ROUNDED ? this.type : ''
+    if (!(Object.values(TabsType) as Array<string>).includes(this.type)) return ''
+    if ([TabsType.ROUNDED, TabsType.ACCENT_ROUNDED].includes(this.type)) return ''
+    return this.type
   }
 
   get computedClasses (): Array<string> {
@@ -100,6 +99,10 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
+    if (this.type === TabsType.ACCENT_ROUNDED &&
+      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+      cssClasses.push('s-accent-rounded')
+    }
     if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }

src/components/Tab/consts.ts

@@ -1,5 +1,6 @@
 export enum TabsType {
   ROUNDED = 'rounded',
+  ACCENT_ROUNDED = 'accent-rounded',
   CARD = 'card',
   BORDER_CARD = 'border-card'
 }

src/styles/tabs.scss

@@ -26,6 +26,14 @@
           }
         }
       }
+      &.s-accent-rounded {
+        .el-tabs__nav-wrap {
+          border-radius: $border-radius;
+          .el-tabs__item {
+            border-radius: $border-radius;
+          }
+        }
+      }
     }
   }
 }
@@ -91,6 +99,9 @@
     .el-tabs__nav-wrap {
       background-color: var(--s-color-base-background);
       height: 32px;
+      .el-tabs__nav {
+        display: flex;
+      }
       .el-tabs__nav-scroll {
         padding: 2px;
       }
@@ -118,6 +129,41 @@
       }
     }
   }
+  &.s-accent-rounded {
+    $height: 32px;
+    .el-tabs__header {
+      height: $height;
+      width: fit-content;
+      margin-bottom: 20px;
+    }
+    .el-tabs__nav-wrap {
+      background-color: var(--s-color-base-background);
+      height: $height;
+      .el-tabs__nav {
+        display: flex;
+      }
+      &::after,
+      .el-tabs__active-bar {
+        height: 0;
+      }
+      .el-tabs__item {
+        padding: 0 18px;
+        height: $height;
+        line-height: $height;
+        transition: 200ms;
+        &.is-active {
+          color: var(--s-color-base-on-accent);
+          background-color: var(--s-color-theme-accent);
+          i {
+            color: var(--s-color-base-on-accent);
+          }
+        }
+        i {
+          line-height: $height;
+        }
+      }
+    }
+  }
   .el-tabs__active-bar {
     background-color: var(--s-color-theme-accent);
   }