feat: add alignement classes for tabstrip items

telerik · Nov 2, 2022 · ca4957c · ca4957c
1 parent 7f59331
commit ca4957c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -172,7 +172,7 @@
     }
 
 
-    // Tabstrip variants
+    // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: $tabstrip-border-width;
@@ -268,6 +268,24 @@
     }
 
 
+    // Tabstrip align
+    .k-tabstrip-items-start {
+        justify-content: flex-start;
+    }
+    .k-tabstrip-items-center {
+        justify-content: center;
+    }
+    .k-tabstrip-items-end {
+        justify-content: flex-end;
+    }
+    .k-tabstrip-items-justify {
+        justify-content: space-between;
+    }
+    .k-tabstrip-items-stretched > * {
+        flex: 1 0 0;
+    }
+
+
     // Selected indicator
     @if ($tabstrip-indicator-size) {
 

diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss
@@ -176,7 +176,7 @@
     }
 
 
-    // Tabstrip variants
+    // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
@@ -229,6 +229,25 @@
         }
     }
 
+
+    // Tabstrip align
+    .k-tabstrip-items-start {
+        justify-content: flex-start;
+    }
+    .k-tabstrip-items-center {
+        justify-content: center;
+    }
+    .k-tabstrip-items-end {
+        justify-content: flex-end;
+    }
+    .k-tabstrip-items-justify {
+        justify-content: space-between;
+    }
+    .k-tabstrip-items-stretched > * {
+        flex: 1 0 0;
+    }
+
+
     // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {