fix: importing theme in a class creates a wrong selector

telerik · Aug 23, 2024 · 165ec66 · 165ec66
1 parent a3670ac
commit 165ec66
Show file tree

Hide file tree

Showing 48 changed files with 426 additions and 449 deletions.
diff --git a/packages/bootstrap/scss/menu/_layout.scss b/packages/bootstrap/scss/menu/_layout.scss
@@ -13,12 +13,8 @@
         padding-inline: 0;
     }
 
-    .k-menu-group,
-    .k-menu-vertical {
-
-        .k-menu-popup & {
-            padding: 0;
-        }
+    .k-menu-popup :is(.k-menu-group, .k-menu-vertical) {
+        padding: 0;
     }
 
     .k-context-menu-popup {

diff --git a/packages/bootstrap/scss/scheduler/_layout.scss b/packages/bootstrap/scss/scheduler/_layout.scss
@@ -11,10 +11,6 @@
         &::before {
             display: none;
             left: 0;
-
-            .k-rtl & {
-                right: 0;
-            }
         }
 
         // Angular fix for stronger selector and smaller padding
@@ -35,4 +31,12 @@
         }
     }
 
+    .k-rtl {
+        kendo-scheduler .k-event,
+        .k-event {
+            &::before {
+                right: 0;
+            }
+        }
+    }
 }
diff --git a/packages/default/scss/adaptive/_layout.scss b/packages/default/scss/adaptive/_layout.scss
@@ -454,28 +454,23 @@
             }
 
         }
+    }
 
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-
-            .k-scheduler-mobile {
-
-                .k-scheduler-toolbar {
-                    > ul > li {
-                        border: 0;
-                    }
+    // RTL
+    :is(.k-rtl .k-pane-wrapper, [dir="rtl"] .k-pane-wrapper, .k-pane-wrapper[dir="rtl"]) {
+        .k-scheduler-mobile {
+            .k-scheduler-toolbar {
+                > ul > li {
+                    border: 0;
                 }
+            }
 
-                .k-task .k-i-reload {
-                    margin-left: .5em;
-                    margin-right: 0;
-                }
+            .k-task .k-i-reload {
+                margin-left: .5em;
+                margin-right: 0;
             }
         }
     }
-
 }
 
 

diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss
@@ -123,14 +123,6 @@
             );
         }
 
-
-        &[dir="rtl"],
-        .k-rtl & {
-            .k-calendar-navigation {
-                box-shadow: inset 1px 0 $kendo-calendar-navigation-border;
-            }
-        }
-
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
@@ -140,6 +132,12 @@
         }
     }
 
+    .k-rtl .k-calendar,
+    .k-calendar[dir="rtl"] {
+        .k-calendar-navigation {
+            box-shadow: inset 1px 0 $kendo-calendar-navigation-border;
+        }
+    }
 
     // Scheduler integration
     .k-scheduler .k-calendar .k-other-month {

diff --git a/packages/default/scss/card/_layout.scss b/packages/default/scss/card/_layout.scss
@@ -116,11 +116,11 @@
         max-width: 100%;
         flex-shrink: 0;
         overflow: hidden;
+    }
 
-        .k-card-horizontal & {
-            max-width: $kendo-card-img-max-width;
-            object-fit: cover;
-        }
+    .k-card-horizontal .k-card-media {
+        max-width: $kendo-card-img-max-width;
+        object-fit: cover;
     }
 
 

diff --git a/packages/default/scss/chat/_layout.scss b/packages/default/scss/chat/_layout.scss
@@ -300,17 +300,19 @@
                 fill: currentColor;
                 display: inline-block;
             }
+        }
+    }
 
-            .k-rtl &,
-            [dir="rtl"] & {
+    .k-rtl,
+    [dir="rtl"] {
+        .k-message-box {
+            .k-button {
                 transform: scaleX(-1);
             }
         }
     }
 
 
-
-
     // Card list
     .k-chat .k-card-list {
         margin: $kendo-chat-bubble-spacing 0 0;

diff --git a/packages/default/scss/datetimepicker/_layout.scss b/packages/default/scss/datetimepicker/_layout.scss
@@ -41,13 +41,9 @@
         transform: translateX(-100%);
     }
 
-    .k-time-tab .k-datetime-selector {
-        &.k-rtl,
-        &[dir="rtl"],
-        .k-rtl &,
-        [dir="rtl"] & {
-            transform: translateX(100%);
-        }
+    :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector,
+    .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) {
+        transform: translateX(100%);
     }
 }
 

diff --git a/packages/default/scss/expansion-panel/_layout.scss b/packages/default/scss/expansion-panel/_layout.scss
@@ -20,15 +20,15 @@
         *::after {
             box-sizing: border-box;
         }
+    }
 
-        .k-rtl &,
-        &.k-rtl,
-        &[dir = "rtl"] {
-            // Expand / collapse icon
-            .k-expander-indicator {
-                margin-left: 0;
-                margin-right: $kendo-expander-indicator-margin-x;
-            }
+    .k-rtl .k-expander,
+    .k-expander.k-rtl,
+    .k-expander[dir="rtl"] {
+        // Expand / collapse icon
+        .k-expander-indicator {
+            margin-left: 0;
+            margin-right: $kendo-expander-indicator-margin-x;
         }
     }
 

diff --git a/packages/default/scss/fab/_layout.scss b/packages/default/scss/fab/_layout.scss
@@ -39,14 +39,13 @@
         padding-inline: $kendo-fab-icon-padding-x;
         padding-block: $kendo-fab-icon-padding-y;
         box-sizing: content-box;
-
-        .k-icon-wrapper-host:not(:only-child) &,
-        &:not(:only-child) {
-            margin-inline-end: $kendo-fab-icon-spacing;
-            margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
-        }
     }
 
+    .k-icon-wrapper-host:not(:only-child) .k-fab-icon,
+    .k-fab-icon:not(:only-child) {
+        margin-inline-end: $kendo-fab-icon-spacing;
+        margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
+    }
 
     // Sizes
     @each $size, $size-props in $kendo-fab-sizes {

diff --git a/packages/default/scss/floating-label/_layout.scss b/packages/default/scss/floating-label/_layout.scss
@@ -57,33 +57,32 @@
         &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
             color: transparent;
         }
+    }
 
-        [dir="rtl"] &,
-        .k-rtl &,
-        &[dir="rtl"] {
+    [dir="rtl"] .k-floating-label-container,
+    .k-rtl .k-floating-label-container,
+    .k-floating-label-container[dir="rtl"] {
+        > .k-floating-label {
+            transform-origin: right center;
+            transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
+        }
 
+        &.k-empty {
             > .k-floating-label {
-                transform-origin: right center;
-                transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
-            }
-
-            &.k-empty {
-                > .k-floating-label {
-                    left: auto;
-                    right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
-                }
-            }
-
-            > .k-floating-label,
-            &.k-focus > .k-floating-label {
                 left: auto;
-                right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
-            }
-            &:focus-within > .k-floating-label {
-                left: auto;
-                right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+                right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
             }
         }
+
+        > .k-floating-label,
+        &.k-focus > .k-floating-label {
+            left: auto;
+            right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+        }
+        &:focus-within > .k-floating-label {
+            left: auto;
+            right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
+        }
     }
 
 }

diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss
@@ -197,27 +197,23 @@
     }
 
     // RTL Adjustments
-    .k-form {
-        [dir="rtl"],
-        .k-rtl & {
-            .k-label-optional {
-                margin-left: 0;
-                margin-right: $kendo-label-optional-margin-x;
-            }
+    .k-form [dir="rtl"],
+    .k-rtl .k-form {
+        .k-label-optional {
+            margin-left: 0;
+            margin-right: $kendo-label-optional-margin-x;
         }
     }
 
-    .k-form-horizontal {
-        [dir="rtl"],
-        .k-rtl & {
-            &.k-form-field,
-            .k-form-field {
-                > .k-label,
-                > kendo-label,
-                > .k-form-label {
-                    margin-right: 0;
-                    margin-left: $kendo-horizontal-form-label-margin-x;
-                }
+    .k-form-horizontal [dir="rtl"],
+    .k-rtl .k-form-horizontal {
+        &.k-form-field,
+        .k-form-field {
+            > .k-label,
+            > kendo-label,
+            > .k-form-label {
+                margin-right: 0;
+                margin-left: $kendo-horizontal-form-label-margin-x;
             }
         }
     }

diff --git a/packages/default/scss/input/_layout.scss b/packages/default/scss/input/_layout.scss
@@ -65,14 +65,14 @@
         &:disabled,
         &[disabled] {
             @include disabled( $kendo-disabled-styling... );
-
-            [disabled] &,
-            .k-disabled & {
-                opacity: 1;
-                filter: grayscale(0);
-            }
         }
     }
+
+    :is([disabled], .k-disabled) :is(input.k-input, textarea.k-textarea):is(:disabled, [disabled]) {
+        opacity: 1;
+        filter: grayscale(0);
+    }
+
     textarea.k-textarea {
         overflow: auto;
     }
@@ -90,15 +90,14 @@
         &:disabled,
         &[disabled] {
             @include disabled( $kendo-disabled-styling... );
-
-            [disabled] &,
-            .k-disabled & {
-                opacity: 1;
-                filter: grayscale(0);
-            }
         }
     }
 
+    :is([disabled], .k-disabled) select.k-picker:is(:disabled, [disabled]) {
+        opacity: 1;
+        filter: grayscale(0);
+    }
+
 
     // Input inner
     .k-input-inner {

diff --git a/packages/default/scss/map/_layout.scss b/packages/default/scss/map/_layout.scss
@@ -75,8 +75,6 @@
         border-radius: 50%;
         position: relative;
 
-        .k-pdf-export & { display: none; }
-
 
         // Buttons
         .k-button {
@@ -125,10 +123,15 @@
         border: 0;
         background: none;
         display: flex;
-
-        .k-pdf-export & { display: none; }
     }
 
+
+    .k-pdf-export {
+        .k-navigator,
+        .k-zoom-control {
+            display: none;
+        }
+    }
 }
 
 

diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss
@@ -88,9 +88,13 @@
         @if ($kendo-pager-item-spacing) {
             margin-left: $kendo-pager-item-spacing;
         }
+    }
 
-        .k-rtl &,
-        [dir="rtl"] & {
+    .k-rtl,
+    [dir="rtl"] {
+        .k-pager-nav + .k-pager-nav,
+        .k-pager-nav + .k-pager-numbers-wrap,
+        .k-pager-numbers-wrap + .k-pager-nav {
             @if ($kendo-pager-item-spacing) {
                 margin-left: 0;
                 margin-right: $kendo-pager-item-spacing;