@progress/kendo-theme-core 12.2.0 → 12.2.1-dev.1

package/scss/components/skeleton/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-skeleton--theme-base() {
@@ -23,8 +23,3 @@
     }
 
 }
-
-
-@mixin kendo-skeleton--theme() {
-    @include kendo-skeleton--theme-base();
-}

package/scss/components/slider/_layout.scss

@@ -385,8 +385,3 @@
     .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
     .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
 }
-
-
-@mixin kendo-slider--layout() {
-    @include kendo-slider--layout-base();
-}

package/scss/components/slider/_theme.scss

@@ -1,6 +1,6 @@
-@use "../../color-system/_functions.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
-@use "../../border-radii/index.import.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-slider--theme-base() {
@@ -85,8 +85,3 @@
     }
 
 }
-
-
-@mixin kendo-slider--theme() {
-    @include kendo-slider--theme-base();
-}

package/scss/components/split-button/_layout.scss

@@ -34,8 +34,3 @@
     }
 
 }
-
-
-@mixin kendo-split-button--layout() {
-    @include kendo-split-button--layout-base();
-}

package/scss/components/split-button/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-split-button--theme-base() {
@@ -10,8 +10,3 @@
     }
 
 }
-
-
-@mixin kendo-split-button--theme() {
-    @include kendo-split-button--theme-base();
-}

package/scss/components/splitter/_layout.scss

@@ -1,6 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-splitter--layout-base() {
 
@@ -190,8 +190,3 @@
     }
 
 }
-
-
-@mixin kendo-splitter--layout() {
-    @include kendo-splitter--layout-base();
-}

package/scss/components/splitter/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-splitter--theme-base() {
@@ -36,8 +36,3 @@
     }
 
 }
-
-
-@mixin kendo-splitter--theme() {
-    @include kendo-splitter--theme-base();
-}

package/scss/components/spreadsheet/_layout.scss

@@ -1,13 +1,13 @@
 @use "../../color-system/_constants.scss" as *;
-@use "../../spacing/index.import.scss" as *;
-@use "../../border-radii/index.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../list/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../menu/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-spreadsheet--layout-base() {
 
@@ -907,8 +907,3 @@
     }
 
 }
-
-
-@mixin kendo-spreadsheet--layout() {
-    @include kendo-spreadsheet--layout-base();
-}

package/scss/components/spreadsheet/_theme.scss

@@ -1,5 +1,5 @@
-@use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../list/_variables.scss" as *;

package/scss/components/stepper/_layout.scss

@@ -1,7 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
-@use "../../spacing/index.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../z-index/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 
@@ -262,8 +262,3 @@
         }
     }
 }
-
-
-@mixin kendo-stepper--layout() {
-    @include kendo-stepper--layout-base();
-}

package/scss/components/stepper/_theme.scss

@@ -1,5 +1,5 @@
-@use "../../color-system/_functions.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -215,8 +215,3 @@
     }
 
 }
-
-
-@mixin kendo-stepper--theme() {
-    @include kendo-stepper--theme-base();
-}

package/scss/components/suggestion/_layout.scss

@@ -1,8 +1,6 @@
 @use "./_variables.scss" as *;
-@use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_functions.import.scss" as *;
-
-@use "../../spacing/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../spacing/index.scss" as *;
 
 @mixin kendo-suggestion--layout-base() {
     .k-suggestion-scrollwrap {
@@ -11,11 +9,10 @@
         display: flex;
         align-items: center;
         position: relative;
-        overflow: hidden;
         gap: $kendo-suggestion-spacing;
 
         .k-suggestion-group {
-            padding-block: $kendo-suggestion-padding-y;
+            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
             flex: 1 1 auto;
             flex-wrap: nowrap;
             overflow-x: auto;
@@ -34,6 +31,7 @@
             flex-wrap: nowrap;
             overflow-x: auto;
             scrollbar-width: none;
+            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
         }
     }
 

package/scss/components/suggestion/_theme.scss

@@ -1,8 +1,8 @@
 @use "./_variables.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 
-@use "../../spacing/index.import.scss" as *;
-@use "../../color-system/_functions.import.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
 @use "../../_variables.scss" as *;
 
 @mixin kendo-suggestion--theme-base() {
@@ -38,7 +38,7 @@
     }
 
     @each $name, $props in $kendo-suggestion-theme-colors {
-        
+
         $_suggestion-text: k-color(#{$name}-on-subtle);
         $_suggestion-bg: k-color(#{$name}-subtle);
         $_suggestion-border: k-color(#{$name}-emphasis);
@@ -51,7 +51,7 @@
         $_suggestion-active-bg: k-color(#{$name}-subtle-active);
         $_suggestion-active-border: k-color(#{$name}-emphasis);
 
-            
+
         .k-suggestion-#{$name} {
             @include fill(
                 $_suggestion-text,
@@ -80,8 +80,3 @@
     }
 
 }
-
-
-@mixin kendo-suggestion--theme() {
-    @include kendo-suggestion--theme-base();
-}

package/scss/components/switch/_layout.scss

@@ -136,8 +136,3 @@
     }
 
 }
-
-
-@mixin kendo-switch--layout() {
-    @include kendo-switch--layout-base();
-}

package/scss/components/switch/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
@@ -187,8 +187,3 @@
     }
 
 }
-
-
-@mixin kendo-switch--theme() {
-    @include kendo-switch--theme-base();
-}

package/scss/components/table/_layout.scss

@@ -253,8 +253,3 @@
     }
 
 }
-
-
-@mixin kendo-table--layout() {
-    @include kendo-table--layout-base();
-}

package/scss/components/table/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-table--theme-base() {
@@ -90,8 +90,3 @@
     }
 
 }
-
-
-@mixin kendo-table--theme() {
-    @include kendo-table--theme-base();
-}

package/scss/components/tabstrip/_layout.scss

@@ -1,9 +1,9 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-tabstrip--layout-base() {
 
@@ -69,6 +69,7 @@
             box-sizing: border-box;
         }
 
+        .k-tabstrip-item,
         .k-item {
             margin: 0;
             padding: 0;
@@ -112,6 +113,8 @@
 
 
         // Disabled state
+        .k-tabstrip-item.k-disabled,
+        .k-tabstrip-item[disabled],
         .k-item.k-disabled,
         .k-item[disabled] {
             opacity: $kendo-tabstrip-item-disabled-opacity;
@@ -282,6 +285,7 @@
             @extend .k-tabstrip-horizontal !optional;
             border-block-end-width: $kendo-tabstrip-border-width;
 
+            .k-tabstrip-item,
             .k-item {
                 @include border-top-radius( $kendo-tabstrip-item-border-radius );
                 border-block-end-width: 0;
@@ -290,6 +294,8 @@
                     justify-content: center;
                 }
             }
+            .k-tabstrip-item:active,
+            .k-tabstrip-item.k-active,
             .k-item:active,
             .k-item.k-active {
                 margin-block-end: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
@@ -309,6 +315,7 @@
             @extend .k-tabstrip-horizontal !optional;
             border-block-start-width: $kendo-tabstrip-border-width;
 
+            .k-tabstrip-item,
             .k-item {
                 @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
                 border-block-start-width: 0;
@@ -317,6 +324,8 @@
                     justify-content: center;
                 }
             }
+            .k-tabstrip-item:active,
+            .k-tabstrip-item.k-active,
             .k-item:active,
             .k-item.k-active {
                 margin-block-start: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
@@ -338,10 +347,13 @@
             @extend .k-tabstrip-vertical !optional;
             border-right-width: $kendo-tabstrip-border-width;
 
+            .k-tabstrip-item,
             .k-item {
                 border-radius: $kendo-tabstrip-item-border-radius 0 0 $kendo-tabstrip-item-border-radius;
                 border-right-width: 0;
             }
+            .k-tabstrip-item:active,
+            .k-tabstrip-item.k-active,
             .k-item:active,
             .k-item.k-active {
                 margin-right: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
@@ -364,11 +376,14 @@
             @extend .k-tabstrip-vertical !optional;
             border-left-width: $kendo-tabstrip-border-width;
 
+            .k-tabstrip-item,
             .k-item {
                 border-radius: 0 $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0;
                 border-left-width: 0;
             }
 
+            .k-tabstrip-item:active,
+            .k-tabstrip-item.k-active,
             .k-item:active,
             .k-item.k-active {
                 margin-left: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
@@ -408,6 +423,7 @@
 
         .k-tabstrip-items-wrapper {
 
+            .k-tabstrip-item::after,
             .k-item::after {
                 content: "";
                 border-width: 0;
@@ -421,10 +437,12 @@
                 inset-inline-start: 0;
                 pointer-events: none;
             }
+            .k-tabstrip-item.k-active::after,
             .k-item.k-active::after {
                 display: block;
             }
 
+            .k-tabstrip-item > .k-link,
             .k-item > .k-link {
                 z-index: k-z-index("base", 1);
             }
@@ -432,17 +450,29 @@
 
 
         // Variants
-        .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after {
-            border-bottom-width: $kendo-tabstrip-indicator-size;
+        .k-tabstrip-top > .k-tabstrip-items-wrapper {
+            .k-tabstrip-item::after,
+            .k-item::after {
+                border-bottom-width: $kendo-tabstrip-indicator-size;
+            }
         }
-        .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after {
-            border-top-width: $kendo-tabstrip-indicator-size;
+        .k-tabstrip-bottom > .k-tabstrip-items-wrapper {
+            .k-tabstrip-item::after,
+            .k-item::after {
+                border-top-width: $kendo-tabstrip-indicator-size;
+            }
         }
-        .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {
-            border-right-width: $kendo-tabstrip-indicator-size;
+        .k-tabstrip-left > .k-tabstrip-items-wrapper {
+            .k-tabstrip-item::after,
+            .k-item::after {
+                border-right-width: $kendo-tabstrip-indicator-size;
+            }
         }
-        .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after {
-            border-left-width: $kendo-tabstrip-indicator-size;
+        .k-tabstrip-right > .k-tabstrip-items-wrapper {
+            .k-tabstrip-item::after,
+            .k-item::after {
+                border-left-width: $kendo-tabstrip-indicator-size;
+            }
         }
     }
 
@@ -490,8 +520,3 @@
     }
 
 }
-
-
-@mixin kendo-tabstrip--layout() {
-    @include kendo-tabstrip--layout-base();
-}

package/scss/components/tabstrip/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-tabstrip--theme-base() {
@@ -21,6 +21,7 @@
             $kendo-tabstrip-border
         );
 
+        .k-tabstrip-item,
         .k-item {
             @include fill(
                 $kendo-tabstrip-item-text,
@@ -96,6 +97,7 @@
 
         :where(.k-tabstrip-top, .k-tabstrip-bottom) {
             > .k-tabstrip-items-wrapper {
+                .k-tabstrip-item.k-active .k-link::after,
                 .k-item.k-active .k-link::after {
                     background: $kendo-tabstrip-indicator-color;
                 }
@@ -104,6 +106,7 @@
 
         :where(.k-tabstrip-left, .k-tabstrip-right) {
             > .k-tabstrip-items-wrapper {
+                .k-tabstrip-item.k-active::after,
                 .k-item.k-active::after {
                     background: $kendo-tabstrip-indicator-color;
                 }
@@ -156,8 +159,3 @@
         }
     }
 }
-
-
-@mixin kendo-tabstrip--theme() {
-    @include kendo-tabstrip--theme-base();
-}

package/scss/components/taskboard/_layout.scss

@@ -1,6 +1,6 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-task-board--layout-base() {
 
@@ -216,8 +216,3 @@
     }
 
 }
-
-
-@mixin kendo-task-board--layout() {
-    @include kendo-task-board--layout-base();
-}

package/scss/components/taskboard/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -110,8 +110,3 @@
     }
 
 }
-
-
-@mixin kendo-task-board--theme() {
-    @include kendo-task-board--theme-base();
-}

package/scss/components/textarea/_layout.scss

@@ -6,8 +6,3 @@
     }
 
 }
-
-
-@mixin kendo-textarea--layout() {
-    @include kendo-textarea--layout-base();
-}

package/scss/components/textarea/_theme.scss

@@ -4,8 +4,3 @@
     .k-textarea {}
 
 }
-
-
-@mixin kendo-textarea--theme() {
-    @include kendo-textarea--theme-base();
-}

package/scss/components/textbox/_layout.scss

@@ -4,8 +4,3 @@
     .k-textbox {}
 
 }
-
-
-@mixin kendo-textbox--layout() {
-    @include kendo-textbox--layout-base();
-}

package/scss/components/textbox/_theme.scss

@@ -4,8 +4,3 @@
     .k-textbox {}
 
 }
-
-
-@mixin kendo-textbox--theme() {
-    @include kendo-textbox--theme-base();
-}

package/scss/components/tilelayout/_layout.scss

@@ -1,7 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-tile-layout--layout-base() {
 
@@ -47,8 +47,3 @@
     }
 
 }
-
-
-@mixin kendo-tile-layout--layout() {
-    @include kendo-tile-layout--layout-base();
-}

package/scss/components/tilelayout/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../mixins/index.import.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-tile-layout--theme-base() {
@@ -22,8 +22,3 @@
     }
 
 }
-
-
-@mixin kendo-tile-layout--theme() {
-    @include kendo-tile-layout--theme-base();
-}

package/scss/components/time-marker/_theme.scss

@@ -19,8 +19,3 @@
     }
 
 }
-
-
-@mixin kendo-time-marker--theme() {
-    @include kendo-time-marker--theme-base();
-}

package/scss/components/timedurationpicker/_layout.scss

@@ -10,8 +10,3 @@
     }
 
 }
-
-
-@mixin kendo-time-duration-picker--layout() {
-    @include kendo-time-duration-picker--layout-base();
-}

package/scss/components/timedurationpicker/_theme.scss

@@ -4,8 +4,3 @@
     .k-time-duration-picker {}
 
 }
-
-
-@mixin kendo-time-duration-picker--theme() {
-    @include kendo-time-duration-picker--theme-base();
-}

package/scss/components/timeline/_layout.scss

@@ -1,10 +1,10 @@
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
-@use "../../border-radii/index.import.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
 @use "../card/_variables.scss" as *;
-@use "../../z-index/index.import.scss" as *;
+@use "../../z-index/index.scss" as *;
 
 @mixin kendo-timeline--layout-base() {
 
@@ -445,8 +445,3 @@
     }
 
 }
-
-
-@mixin kendo-timeline--layout() {
-    @include kendo-timeline--layout-base();
-}

package/scss/components/timeline/_theme.scss

@@ -1,5 +1,5 @@
-@use "../../color-system/_functions.import.scss" as *;
-@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../card/_variables.scss" as *;
 
@@ -71,8 +71,3 @@
     }
 
 }
-
-
-@mixin kendo-timeline--theme() {
-    @include kendo-timeline--theme-base();
-}