fix(tabstrip): refactor directional styles for tabstrip and items

telerik · Feb 22, 2023 · b564b31 · b564b31
1 parent d096bfa
commit b564b31
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 90 deletions.
diff --git a/packages/bootstrap/scss/tabstrip/_theme.scss b/packages/bootstrap/scss/tabstrip/_theme.scss
@@ -1,40 +1 @@
 @import "@progress/kendo-theme-default/scss/tabstrip/_theme.scss";
-
-
-@include exports( "tabstrip/theme/bootstrap" ) {
-
-    // Tabstrip variants
-    .k-tabstrip-top {
-
-        > .k-tabstrip-items .k-item:hover,
-        > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-active {
-            border-bottom-color: transparent;
-        }
-    }
-    .k-tabstrip-bottom {
-
-        > .k-tabstrip-items .k-item:hover,
-        > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-active {
-            border-top-color: transparent;
-        }
-    }
-    .k-tabstrip-left {
-
-        > .k-tabstrip-items .k-item:hover,
-        > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-active {
-            border-right-color: transparent;
-        }
-    }
-    .k-tabstrip-right {
-
-        > .k-tabstrip-items .k-item:hover,
-        > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-active {
-            border-left-color: transparent;
-        }
-    }
-
-}
diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -1,5 +1,6 @@
 @include exports("tabstrip/layout") {
 
+    // Tabstrip wrapper
     .k-tabstrip-wrapper {
         padding-block: $kendo-tabstrip-wrapper-padding-y;
         padding-inline: $kendo-tabstrip-wrapper-padding-x;
@@ -10,6 +11,8 @@
         flex-direction: column;
     }
 
+
+    // Tabstrip
     .k-tabstrip {
         border-width: 0;
         border-color: transparent;
@@ -30,6 +33,8 @@
         }
     }
 
+
+    // Tabstrip items wrapper
     .k-tabstrip-items-wrapper {
         box-sizing: border-box;
         border-width: 0;
@@ -38,11 +43,14 @@
         position: relative;
     }
 
+
+    // Tabstrip items
     .k-tabstrip-items {
         box-sizing: border-box;
         outline: 0;
         display: flex;
-        flex-flow: row wrap;
+        flex-direction: inherit;
+        flex-wrap: wrap;
         flex: 1 1 auto;
         gap: $kendo-tabstrip-item-gap;
 
@@ -83,6 +91,8 @@
         }
     }
 
+
+    // Tabstrip content
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         margin: 0 !important; // sass-lint:disable-line no-important
@@ -109,7 +119,8 @@
         }
     }
 
-    // Loading
+
+    // Loading indicator
     .k-tabstrip-items .k-loading {
         width: 20%;
         height: 0;
@@ -143,6 +154,8 @@
             }
 
             > .k-button {
+                padding-block: k-map-get( $kendo-spacing, 1 );
+                padding-inline: k-map-get( $kendo-spacing, 1 );
                 width: auto;
                 height: auto;
                 flex: none;
@@ -154,34 +167,34 @@
                     min-height: auto;
                 }
             }
+        }
+    }
 
-            &.k-hstack {
-                > .k-button {
-                    padding: 0 k-map-get( $kendo-spacing, 1 );
-                }
-            }
 
-            &.k-vstack {
-                > .k-button {
-                    padding: k-map-get( $kendo-spacing, 1 ) 0;
-                }
-            }
-        }
+    // Tabstrip orientation
+    .k-tabstrip-horizontal {
+        flex-direction: row;
+    }
+    .k-tabstrip-vertical {
+        flex-direction: column;
     }
 
 
     // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-bottom-width: $kendo-tabstrip-border-width;
 
             .k-item {
                 @include border-top-radius( $kendo-tabstrip-item-border-radius );
-                margin-bottom: -$kendo-tabstrip-border-width;
+                border-bottom-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-bottom-color: transparent;
+                margin-bottom: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-bottom-width: $kendo-tabstrip-border-width;
+                border-bottom-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -193,15 +206,18 @@
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-top-width: $kendo-tabstrip-border-width;
 
             .k-item {
                 @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
-                margin-top: -$kendo-tabstrip-border-width;
+                border-top-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-top-color: transparent;
+                margin-top: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-top-width: $kendo-tabstrip-border-width;
+                border-top-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -215,19 +231,18 @@
         flex-direction: row;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-right-width: $kendo-tabstrip-border-width;
 
-            > .k-tabstrip-items {
-                flex-direction: column;
-            }
-
             .k-item {
                 @include border-left-radius( $kendo-tabstrip-item-border-radius );
-                margin-right: -$kendo-tabstrip-border-width;
+                border-right-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-right-color: transparent;
+                margin-right: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-right-width: $kendo-tabstrip-border-width;
+                border-right-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -242,19 +257,18 @@
         flex-direction: row-reverse;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-left-width: $kendo-tabstrip-border-width;
 
-            > .k-tabstrip-items {
-                flex-direction: column;
-            }
-
             .k-item {
                 @include border-right-radius( $kendo-tabstrip-item-border-radius );
-                margin-left: -$kendo-tabstrip-border-width;
+                border-left-width: 0;
             }
-
+            .k-item:active,
             .k-item.k-active {
-                border-left-color: transparent;
+                margin-left: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                border-left-width: $kendo-tabstrip-border-width;
+                border-left-color: transparent !important; // sass-lint:disable-line no-important
             }
         }
 
@@ -327,12 +341,8 @@
 
     }
 
-}
-
-
-
 
-@include exports("tabstrip/layout/rtl") {
+    // RTL
     .k-rtl .k-tabstrip,
     .k-tabstrip[dir="rtl"] {
 

diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss
@@ -3,6 +3,7 @@
 
 @mixin kendo-tabstrip--layout() {
 
+    // Tabstrip wrapper
     .k-tabstrip-wrapper {
         padding-inline: var( --kendo-tabstrip-wrapper-padding-x, #{ $kendo-tabstrip-wrapper-padding-x} );
         padding-block: var( --kendo-tabstrip-wrapper-padding-y, #{ $kendo-tabstrip-wrapper-padding-y} );
@@ -13,6 +14,8 @@
         flex-direction: column;
     }
 
+
+    // Tabstrip
     .k-tabstrip {
         border-width: 0;
         border-color: transparent;
@@ -33,6 +36,8 @@
         }
     }
 
+
+    // Tabstrip items wrapper
     .k-tabstrip-items-wrapper {
         box-sizing: border-box;
         border-width: 0;
@@ -41,6 +46,8 @@
         position: relative;
     }
 
+
+    // Tabstrip items
     .k-tabstrip-items {
         box-sizing: border-box;
         outline: 0;
@@ -93,6 +100,8 @@
         }
     }
 
+
+    // Tabstrip content
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         margin: 0 !important; // sass-lint:disable-line no-important
@@ -113,7 +122,8 @@
         }
     }
 
-    // Loading
+
+    // Loading indicator
     .k-tabstrip-items .k-loading {
         width: 20%;
         height: 0;
@@ -147,6 +157,8 @@
             }
 
             > .k-button {
+                padding-block: var( --kendo-tabstrip-scrollable-button-padding-y, #{$kendo-tabstrip-scrollable-button-padding-y} );
+                padding-inline: var( --kendo-tabstrip-scrollable-button-padding-x, #{$kendo-tabstrip-scrollable-button-padding-x} );
                 width: auto;
                 height: auto;
                 flex: none;
@@ -158,25 +170,23 @@
                     min-height: auto;
                 }
             }
-            // TODO: Think of a less verbose name
-            &.k-hstack {
-                > .k-button {
-                    padding-inline: var( --kendo-tabstrip-scrollable-button-padding-x, #{$kendo-tabstrip-scrollable-button-padding-x} );
-                }
-            }
-
-            &.k-vstack {
-                > .k-button {
-                    padding-block: var( --kendo-tabstrip-scrollable-button-padding-y, #{$kendo-tabstrip-scrollable-button-padding-y} );
-                }
-            }
         }
     }
 
 
+    // Tabstrip orientation
+    .k-tabstrip-horizontal {
+        flex-direction: row;
+    }
+    .k-tabstrip-vertical {
+        flex-direction: column;
+    }
+
+
     // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-bottom-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             .k-item {
@@ -187,6 +197,7 @@
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-horizontal !optional;
             border-top-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             .k-item {
@@ -199,6 +210,7 @@
         flex-direction: row;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-right-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             > .k-tabstrip-items {
@@ -215,6 +227,7 @@
         flex-direction: row-reverse;
 
         > .k-tabstrip-items-wrapper {
+            @extend .k-tabstrip-vertical !optional;
             border-left-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
 
             > .k-tabstrip-items {
@@ -302,6 +315,8 @@
 
     }
 
+
+    // RTL
     .k-rtl .k-tabstrip,
     .k-tabstrip[dir="rtl"] {