@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

package/scss/slider/_layout.scss

@@ -10,38 +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 {
-            right: 0;
-            top: 0;
-        }
-
-        .k-button-decrease {
-            left: 0;
-            top: 0;
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
         }
 
         .k-label {
@@ -83,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;
@@ -114,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%;
@@ -121,8 +103,7 @@
                 display: flex;
                 flex-flow: inherit;
                 justify-content: space-between;
-
-                &::after { display: none; }
+                user-select: none;
             }
             .k-tick {
                 flex: 0 0 1px;
@@ -134,7 +115,8 @@
         }
 
         &-horizontal {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
+                height: 26px;
 
                 .k-slider-track {
                     width: 100%;
@@ -186,7 +168,8 @@
         }
 
         &-vertical {
-            > .k-slider-track-wrap {
+            .k-slider-track-wrap {
+                width: 26px;
 
                 .k-slider-track {
                     height: 100%;
@@ -219,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;
@@ -238,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
 
@@ -301,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; }
@@ -357,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 {
@@ -368,11 +334,6 @@
         }
     }
 
-    .k-slider-wrap {
-        height: 100%;
-        width: 100%;
-    }
-
     .k-slider-track,
     .k-slider-selection {
         margin: 0;
@@ -394,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;
@@ -414,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;
         }
@@ -466,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 {
@@ -505,22 +419,19 @@
             margin-top: -$tooltip-callout-size / 2;
         }
     }
-}
-
-
 
 
-@include exports( "slider/layout/legacy" ) {
-
-    .k-no-flexbox .k-slider {
-
-        &-horizontal {
-            display: inline-block;
-        }
-        &-vertical {
-            display: inline-block;
-        }
-
+    // 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/scss/slider/_theme.scss

@@ -18,10 +18,6 @@
             @include fill( $bg: $slider-selection-bg );
         }
 
-        .k-button {
-            @include border-radius( 50% );
-        }
-
         .k-draghandle {
             @include fill(
                 $slider-draghandle-text,
@@ -65,12 +61,6 @@
         &.k-state-disabled {
             opacity: $slider-disabled-opacity;
         }
-
-        .k-slider-wrap {
-            &:focus {
-                outline: none;
-            }
-        }
     }
 
     .k-slider-horizontal .k-tick {

package/scss/slider/_variables.scss

@@ -18,22 +18,22 @@ $slider-draghandle-border-width: 1px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: null !default;
 
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
+$slider-draghandle-bg: $primary !default;
+$slider-draghandle-text: contrast-wcag( $primary  ) !default;
+$slider-draghandle-border: $primary  !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
+$slider-draghandle-hovered-bg: try-shade( $primary , .5 ) !default;
+$slider-draghandle-hovered-text: null !default;
+$slider-draghandle-hovered-border: $primary  !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
+$slider-draghandle-pressed-bg: try-shade( $primary , 1.5 ) !default;
+$slider-draghandle-pressed-text: null !default;
+$slider-draghandle-pressed-border: try-shade( $primary , 1.5 ) !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: $primary-button-focused-shadow !default;
+$slider-draghandle-focused-shadow: 0 0 0 2px rgba( $primary , .3 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;

package/scss/spreadsheet/_index.scss

@@ -8,7 +8,7 @@
 @import "../radio/_index.scss";
 @import "../colorpicker/_index.scss";
 @import "../combobox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../upload/_index.scss";
@@ -17,6 +17,7 @@
 @import "../tabstrip/_index.scss";
 @import "../treeview/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/spreadsheet/_layout.scss

@@ -50,14 +50,6 @@
         z-index: 2;
         top: 0;
         left: 0;
-
-        .k-button {}
-        .k-button:not(:hover) {
-            border-color: transparent;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-        }
     }
 
 
@@ -71,9 +63,11 @@
         margin: 0;
     }
     .k-spreadsheet-tabstrip .k-loading {
+        // TODO: better name
         display: none;
     }
-    .k-spreadsheet-tabstrip .k-content {
+    .k-spreadsheet-tabstrip .k-content,
+    .k-spreadsheet-tabstrip .k-tabstrip-content {
         @include border-radius( 0 );
         padding: 0;
         border-width: 0;
@@ -96,14 +90,13 @@
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
+
+        .k-input,
+        .k-picker {
+            width: 5em;
         }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+        .k-color-picker {
+            width: min-content;
         }
     }
 
@@ -124,18 +117,6 @@
         border-width: 0 1px 0 0;
         border-style: solid;
         border-color: inherit;
-
-        .k-combobox {
-            width: 100%;
-            font-size: inherit;
-        }
-        .k-combobox .k-dropdown-wrap {
-            @include border-radius( 0 );
-            border-width: 0;
-        }
-        .k-combobox .k-select {
-            @include border-radius( 0 );
-        }
     }
     .k-spreadsheet-formula-bar {
         border-color: inherit;
@@ -160,8 +141,8 @@
         }
 
         .k-spreadsheet-formula-input {
-            padding: $input-padding-y $input-padding-x;
-            line-height: $input-line-height;
+            padding: $kendo-input-padding-y $kendo-input-padding-x;
+            line-height: $kendo-input-line-height;
 
             &.k-spreadsheet-array-formula {
                 &::before {
@@ -200,7 +181,7 @@
         min-width: 100px;
 
         .k-item {
-            padding: $list-item-padding-y $list-item-padding-x;
+            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
         }
     }
     .k-syntax-func,
@@ -277,6 +258,7 @@
         font-family: Arial, Verdana, Sans-serif;
         flex: 1;
         position: relative;
+        overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
         .k-state-disabled {
@@ -635,38 +617,45 @@
         }
 
         // Details
-        .k-details {
+        .k-details,
+        .k-expander {
             padding: 0;
             border-width: 1px 0 0;
             border-style: solid;
             border-color: inherit;
         }
-        .k-details-summary {
-            padding: $padding-y;
+        .k-expander {
+            border: 0;
+            background: inherit;
+        }
+        .k-details-summary,
+        .k-columnmenu-item {
+            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            display: flex;
+            align-items: center;
             cursor: pointer;
 
             > .k-icon {
                 margin-right: $padding-y;
             }
         }
-        .k-details-content {
-            padding: $padding-y $padding-x $padding-y $filter-menu-padding-left;
-
-            > .k-textbox,
-            > .k-widget {
-                width: 100%;
-                margin-bottom: 3px;
-            }
-
-            .k-space-right {
-                background-image: none;
-            }
+        .k-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
+                width: min-content;
+                align-self: flex-start;
             }
         }
+
+        .k-actions {
+            margin: 0;
+            padding: 0;
+        }
     }
 
 }
@@ -683,17 +672,6 @@
             display: block;
         }
 
-        .k-button {
-            @include border-radius( 0 );
-            border-width: 0;
-            color: inherit;
-            background: none;
-        }
-        .k-button-icontext {
-            display: flex;
-            justify-content: flex-start;
-        }
-
         .k-reset-color,
         .k-custom-color {
             @include border-radius( 0 );
@@ -704,9 +682,6 @@
         }
         .k-reset-color { border-bottom-width: 1px; }
         .k-custom-color { border-top-width: 1px; }
-        .k-spreadsheet-color-palette {
-            padding: $popup-padding-y;
-        }
         .k-spreadsheet-border-type-palette {
             width: 12.5rem;
             height: 5rem;

package/scss/spreadsheet/_theme.scss

@@ -126,28 +126,28 @@
     }
     .k-spreadsheet-filter {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        box-shadow: inset 0 0 0 1px $button-border;
+        box-shadow: inset 0 0 0 1px $kendo-button-border;
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
 
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
         }
     }
@@ -161,8 +161,8 @@
 
             .k-item.k-state-hover {
                 @include fill(
-                    $list-item-hovered-text,
-                    $list-item-hovered-bg
+                    $kendo-list-item-hover-text,
+                    $kendo-list-item-hover-bg
                 );
             }
         }
@@ -191,16 +191,16 @@
         .k-button:hover,
         .k-button.k-state-hover {
             @include fill(
-                $list-item-hovered-text,
-                $list-item-hovered-bg
+                $kendo-list-item-hover-text,
+                $kendo-list-item-hover-bg
             );
         }
         .k-button:active,
         .k-button.k-state-active,
         .k-button.k-state-selected {
             @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
             );
         }