@progress/kendo-theme-core 11.2.1-dev.1 → 11.3.0

package/scss/components/input/_variables.scss

@@ -6,12 +6,10 @@ $kendo-input-border-width: null !default;
 $kendo-input-border-height: null !default;
 $kendo-input-border-radius: null !default;
 
-$kendo-input-padding-x: null !default;
 $kendo-input-sm-padding-x: null !default;
 $kendo-input-md-padding-x: null !default;
 $kendo-input-lg-padding-x: null !default;
 
-$kendo-input-padding-y: null !default;
 $kendo-input-sm-padding-y: null !default;
 $kendo-input-md-padding-y: null !default;
 $kendo-input-lg-padding-y: null !default;
@@ -28,7 +26,6 @@ $kendo-input-sm-line-height: null !default;
 $kendo-input-md-line-height: null !default;
 $kendo-input-lg-line-height: null !default;
 
-$kendo-input-calc-size: null !default;
 $kendo-input-sm-calc-size: null !default;
 $kendo-input-md-calc-size: null !default;
 $kendo-input-lg-calc-size: null !default;
@@ -98,10 +95,10 @@ $kendo-input-spinner-icon-offset: null !default;
 $kendo-input-separator-text: null !default;
 
 $kendo-input-prefix-text: null !default;
-$kendo-input-suffix-text: null !default;
+$kendo-input-prefix-bg: null !default;
 
-$kendo-input-prefix-text: null !default;
 $kendo-input-suffix-text: null !default;
+$kendo-input-suffix-bg: null !default;
 
 $kendo-input-invalid-border: null !default;
 $kendo-input-invalid-shadow: null !default;

package/scss/components/list/_layout.scss

@@ -49,8 +49,8 @@
     // List header
     // .k-list-header,
     .k-list-group-sticky-header {
-        padding-block: $kendo-list-header-padding-y;
-        padding-inline: $kendo-list-header-padding-x;
+        padding-block: $kendo-list-md-header-padding-y;
+        padding-inline: $kendo-list-md-header-padding-x;
         border-width: 0;
         border-width: $kendo-list-header-border-width;
         border-style: solid;
@@ -91,8 +91,8 @@
 
     // List item
     .k-list-item {
-        padding-block: $kendo-list-item-padding-y;
-        padding-inline: $kendo-list-item-padding-x;
+        padding-block: $kendo-list-md-item-padding-y;
+        padding-inline: $kendo-list-md-item-padding-x;
         border: 0;
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
@@ -141,8 +141,8 @@
 
     // List group item
     .k-list-group-item {
-        padding-block: $kendo-list-group-item-padding-y;
-        padding-inline: $kendo-list-group-item-padding-x;
+        padding-block: $kendo-list-md-group-item-padding-y;
+        padding-inline: $kendo-list-md-group-item-padding-x;
         border-width: 0;
         border-width: $kendo-list-group-item-border-width;
         border-style: solid;
@@ -195,8 +195,8 @@
     .k-list-filter {
         display: block;
         position: relative;
-        padding-inline: $kendo-list-filter-padding-x;
-        padding-block: $kendo-list-filter-padding-y;
+        padding-inline: $kendo-list-md-filter-padding-x;
+        padding-block: $kendo-list-md-filter-padding-y;
         box-sizing: border-box;
         flex: none;
     }

package/scss/components/list/_variables.scss

@@ -12,12 +12,10 @@ $kendo-list-sm-line-height: null !default;
 $kendo-list-md-line-height: null !default;
 $kendo-list-lg-line-height: null !default;
 
-$kendo-list-header-padding-x: null !default;
 $kendo-list-sm-header-padding-x: null !default;
 $kendo-list-md-header-padding-x: null !default;
 $kendo-list-lg-header-padding-x: null !default;
 
-$kendo-list-header-padding-y: null !default;
 $kendo-list-sm-header-padding-y: null !default;
 $kendo-list-md-header-padding-y: null !default;
 $kendo-list-lg-header-padding-y: null !default;
@@ -52,22 +50,17 @@ $kendo-list-item-group-label-sm-padding-y: 0 !default;
 $kendo-list-item-group-label-md-padding-y: 0 !default;
 $kendo-list-item-group-label-lg-padding-y: 0 !default;
 
-$kendo-list-filter-padding: null !default;
-$kendo-list-filter-padding-x: null !default;
 $kendo-list-sm-filter-padding-x: null !default;
 $kendo-list-md-filter-padding-x: null !default;
 $kendo-list-lg-filter-padding-x: null !default;
-$kendo-list-filter-padding-y: null !default;
 $kendo-list-sm-filter-padding-y: null !default;
 $kendo-list-md-filter-padding-y: null !default;
 $kendo-list-lg-filter-padding-y: null !default;
 
-$kendo-list-item-padding-x: null !default;
 $kendo-list-sm-item-padding-x: null !default;
 $kendo-list-md-item-padding-x: null !default;
 $kendo-list-lg-item-padding-x: null !default;
 
-$kendo-list-item-padding-y: null !default;
 $kendo-list-sm-item-padding-y: null !default;
 $kendo-list-md-item-padding-y: null !default;
 $kendo-list-lg-item-padding-y: null !default;
@@ -82,12 +75,10 @@ $kendo-list-sm-item-line-height: null !default;
 $kendo-list-md-item-line-height: null !default;
 $kendo-list-lg-item-line-height: null !default;
 
-$kendo-list-group-item-padding-x: null !default;
 $kendo-list-sm-group-item-padding-x: null !default;
 $kendo-list-md-group-item-padding-x: null !default;
 $kendo-list-lg-group-item-padding-x: null !default;
 
-$kendo-list-group-item-padding-y: null !default;
 $kendo-list-sm-group-item-padding-y: null !default;
 $kendo-list-md-group-item-padding-y: null !default;
 $kendo-list-lg-group-item-padding-y: null !default;

package/scss/components/menu/_layout.scss

@@ -123,9 +123,9 @@
         }
 
         > .k-menu-item > .k-menu-link {
-            padding-block: $kendo-menu-popup-item-padding-y;
-            padding-inline: $kendo-menu-popup-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-item-padding-end;
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
         }
 
         > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {

package/scss/components/menu/_variables.scss

@@ -86,17 +86,14 @@ $kendo-menu-popup-gradient: null !default;
 
 // Menu popup item
 
-$kendo-menu-popup-item-padding-x: null !default;
 $kendo-menu-popup-sm-item-padding-x: null !default;
 $kendo-menu-popup-md-item-padding-x: null !default;
 $kendo-menu-popup-lg-item-padding-x: null !default;
 
-$kendo-menu-popup-item-padding-y: null !default;
 $kendo-menu-popup-sm-item-padding-y: null !default;
 $kendo-menu-popup-md-item-padding-y: null !default;
 $kendo-menu-popup-lg-item-padding-y: null !default;
 
-$kendo-menu-popup-item-padding-end: null !default;
 $kendo-menu-popup-sm-item-padding-end: null !default;
 $kendo-menu-popup-md-item-padding-end: null !default;
 $kendo-menu-popup-lg-item-padding-end: null !default;

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

@@ -14,7 +14,7 @@
 
         > .k-button-arrow {
             margin-inline-start: calc( #{$kendo-menu-button-arrow-padding-x} * -1 );
-            margin-inline-end: calc( #{$kendo-button-padding-x} * -1 );
+            margin-inline-end: calc( #{$kendo-button-md-padding-x} * -1 );
             padding-left: $kendo-menu-button-arrow-padding-x;
             padding-right: $kendo-menu-button-arrow-padding-x;
             flex: none;
@@ -25,7 +25,7 @@
 
         &.k-icon-button > .k-button-arrow {
             margin-inline-start: 0;
-            margin-inline-end: calc( #{$kendo-button-padding-y} * -1 );
+            margin-inline-end: calc( #{$kendo-button-md-padding-y} * -1 );
         }
     }
 

package/scss/components/otp/_variables.scss

@@ -1,16 +1,13 @@
 // OTP
 
-$kendo-otp-gap: null !default;
 $kendo-otp-sm-gap: null !default;
 $kendo-otp-md-gap: null !default;
 $kendo-otp-lg-gap: null !default;
 
-$kendo-otp-separator-padding-x: null !default;
 $kendo-otp-sm-separator-padding-x: null !default;
 $kendo-otp-md-separator-padding-x: null !default;
 $kendo-otp-lg-separator-padding-x: null !default;
 
-$kendo-otp-input-width: null !default;
 $kendo-otp-sm-input-width: null !default;
 $kendo-otp-md-input-width: null !default;
 $kendo-otp-lg-input-width: null !default;

package/scss/components/pager/_variables.scss

@@ -1,6 +1,5 @@
 // Pager
 
-$kendo-pager-padding-x: null !default;
 $kendo-pager-sm-padding-x: null !default;
 $kendo-pager-md-padding-x: null !default;
 $kendo-pager-lg-padding-x: null !default;

package/scss/components/panelbar/_layout.scss

@@ -91,10 +91,13 @@
             }
 
             // Hierarchy items
-            @for $i from 1 through $kendo-panelbar-item-level-count {
-                &.k-level-#{$i} {
-                    .k-link {
-                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
+            // Without this check, invalid CSS is generated TODO: need to rethink this
+            @if $kendo-panelbar-item-padding-x {
+                @for $i from 1 through $kendo-panelbar-item-level-count {
+                    &.k-level-#{$i} {
+                        .k-link {
+                            padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
+                        }
                     }
                 }
             }
@@ -120,7 +123,10 @@
         .k-panelbar-group .k-panelbar-expand,
         .k-panelbar-group .k-panelbar-collapse,
         .k-panelbar-group .k-panelbar-toggle {
-            margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
+            // Without this check, invalid CSS is generated TODO: need to rethink this
+            @if $kendo-panelbar-header-padding-x and $kendo-panelbar-item-padding-x {
+                margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
+            }
         }
     }
 
@@ -129,11 +135,14 @@
     .k-panelbar [dir = "rtl"] {
         .k-panelbar-group > .k-panelbar-item {
             // Hierarchy items
-            @for $i from 1 through $kendo-panelbar-item-level-count {
-                &.k-level-#{$i} {
-                    .k-link {
-                        padding-left: $kendo-panelbar-item-padding-x;
-                        padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
+            // Without this check, invalid CSS is generated TODO: need to rethink this
+            @if $kendo-panelbar-item-padding-x {
+                @for $i from 1 through $kendo-panelbar-item-level-count {
+                    &.k-level-#{$i} {
+                        .k-link {
+                            padding-left: $kendo-panelbar-item-padding-x;
+                            padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
+                        }
                     }
                 }
             }

package/scss/components/pdf-viewer/_layout.scss

@@ -279,7 +279,7 @@
     // Search
     .k-pdf-viewer-canvas > .k-search-panel {
         width: max-content;
-        margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
+        margin-top: calc( (#{$kendo-button-md-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
         padding-block: $kendo-pdf-viewer-search-panel-padding-y;
         padding-inline: $kendo-pdf-viewer-search-panel-padding-x;
         border-width: $kendo-pdf-viewer-search-panel-border-width;

package/scss/components/radio/_layout.scss

@@ -191,11 +191,6 @@
         .k-radio.k-disabled::after {
             display: none;
         }
-
-        .k-radio:disabled::after,
-        .k-radio.k-disabled::after {
-            display: none;
-        }
     }
 
 

package/scss/components/signature/_variables.scss

@@ -6,12 +6,10 @@ $kendo-signature-lg-min-height: null !default;
 $kendo-signature-maximized-width: null !default;
 $kendo-signature-maximized-height: null !default;
 
-$kendo-signature-padding-x: null !default;
 $kendo-signature-sm-padding-x: null !default;
 $kendo-signature-md-padding-x: null !default;
 $kendo-signature-lg-padding-x: null !default;
 
-$kendo-signature-padding-y: null !default;
 $kendo-signature-sm-padding-y: null !default;
 $kendo-signature-md-padding-y: null !default;
 $kendo-signature-lg-padding-y: null !default;
@@ -20,7 +18,6 @@ $kendo-signature-line-width: null !default;
 $kendo-signature-line-style: null !default;
 $kendo-signature-line-color: null !default;
 
-$kendo-signature-line-size: null !default;
 $kendo-signature-sm-line-size: null !default;
 $kendo-signature-md-line-size: null !default;
 $kendo-signature-lg-line-size: null !default;

package/scss/components/spreadsheet/_layout.scss

@@ -598,8 +598,8 @@
         }
         .k-details-summary,
         .k-columnmenu-item {
-            padding-block: $kendo-menu-popup-item-padding-y;
-            padding-inline: $kendo-menu-popup-item-padding-x;
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
             display: flex;
             align-items: center;
             cursor: pointer;

package/scss/components/switch/_layout.scss

@@ -123,6 +123,7 @@
 
         .k-switch-#{$size}[dir="rtl"],
         [dir="rtl"] .k-switch-#{$size},
+        .k-rtl.k-switch-#{$size},
         .k-rtl .k-switch-#{$size} {
 
             .k-switch-label-on {

package/scss/components/table/_layout.scss

@@ -41,8 +41,8 @@
     }
     .k-table-th,
     .k-table-td {
-        padding-block: $kendo-table-cell-padding-y;
-        padding-inline: $kendo-table-cell-padding-x;
+        padding-block: $kendo-table-md-cell-padding-y;
+        padding-inline: $kendo-table-md-cell-padding-x;
         border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
@@ -140,7 +140,7 @@
 
             &::before {
                 content: "\200b";
-                padding-block: $kendo-table-cell-padding-y;
+                padding-block: $kendo-table-md-cell-padding-y;
                 padding-inline: 0;
                 width: 0;
                 display: block;

package/scss/components/table/_variables.scss

@@ -8,10 +8,6 @@ $kendo-table-font-size: null !default;
 
 $kendo-table-line-height: null !default;
 
-$kendo-table-cell-padding-x: null !default;
-
-$kendo-table-cell-padding-y: null !default;
-
 $kendo-table-sm-cell-padding-x: null !default;
 $kendo-table-sm-cell-padding-y: null !default;
 

package/scss/components/tabstrip/_layout.scss

@@ -95,8 +95,8 @@
         }
 
         .k-link {
-            padding-block: $kendo-tabstrip-item-padding-y;
-            padding-inline: $kendo-tabstrip-item-padding-x;
+            padding-block: $kendo-tabstrip-md-item-padding-y;
+            padding-inline: $kendo-tabstrip-md-item-padding-x;
             color: inherit;
             cursor: pointer;
             display: inline-flex;
@@ -290,7 +290,7 @@
             }
             .k-item:active,
             .k-item.k-active {
-                margin-bottom: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                margin-bottom: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
                 border-bottom-width: $kendo-tabstrip-border-width;
                 border-bottom-color: transparent !important; // stylelint-disable-line declaration-no-important
             }
@@ -317,7 +317,7 @@
             }
             .k-item:active,
             .k-item.k-active {
-                margin-top: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                margin-top: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
                 border-top-width: $kendo-tabstrip-border-width;
                 border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
             }
@@ -342,7 +342,7 @@
             }
             .k-item:active,
             .k-item.k-active {
-                margin-right: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                margin-right: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
                 border-right-width: $kendo-tabstrip-border-width;
                 border-right-color: transparent !important; // stylelint-disable-line declaration-no-important
             }
@@ -368,7 +368,7 @@
             }
             .k-item:active,
             .k-item.k-active {
-                margin-left: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null );
+                margin-left: if( $kendo-tabstrip-border-width, calc( -1 * $kendo-tabstrip-border-width ), null );
                 border-left-width: $kendo-tabstrip-border-width;
                 border-left-color: transparent !important; // stylelint-disable-line declaration-no-important
             }

package/scss/components/tabstrip/_theme.scss

@@ -94,8 +94,7 @@
     // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {
 
-        .k-tabstrip-top,
-        .k-tabstrip-bottom {
+        :where(.k-tabstrip-top, .k-tabstrip-bottom) {
             > .k-tabstrip-items-wrapper {
                 .k-item.k-active .k-link::after {
                     background: $kendo-tabstrip-indicator-color;
@@ -103,8 +102,7 @@
             }
         }
 
-        .k-tabstrip-left,
-        .k-tabstrip-right {
+        :where(.k-tabstrip-left, .k-tabstrip-right) {
             > .k-tabstrip-items-wrapper {
                 .k-item.k-active::after {
                     background: $kendo-tabstrip-indicator-color;

package/scss/components/tabstrip/_variables.scss

@@ -25,8 +25,6 @@ $kendo-tabstrip-bg: null !default;
 $kendo-tabstrip-text: null !default;
 $kendo-tabstrip-border: null !default;
 
-$kendo-tabstrip-item-padding-x: null !default;
-$kendo-tabstrip-item-padding-y: null !default;
 $kendo-tabstrip-item-border-width: null !default;
 $kendo-tabstrip-item-border-radius: null !default;
 $kendo-tabstrip-item-gap: null !default;

package/scss/components/taskboard/_layout.scss

@@ -176,7 +176,7 @@
             border-inline-start-width: $kendo-taskboard-card-category-border-width;
         }
 
-        .k-card-header
+        .k-card-header,
         .k-card-body,
         .k-card-footer {
             padding-block: $kendo-taskboard-card-padding-y;

package/scss/components/timeline/_layout.scss

@@ -226,7 +226,7 @@
         .k-timeline-circle {
             margin-top: $kendo-timeline-track-event-offset;
             transform: translate(-50%, -50%);
-            margin-right: - math.div( $kendo-timeline-circle-width, 2 );
+            margin-right: calc( -1 * ( $kendo-timeline-circle-width / 2 ) );
         }
 
         &.k-timeline-alternating {

package/scss/components/timeselector/_layout.scss

@@ -42,8 +42,8 @@
 
         .k-title,
         .k-time-selector-header-title {
-            padding-block: $kendo-button-padding-y;
-            padding-inline: $kendo-button-padding-x;
+            padding-block: $kendo-button-md-padding-y;
+            padding-inline: $kendo-button-md-padding-x;
             font-weight: bold;
             display: inline-block;
         }

package/scss/components/toolbar/_layout.scss

@@ -12,8 +12,8 @@
     // Base
     .k-toolbar {
         margin: 0;
-        padding-block: $kendo-toolbar-padding-y;
-        padding-inline: $kendo-toolbar-padding-x;
+        padding-block: $kendo-toolbar-md-padding-y;
+        padding-inline: $kendo-toolbar-md-padding-x;
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -24,7 +24,7 @@
         list-style: none;
         display: flex;
         flex-flow: row wrap;
-        gap: $kendo-toolbar-spacing;
+        gap: $kendo-toolbar-md-spacing;
         align-items: center;
         justify-content: flex-start;
         position: relative;
@@ -35,7 +35,7 @@
         // Remove once we decide to not size empty containers
         &::before {
             content: "";
-            height: $kendo-button-calc-size;
+            height: $kendo-button-md-calc-size;
         }
 
         &.k-toolbar-resizable {
@@ -75,11 +75,11 @@
         > * {
             flex-shrink: 0;
             display: inline-flex;
-            align-content: center;
+            align-items: center;
             vertical-align: middle;
 
             > label {
-                margin-inline-end: $kendo-toolbar-spacing;
+                margin-inline-end: $kendo-toolbar-md-spacing;
                 align-self: center;
             }
         }
@@ -154,7 +154,7 @@
     .k-toolbar-items {
         display: flex;
         flex-flow: row nowrap;
-        gap: $kendo-toolbar-spacing;
+        gap: $kendo-toolbar-md-spacing;
         align-items: center;
         justify-content: flex-start;
         flex: 1 1 auto;
@@ -173,7 +173,7 @@
     .k-toolbar-items-list {
         display: flex;
         flex-flow: row wrap;
-        gap: $kendo-toolbar-spacing;
+        gap: $kendo-toolbar-md-spacing;
         align-items: center;
         justify-content: flex-start;
         flex: 1 1 auto;

package/scss/components/toolbar/_variables.scss

@@ -1,16 +1,13 @@
 // Toolbar
 
-$kendo-toolbar-padding-x: null !default;
 $kendo-toolbar-sm-padding-x: null !default;
 $kendo-toolbar-md-padding-x: null !default;
 $kendo-toolbar-lg-padding-x: null !default;
 
-$kendo-toolbar-padding-y: null !default;
 $kendo-toolbar-sm-padding-y: null !default;
 $kendo-toolbar-md-padding-y: null !default;
 $kendo-toolbar-lg-padding-y: null !default;
 
-$kendo-toolbar-spacing: null !default;
 $kendo-toolbar-sm-spacing: null !default;
 $kendo-toolbar-md-spacing: null !default;
 $kendo-toolbar-lg-spacing: null !default;

package/scss/components/treeview/_layout.scss

@@ -80,7 +80,7 @@
 
     // Treeview toggle
     .k-treeview-toggle {
-        margin-inline-start: -$kendo-treeview-indent;
+        margin-inline-start: calc( #{$kendo-treeview-indent} * -1);
         flex: none;
         display: inline-flex;
         flex-flow: row nowrap;
@@ -109,8 +109,8 @@
     // Treeview leaf
     .k-treeview-leaf {
         @include border-radius( $kendo-treeview-item-border-radius );
-        padding-block: $kendo-treeview-item-padding-y;
-        padding-inline: $kendo-treeview-item-padding-x;
+        padding-block: $kendo-treeview-md-item-padding-y;
+        padding-inline: $kendo-treeview-md-item-padding-x;
         border: $kendo-treeview-item-border-width solid transparent;
         text-decoration: none;
         display: inline-flex;

package/scss/components/treeview/_variables.scss

@@ -11,11 +11,9 @@ $kendo-treeview-md-line-height: null !default;
 $kendo-treeview-lg-line-height: null !default;
 $kendo-treeview-indent: null !default;
 
-$kendo-treeview-item-padding-x: null !default;
 $kendo-treeview-sm-item-padding-x: null !default;
 $kendo-treeview-md-item-padding-x: null !default;
 $kendo-treeview-lg-item-padding-x: null !default;
-$kendo-treeview-item-padding-y: null !default;
 $kendo-treeview-sm-item-padding-y: null !default;
 $kendo-treeview-md-item-padding-y: null !default;
 $kendo-treeview-lg-item-padding-y: null !default;