chore: update default

telerik · Dec 19, 2024 · ddec51b · ddec51b
1 parent 89d3a21
commit ddec51b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -183,20 +183,37 @@
                     }
                 }
             }
+        }
 
-            &.k-tabstrip-items-wrapper-scroll {
-                &::before,
-                &::after {
-                    content: '';
-                    position: absolute;
-                    z-index: 3;
-                }
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items.k-tabstrip-items-scroll {
+                overflow-x: auto;
+            }
+        }
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            .k-tabstrip-items.k-tabstrip-items-scroll {
+                overflow-y: auto;
+            }
+        }
+
+    }
+
+    .k-tabstrip-scrollable-overlay {
+        .k-tabstrip-items-wrapper {
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                z-index: 3;
             }
         }
 
         &.k-tabstrip-top,
         &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper-scroll {
+            .k-tabstrip-items-wrapper {
                 &::before,
                 &::after {
                     height: 100%;
@@ -210,15 +227,11 @@
                     inset-inline-end: 0;
                 }
             }
-
-            .k-tabstrip-items.k-tabstrip-items-scroll {
-                overflow-x: auto;
-            }
         }
 
         &.k-tabstrip-left,
         &.k-tabstrip-right {
-            .k-tabstrip-items-wrapper-scroll {
+            .k-tabstrip-items-wrapper {
                 &::before,
                 &::after {
                     width: 100%;
@@ -231,30 +244,26 @@
                     inset-block-end: 0;
                 }
             }
-
-            .k-tabstrip-items.k-tabstrip-items-scroll {
-                overflow-y: auto;
-            }
         }
 
-    }
-
-    .k-tabstrip-scrollable-start {
-        .k-tabstrip-items-wrapper-scroll {
-            &::before {
-                display: none;
+        &.k-tabstrip-scrollable-start {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    display: none;
+                }
             }
         }
-    }
 
-    .k-tabstrip-scrollable-end {
-        .k-tabstrip-items-wrapper-scroll {
-            &::after {
-                display: none;
+        &.k-tabstrip-scrollable-end {
+            .k-tabstrip-items-wrapper {
+                &::after {
+                    display: none;
+                }
             }
         }
     }
 
+
     // Tabstrip orientation
     .k-tabstrip-horizontal {
         flex-direction: row;
@@ -466,14 +475,10 @@
                 padding-inline: $_item-padding-x;
             }
 
-            &.k-tabstrip-left,
-            &.k-tabstrip-right {
-                .k-tabstrip-items-wrapper-scroll {
-                    &::before,
-                    &::after {
-                        height: calc( ($_font-size * $_line-height) + ($kendo-tabstrip-border-width) * 2 );
-                        padding-block: $_item-padding-y;
-                    }
+            :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
+                &::before,
+                &::after {
+                    height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
                 }
             }
         }

diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss
@@ -102,10 +102,10 @@
     }
 
     // Scrolling
-    .k-tabstrip-scrollable {
+    .k-tabstrip-scrollable-overlay {
         &.k-tabstrip-top,
         &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper-scroll {
+            .k-tabstrip-items-wrapper {
                 &::before {
                     background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
                 }
@@ -118,7 +118,7 @@
 
         &.k-tabstrip-left,
         &.k-tabstrip-right {
-            .k-tabstrip-items-wrapper-scroll {
+            .k-tabstrip-items-wrapper {
                 &::before {
                     background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay);
                 }
@@ -134,10 +134,10 @@
 // RTL
 .k-rtl,
 [dir="rtl"] {
-    &.k-tabstrip-scrollable {
+    &.k-tabstrip-scrollable-overlay {
         &.k-tabstrip-top,
         &.k-tabstrip-bottom {
-            .k-tabstrip-items-wrapper-scroll {
+            .k-tabstrip-items-wrapper {
                 &::before {
                     background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
                 }