@progress/kendo-theme-classic 4.43.1-dev.5 → 4.44.0

package/modules/@progress/kendo-theme-default/scss/slider/_layout.scss

@@ -10,40 +10,15 @@
         line-height: $slider-line-height;
         background: none;
         display: inline-flex;
-        align-items: stretch;
+        align-items: center;
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-button {
-            height: $slider-button-size;
-            line-height: $slider-button-size;
-            margin: 0;
-            min-width: 0;
-            outline: 0;
-            padding: 0;
-            position: absolute;
-            width: $slider-button-size;
-            box-sizing: content-box;
-
-            .k-icon,
-            .k-button-icon {
-                vertical-align: baseline;
-                line-height: $slider-button-size;
-                height: 100%;
-            }
-        }
-
-        .k-button-increase {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-
-        .k-button-decrease {
-            position: absolute;
-            left: 0;
-            top: 0;
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
         }
 
         .k-label {
@@ -85,30 +60,32 @@
                 left: auto;
                 right: 0;
             }
+        }
+    }
 
-            .k-button-increase {
-                left: 0;
-                right: auto;
-            }
 
-            .k-button-decrease {
-                right: 0;
-                left: auto;
-            }
-        }
+    // Slider wrap
+    .k-slider-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+        position: relative;
     }
 
 
     // New rendering
     .k-slider {
+        width: min-content;
+        height: min-content;
         gap: calc( #{$slider-draghandle-size} / 2 );
 
-        > .k-button {
-            position: relative;
-            flex-shrink: 0;
-            align-self: center;
+        .k-button {
+            flex: none;
         }
-        > .k-slider-track-wrap {
+        .k-slider-track-wrap {
             flex: 1 1 auto;
             display: flex;
             flex-flow: inherit;
@@ -116,6 +93,9 @@
             touch-action: none;
 
             .k-slider-items {
+                margin: 0;
+                padding: 0;
+                list-style: none;
                 // For some reason, Safari does not understand `flex-basis: 100%`
                 // See telerik/kendo-themes#2197
                 // flex-basis: 100%;
@@ -123,8 +103,7 @@
                 display: flex;
                 flex-flow: inherit;
                 justify-content: space-between;
-
-                &::after { display: none; }
+                user-select: none;
             }
             .k-tick {
                 flex: 0 0 1px;
@@ -136,7 +115,8 @@
         }
 
         &-horizontal {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
+                height: 26px;
 
                 .k-slider-track {
                     width: 100%;
@@ -188,7 +168,8 @@
         }
 
         &-vertical {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
+                width: 26px;
 
                 .k-slider-track {
                     height: 100%;
@@ -221,14 +202,8 @@
     // Slider vertical
     .k-slider-vertical {
         height: $slider-size;
-        width: $slider-alt-size;
         flex-flow: column-reverse nowrap;
 
-        .k-button-decrease {
-            bottom: 0;
-            top: auto;
-        }
-
         .k-tick {
             text-align: right;
             margin-left: 2px;
@@ -240,32 +215,32 @@
 
         // ticks
 
-        .k-tick { background-position: -92px center; }
-        .k-slider-topleft .k-tick { background-position: -122px center; }
-        .k-slider-bottomright .k-tick { background-position: -152px center; }
+        .k-tick { background-position: -94px center; }
+        .k-slider-topleft .k-tick { background-position: -124px center; }
+        .k-slider-bottomright .k-tick { background-position: -154px center; }
 
         .k-tick-large {
             display: flex;
             align-items: center;
-            background-position: -2px center;
+            background-position: -4px center;
         }
 
-        .k-slider-topleft .k-tick-large { background-position: -32px center; }
-        .k-slider-bottomright .k-tick-large { background-position: -62px center; }
+        .k-slider-topleft .k-tick-large { background-position: -34px center; }
+        .k-slider-bottomright .k-tick-large { background-position: -64px center; }
 
-        .k-first { background-position: -92px 100%; }
-        .k-tick-large.k-first { background-position: -2px 100%; }
-        .k-slider-topleft .k-first { background-position: -122px 100%; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: -32px 100%; }
-        .k-slider-bottomright .k-first { background-position: -152px 100%; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: -62px 100%; }
+        .k-first { background-position: -94px 100%; }
+        .k-tick-large.k-first { background-position: -4px 100%; }
+        .k-slider-topleft .k-first { background-position: -124px 100%; }
+        .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
+        .k-slider-bottomright .k-first { background-position: -154px 100%; }
+        .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
 
-        .k-last { background-position: -92px 0; }
-        .k-tick-large.k-last { background-position: -2px 0; }
-        .k-slider-topleft .k-last { background-position: -122px 0; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: -32px 0; }
-        .k-slider-bottomright .k-last { background-position: -152px 0; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: -62px 0; }
+        .k-last { background-position: -94px 0; }
+        .k-tick-large.k-last { background-position: -4px 0; }
+        .k-slider-topleft .k-last { background-position: -124px 0; }
+        .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
+        .k-slider-bottomright .k-last { background-position: -154px 0; }
+        .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
 
         // labels
 
@@ -303,17 +278,9 @@
 
     // Slider horizontal
     .k-slider-horizontal {
-        height: $slider-alt-size;
         width: $slider-size;
         flex-flow: row nowrap;
 
-        // ticks
-        .k-tick {
-            float: left;
-            height: 100%;
-            text-align: center;
-        }
-
         .k-tick { background-position: center -92px; }
         .k-slider-topleft .k-tick { background-position: center -122px; }
         .k-slider-bottomright .k-tick { background-position: center -152px; }
@@ -359,9 +326,6 @@
                 right: 0;
                 left: auto;
             }
-            .k-slider-buttons .k-slider-track {
-                right: $slider-button-spacing;
-            }
 
             .k-button .k-i-arrow-e,
             .k-button .k-i-arrow-w {
@@ -370,11 +334,6 @@
         }
     }
 
-    .k-slider-wrap {
-        height: 100%;
-        width: 100%;
-    }
-
     .k-slider-track,
     .k-slider-selection {
         margin: 0;
@@ -396,16 +355,6 @@
         }
     }
 
-    .k-slider-buttons .k-slider-track {
-        .k-slider-horizontal & {
-            left: $slider-button-spacing;
-        }
-
-        .k-slider-vertical & {
-            bottom: $slider-button-spacing;
-        }
-    }
-
 
     .k-draghandle {
         background-color: transparent;
@@ -416,30 +365,9 @@
         position: absolute;
         text-align: center;
         text-decoration: none;
-        box-sizing: content-box;
         width: $slider-draghandle-size;
         height: $slider-draghandle-size;
 
-        .k-slider-horizontal & {
-            top: 50%;
-            transform: translateY(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateY(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
-        .k-slider-vertical & {
-            left: 50%;
-            transform: translateX(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateX(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
         .k-slider-transitions.k-slider-horizontal & {
             transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
         }
@@ -468,34 +396,18 @@
     }
 
 
-    .k-slider-items {
-        user-select: none;
-
-        .k-slider-buttons & {
-            margin-left: $slider-button-spacing;
-        }
-
-        .k-slider-horizontal & {
-            height: 100%;
-            padding: 2px 0;
-            box-sizing: border-box;
-        }
-
-        .k-slider-vertical & {
-            padding-top: 1px;
-        }
-
-        .k-slider-vertical .k-slider-buttons & {
-            margin: 0;
-            padding-top: $slider-button-spacing;
+    // Slider readonly
+    .k-slider.k-readonly {
+        .k-button,
+        .k-slider-track,
+        .k-tick,
+        .k-draghandle {
+            pointer-events: none;
         }
     }
-    .k-slider-items::after {
-        content: "";
-        display: block;
-        clear: both;
-    }
 
+
+    // Slider tooltip
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
@@ -507,4 +419,19 @@
             margin-top: -$tooltip-callout-size / 2;
         }
     }
+
+
+    // Angular specific
+    .k-slider kendo-resize-sensor {
+        position: absolute;
+    }
+    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
+        padding-left: calc( #{$slider-draghandle-size} / 2 );
+        padding-right: calc( #{$slider-draghandle-size} / 2 );
+    }
+    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
+        padding-top: calc( #{$slider-draghandle-size} / 2 );
+        padding-bottom: calc( #{$slider-draghandle-size} / 2 );
+    }
+
 }

package/modules/@progress/kendo-theme-default/scss/slider/_theme.scss

@@ -65,12 +65,6 @@
         &.k-state-disabled {
             opacity: $slider-disabled-opacity;
         }
-
-        .k-slider-wrap {
-            &:focus {
-                outline: none;
-            }
-        }
     }
 
     .k-slider-horizontal .k-tick {

package/modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss

@@ -71,6 +71,7 @@
         margin: 0;
     }
     .k-spreadsheet-tabstrip .k-loading {
+        // TODO: better name
         display: none;
     }
     .k-spreadsheet-tabstrip .k-content,

package/modules/@progress/kendo-theme-default/scss/stepper/_layout.scss

@@ -19,6 +19,12 @@
         color: inherit;
         background: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Step list
         .k-step-list {
@@ -68,7 +74,6 @@
             transition-property: color, background-color, border-color;
             transition-duration: .4s;
             transition-timing-function: ease-in-out;
-            box-sizing: content-box;
 
             &::after {
                 @include border-radius( 100% );

package/modules/@progress/kendo-theme-default/scss/switch/_layout.scss

@@ -9,14 +9,20 @@
         display: inline-flex;
         align-items: center;
         vertical-align: middle;
-        font-family: $font-family;
-        font-size: $font-size-xs;
-        line-height: $line-height;
+        font-family: $switch-font-family;
+        font-size: $switch-font-size;
+        line-height: 1;
         user-select: none;
         text-align: left;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         [type="checkbox"] {
             display: none;
         }
@@ -26,11 +32,9 @@
         }
     }
 
-    .k-switch,
-    .k-switch-container,
-    .k-switch-handle {
-        box-sizing: border-box;
-    }
+    // .k-switch,
+    // .k-switch-container,
+    // .k-switch-handle {}
 
 
     // Switch track
@@ -90,7 +94,8 @@
 
     // RTL
     .k-rtl .k-switch,
-    .k-switch[dir = "rtl"] {
+    [dir="rtl"] .k-switch,
+    .k-switch[dir="rtl"] {
         &.k-switch-on .k-switch-handle {
             left: $switch-thumb-start-x;
         }

package/modules/@progress/kendo-theme-default/scss/switch/_variables.scss

@@ -2,17 +2,22 @@
 $switch-size: 60px !default;
 $switch-border-radius: 9999px !default;
 
+/// Font family of the switch.
+/// @group switch
 $switch-font-family: $font-family !default;
 $switch-font-size: $font-size-xs !default;
-$switch-line-height: $line-height !default;
 
 $switch-track-size: null !default;
+/// Border width of the switch track.
+/// @group switch
 $switch-container-border-width: null !default;
 $switch-container-padding-x: 0px !default;
 $switch-container-padding-y: 0px !default;
 
 $switch-handle-size: 30px !default;
 $switch-handle-border-radius: 9999px !default;
+/// Border width of the switch thumb.
+/// @group switch
 $switch-handle-border-width: 1px !default;
 $switch-thumb-start-x: 0px !default;
 // TODO: Remove width property from jQuery and Blazor, and do not use 100% for thumb X calc
@@ -20,65 +25,154 @@ $switch-thumb-end-x: calc( 100% - #{$switch-handle-size} ) !default;
 
 $switch-label-offset: 8px !default;
 $switch-label-width: calc( 100% - (#{$switch-handle-size} + #{$switch-label-offset} + #{$switch-container-padding-x} ) ) !default;
+/// Text transform of the switch label.
+/// @group switch
 $switch-label-text-transform: uppercase !default;
+/// Display of the switch label.
+/// @group switch
 $switch-label-display: inline !default;
 
 $switch-container-shadow: inset 0 0 0 1px $base-border !default;
 $switch-container-hovered-shadow: inset 0 0 0 1px $hovered-border !default;
 $switch-container-focused-shadow: inset 0 0 0 3px rgba( black, .06) !default;
 
-$switch-on-bg: $primary !default;
-$switch-on-text: contrast-wcag( $switch-on-bg ) !default;
-$switch-on-border: null !default;
-$switch-on-gradient: null !default;
-$switch-on-shadow: null !default;
-
-$switch-on-hovered-bg: shade( $switch-on-bg ) !default;
-$switch-on-hovered-text: $switch-on-text !default;
-$switch-on-hovered-border: null !default;
-$switch-on-hovered-gradient: null !default;
-
-$switch-on-focused-bg: null !default;
-$switch-on-focused-text: null !default;
-$switch-on-focused-border: null !default;
-$switch-on-focused-gradient: null !default;
-$switch-on-focused-shadow: null !default;
-
-$switch-on-handle-bg: darken( white, 5 ) !default;
-$switch-on-handle-text: $switch-on-text !default;
-$switch-on-handle-border: $base-border !default;
-$switch-on-handle-gradient: null !default;
-$switch-on-handle-shadow: null !default;
-
-$switch-on-handle-hovered-bg: darken( white, 7 ) !default;
-$switch-on-handle-hovered-text: $switch-on-text !default;
-$switch-on-handle-hovered-border: $hovered-border !default;
-$switch-on-handle-hovered-gradient: null !default;
-
+/// The background of the track when the switch is not checked.
+/// @group switch
 $switch-off-bg: $component-bg !default;
+/// The text color of the track when the switch is not checked.
+/// @group switch
 $switch-off-text: $component-text !default;
+/// The border color of the track when the switch is not checked.
+/// @group switch
 $switch-off-border: null !default;
+/// The background gradient of the track when the switch is not checked.
+/// @group switch
 $switch-off-gradient: null !default;
 $switch-off-shadow: null !default;
 
+/// The background of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-bg: $switch-off-bg !default;
+/// The text color of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-text: $switch-off-text !default;
+/// The border color of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-border: null !default;
+/// The background gradient of the track when the hovered switch is not checked.
+/// @group switch
 $switch-off-hovered-gradient: null !default;
 
+/// The background of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-bg: null !default;
+/// The text color of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-text: null !default;
+/// The border color of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-border: null !default;
+/// The background gradient of the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-gradient: null !default;
+/// The ring around the track when the focused switch is not checked.
+/// @group switch
 $switch-off-focused-shadow: null !default;
 
-$switch-off-handle-bg: $switch-on-handle-bg !default;
+/// The background of the thumb when the switch is not checked.
+/// @group switch
+$switch-off-handle-bg: darken( white, 5 ) !default;
+/// The text color of the thumb when the switch is not checked.
+/// @group switch
 $switch-off-handle-text: $switch-off-text !default;
-$switch-off-handle-border: $switch-on-handle-border !default;
+/// The border color of the thumb when the switch is not checked.
+/// @group switch
+$switch-off-handle-border: $base-border !default;
+/// The background gradient of the thumb when the switch is not checked.
+/// @group switch
 $switch-off-handle-gradient: null !default;
 $switch-off-handle-shadow: null !default;
 
-$switch-off-handle-hovered-bg: $switch-on-handle-hovered-bg !default;
+/// The background of the thumb when the hovered switch is not checked.
+/// @group switch
+$switch-off-handle-hovered-bg: darken( white, 7 ) !default;
+/// The text color of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-text: $switch-off-text !default;
-$switch-off-handle-hovered-border: $switch-on-handle-hovered-border !default;
+/// The border color of the thumb when the hovered switch is not checked.
+/// @group switch
+$switch-off-handle-hovered-border: $hovered-border !default;
+/// The background gradient of the thumb when the hovered switch is not checked.
+/// @group switch
 $switch-off-handle-hovered-gradient: null !default;
+
+
+/// The background of the track when the switch is checked.
+/// @group switch
+$switch-on-bg: $primary !default;
+/// The text color of the track when the switch is checked.
+/// @group switch
+$switch-on-text: contrast-wcag( $switch-on-bg ) !default;
+/// The border color of the track when the switch is checked.
+/// @group switch
+$switch-on-border: null !default;
+/// The background gradient of the track when the switch is checked.
+/// @group switch
+$switch-on-gradient: null !default;
+$switch-on-shadow: null !default;
+
+/// The background of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-bg: shade( $switch-on-bg ) !default;
+/// The text color of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-text: $switch-on-text !default;
+/// The border color of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-border: null !default;
+/// The background gradient of the track wen the hovered switch is checked.
+/// @group switch
+$switch-on-hovered-gradient: null !default;
+
+/// The background of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-bg: null !default;
+/// The text color of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-text: null !default;
+/// The border color of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-border: null !default;
+/// The background gradient of the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-gradient: null !default;
+/// The ring around the track wen the focused switch is checked.
+/// @group switch
+$switch-on-focused-shadow: null !default;
+
+/// The background of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-bg: $switch-off-handle-bg !default;
+/// The text color of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-text: $switch-on-text !default;
+/// The border color of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-border: $switch-off-handle-border !default;
+/// The background gradient of the thumb when the switch is checked.
+/// @group switch
+$switch-on-handle-gradient: null !default;
+$switch-on-handle-shadow: null !default;
+
+/// The background of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-bg: $switch-off-handle-hovered-bg !default;
+/// The text color of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-text: $switch-on-text !default;
+/// The border color of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-border: $switch-off-handle-hovered-border !default;
+/// The background gradient of the thumb when the hovered switch is checked.
+/// @group switch
+$switch-on-handle-hovered-gradient: null !default;