fix(tabstrip): do not overlap tabstrip and content area

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

Hide file tree

Showing 3 changed files with 38 additions and 193 deletions.
diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -43,7 +43,8 @@
         outline: 0;
         display: flex;
         flex-flow: row wrap;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
+        gap: $tabstrip-item-gap;
 
         *,
         *::before,
@@ -86,6 +87,7 @@
 
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
+        margin: 0 !important; // sass-lint:disable-line no-important
         padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
         box-sizing: border-box;
         border-width: $tabstrip-content-border-width;
@@ -137,7 +139,6 @@
         > .k-tabstrip-items-wrapper {
 
             > .k-tabstrip-items {
-                flex: 1 1 auto;
                 flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
@@ -175,21 +176,12 @@
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: $tabstrip-border-width;
-            margin-bottom: -$tabstrip-content-border-width;
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 @include border-top-radius( $tabstrip-item-border-radius );
                 margin-bottom: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-left: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-bottom-color: transparent;
             }
@@ -198,27 +190,18 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-bottom-radius( $tabstrip-item-border-radius );
-            border-top-color: transparent !important; // sass-lint:disable-line no-important
+            border-top-width: 0 !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             border-top-width: $tabstrip-border-width;
-            margin-top: -$tabstrip-content-border-width;
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 @include border-bottom-radius( $tabstrip-item-border-radius );
                 margin-top: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-left: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-top-color: transparent;
             }
@@ -227,19 +210,16 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-top-radius( $tabstrip-item-border-radius );
-            border-bottom-color: transparent !important; // sass-lint:disable-line no-important
+            border-bottom-width: 0 !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-left {
         flex-direction: row;
 
         > .k-tabstrip-items-wrapper {
             border-right-width: $tabstrip-border-width;
-            margin-right: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
@@ -248,10 +228,6 @@
                 margin-right: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-top: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-right-color: transparent;
             }
@@ -260,8 +236,7 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-right-radius( $tabstrip-item-border-radius );
-            margin: 0 !important; // sass-lint:disable-line no-important
-            border-left-color: transparent !important; // sass-lint:disable-line no-important
+            border-left-width: 0 !important; // sass-lint:disable-line no-important
         }
 
     }
@@ -270,11 +245,8 @@
 
         > .k-tabstrip-items-wrapper {
             border-left-width: $tabstrip-border-width;
-            margin-left: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
@@ -283,10 +255,6 @@
                 margin-left: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-top: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-left-color: transparent;
             }
@@ -295,8 +263,7 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-left-radius( $tabstrip-item-border-radius );
-            margin: 0 !important; // sass-lint:disable-line no-important
-            border-right-color: transparent !important; // sass-lint:disable-line no-important
+            border-right-width: 0;
         }
     }