fix(tabstrip): correct scrollable overlay in rtl

telerik · Jan 22, 2025 · ebf3ceb · ebf3ceb
1 parent dc935b9
commit ebf3ceb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 26 deletions.
diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss
@@ -131,19 +131,16 @@
     }
 
     // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        &.k-tabstrip-scrollable-overlay {
-            &.k-tabstrip-top,
-            &.k-tabstrip-bottom {
-                .k-tabstrip-items-wrapper {
-                    &::before {
-                        background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
-                    }
-
-                    &::after {
-                        background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
-                    }
+    :is(.k-rtl .k-tabstrip-scrollable-overlay, [dir="rtl"] .k-tabstrip-scrollable-overlay, .k-tabstrip-scrollable-overlay.k-rtl, .k-tabstrip-scrollable-overlay[dir="rtl"] ) {
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
                 }
             }
         }

diff --git a/packages/fluent/scss/tabstrip/_theme.scss b/packages/fluent/scss/tabstrip/_theme.scss
@@ -129,19 +129,16 @@
     }
 
     // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        &.k-tabstrip-scrollable-overlay {
-            &.k-tabstrip-top,
-            &.k-tabstrip-bottom {
-                .k-tabstrip-items-wrapper {
-                    &::before {
-                        background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
-                    }
-
-                    &::after {
-                        background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
-                    }
+    :is(.k-rtl .k-tabstrip-scrollable-overlay, [dir="rtl"] .k-tabstrip-scrollable-overlay, .k-tabstrip-scrollable-overlay.k-rtl, .k-tabstrip-scrollable-overlay[dir="rtl"] ) {
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
                 }
             }
         }