@progress/kendo-theme-default 5.0.0-beta.1 → 5.0.0-beta.5

package/scss/coloreditor/_variables.scss

@@ -18,9 +18,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
 
-$coloreditor-preview-gap: ( $coloreditor-spacer / 4 ) !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;

package/scss/colorgradient/_layout.scss

@@ -104,10 +104,6 @@
             z-index: 1;
         }
 
-        .k-slider-wrap > .k-slider-track {
-            height: $colorgradient-slider-vertical-size;
-        }
-
         .k-slider-selection {
             display: none;
         }

package/scss/colorpicker/_index.scss

@@ -2,8 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../utils/_flex.scss";
+@import "../input/_index.scss";
 @import "../button/_index.scss";
 @import "../colorpalette/_index.scss";
 @import "../colorgradient/_index.scss";

package/scss/colorpicker/_layout.scss

@@ -1,8 +1,13 @@
-@include exports("colorpicker/layout") {
+@include exports( "colorpicker/layout" ) {
 
     // Color picker
-    .k-colorpicker {
+    .k-color-picker {
         width: min-content;
     }
 
+    // Alias
+    .k-colorpicker {
+        @extend .k-color-picker;
+    }
+
 }

package/scss/colorpicker/_theme.scss

@@ -1,6 +1,6 @@
 @include exports( "colorpicker/theme" ) {
 
-    // Colorpicker
-    .k-colorpicker {}
+    // Color picker
+    .k-color-picker {}
 
 }

package/scss/colorpicker/_variables.scss

@@ -1,20 +1 @@
-// Colorpicker
-$colorpicker-font-family: $font-family !default;
-$colorpicker-font-size: $font-size !default;
-$colorpicker-line-height: $line-height !default;
-
-$colorpicker-bg: $kendo-button-bg !default;
-$colorpicker-text: $kendo-button-text !default;
-$colorpicker-border: $kendo-button-border !default;
-$colorpicker-gradient: $kendo-button-gradient !default;
-
-$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
-$colorpicker-hovered-text: $kendo-button-hover-text !default;
-$colorpicker-hovered-border: $kendo-button-hover-border !default;
-$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$colorpicker-focused-bg: null !default;
-$colorpicker-focused-text: null !default;
-$colorpicker-focused-border: null !default;
-$colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
+// Color picker

package/scss/combobox/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
     // Combobox
     .k-combobox {}

package/scss/combobox/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("combobox/theme") {
+@include exports( "combobox/theme" ) {
 
     // Combobox
     .k-combobox {}

package/scss/combobox/_variables.scss

@@ -1,31 +1 @@
-// Comboboxes
-$combobox-select-padding-x: 0px !default;
-$combobox-select-padding-y: 0px !default;
-
-$combobox-bg: $kendo-input-bg !default;
-$combobox-text: $kendo-input-text !default;
-$combobox-border: $kendo-input-border !default;
-
-$combobox-hovered-bg: $kendo-input-hover-bg !default;
-$combobox-hovered-text: $kendo-input-hover-text !default;
-$combobox-hovered-border: $kendo-input-hover-border !default;
-
-$combobox-focused-bg: $kendo-input-focus-bg !default;
-$combobox-focused-text: $kendo-input-focus-text !default;
-$combobox-focused-border: $kendo-input-focus-border !default;
-$combobox-focused-shadow: $kendo-input-focus-shadow !default;
-
-$combobox-select-bg: $kendo-button-bg !default;
-$combobox-select-text: $kendo-button-text !default;
-$combobox-select-border: $kendo-button-border !default;
-$combobox-select-gradient: $kendo-button-gradient !default;
-
-$combobox-select-hovered-bg: $kendo-button-hover-bg !default;
-$combobox-select-hovered-text: $kendo-button-hover-text !default;
-$combobox-select-hovered-border: $kendo-button-hover-border !default;
-$combobox-select-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$combobox-select-pressed-bg: $kendo-button-active-bg !default;
-$combobox-select-pressed-text: $kendo-button-active-text !default;
-$combobox-select-pressed-border: $kendo-button-active-border !default;
-$combobox-select-pressed-gradient: $kendo-button-active-gradient !default;
+// Combobox

package/scss/common/_loading.scss

@@ -1,17 +1,5 @@
 @include exports( "common/loading" ) {
 
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
     // Loading mask
     .k-loading-mask,
     .k-loading-image,
@@ -100,7 +88,7 @@
         content: "";
         // See https://github.com/telerik/kendo-themes/issues/1925
         border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
         font-size: 4em;
     }
 }

package/scss/dataviz/_variables.scss

@@ -1,7 +1,7 @@
 // Chart
 /// The first base series color and its light and dark shades.
 /// @group charts
-$series-a: #4b5ffa !default;
+$series-a: #ff6358 !default;
 $series-a-dark: mix(black, $series-a, 25%) !default;
 $series-a-darker: mix(black, $series-a, 50%) !default;
 $series-a-light: mix(white, $series-a, 25%) !default;
@@ -9,7 +9,7 @@ $series-a-lighter: mix(white, $series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$series-b: #ac58ff !default;
+$series-b: #ffe162 !default;
 $series-b-dark: mix(black, $series-b, 25%) !default;
 $series-b-darker: mix(black, $series-b, 50%) !default;
 $series-b-light: mix(white, $series-b, 25%) !default;
@@ -17,7 +17,7 @@ $series-b-lighter: mix(white, $series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$series-c: #ff5892 !default;
+$series-c: #4cd180 !default;
 $series-c-dark: mix(black, $series-c, 25%) !default;
 $series-c-darker: mix(black, $series-c, 50%) !default;
 $series-c-light: mix(white, $series-c, 25%) !default;
@@ -25,7 +25,7 @@ $series-c-lighter: mix(white, $series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$series-d: #ff6358 !default;
+$series-d: #4b5ffa !default;
 $series-d-dark: mix(black, $series-d, 25%) !default;
 $series-d-darker: mix(black, $series-d, 50%) !default;
 $series-d-light: mix(white, $series-d, 25%) !default;
@@ -33,7 +33,7 @@ $series-d-lighter: mix(white, $series-d, 50%) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$series-e: #ffe162 !default;
+$series-e: #ac58ff !default;
 $series-e-dark: mix(black, $series-e, 25%) !default;
 $series-e-darker: mix(black, $series-e, 50%) !default;
 $series-e-light: mix(white, $series-e, 25%) !default;
@@ -41,7 +41,7 @@ $series-e-lighter: mix(white, $series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$series-f: #4cd180 !default;
+$series-f: #ff5892 !default;
 $series-f-dark: mix(black, $series-f, 25%) !default;
 $series-f-darker: mix(black, $series-f, 50%) !default;
 $series-f-light: mix(white, $series-f, 25%) !default;

package/scss/dateinput/_index.scss

@@ -2,11 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../popup/_index.scss";
-@import "../icons/_index.scss";
 
 
 // Component

package/scss/dateinput/_variables.scss

@@ -1 +1 @@
-// Dateinput
+// Date input

package/scss/datepicker/_index.scss

@@ -2,11 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
-@import "../icons/_index.scss";
+@import "../calendar/_index.scss";
 
 
 // Component

package/scss/daterangepicker/_layout.scss

@@ -1,3 +1,33 @@
-@include exports("daterangepicker/layout") {
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterange-picker {
+        width: $kendo-input-default-width;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
+    }
+
+
+    // Angular specific
+    kendo-daterange {
+        // @extend .k-daterangepicker;
+    }
+
+
+    // React specific
+    .k-daterangepicker-wrap {
+        display: inherit;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+    }
+
+
+    // Alias
+    .k-daterangepicker {
+        @extend .k-daterange-picker;
+    }
 
 }

package/scss/datetimepicker/_index.scss

@@ -2,11 +2,13 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
-@import "../floating-label/_index.scss";
+@import "../button/_index.scss";
 @import "../popup/_index.scss";
-@import "../icons/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
 
 
 // Component

package/scss/datetimepicker/_layout.scss

@@ -1,6 +1,43 @@
-@include exports("datetimepicker/layout") {
+@include exports( "datetimepicker/layout" ) {
 
-    // Date time picker
-    .k-datetimepicker {}
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: $datetime-width;
+        overflow: hidden;
+    }
+
+    // Inner wrap
+    .k-datetime-calendar-wrap,
+    .k-datetime-time-wrap {
+        text-align: center;
+        flex: 0 0 $datetime-width;
+    }
+
+    // Tabs
+    .k-date-tab .k-datetime-selector {
+        transform: translateX(0);
+    }
+    .k-time-tab .k-datetime-selector {
+        transform: translateX(-100%);
+    }
+
+}
+
+@include exports( "datetimepicker/layout/rtl" ) {
+
+    .k-datetimepicker {
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-time-tab .k-datetime-selector {
+                transform: translateX(100%);
+            }
+        }
+    }
 
 }

package/scss/datetimepicker/_theme.scss

@@ -1,6 +1,6 @@
-@include exports("datetimepicker/theme") {
+@include exports( "datetimepicker/theme" ) {
 
-    // Date time picker
+    // Datetime picker
     .k-datetimepicker {}
 
 }

package/scss/datetimepicker/_variables.scss

@@ -1 +1,2 @@
-// Datetimepicker
+// DateTime
+$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;

package/scss/dropdownlist/_layout.scss

@@ -11,11 +11,26 @@
     // Dropdown operator
     .k-dropdown-operator {
         width: min-content;
+        flex: none;
         aspect-ratio: 1;
 
+        .k-input-button {
+            border-width: 0;
+        }
+        .k-input-button .k-button-icon {
+            width: auto;
+            aspect-ratio: 1;
+        }
+
         .k-input-inner {
             display: none;
         }
     }
 
+    // Alias
+    .k-dropdown,
+    .k-dropdownlist {
+        @extend .k-dropdown-list !optional;
+    }
+
 }

package/scss/editor/_layout.scss

@@ -153,6 +153,7 @@
     }
 
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -180,13 +181,10 @@
             top: 0;
             right: 0;
             visibility: hidden;
-        }
-        .k-overflow-anchor {
-            border-width: 0;
-            padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
-            height: $toolbar-inner-calc-size;
-            position: relative;
+
+            .k-overflow-anchor {
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -304,6 +302,7 @@
         }
     }
 
+
     // Find and replace dialog
     .k-editor-find-replace {
         .k-content {
@@ -326,10 +325,6 @@
             display: flex;
             flex-direction: column;
             padding: 10px 0 40px;
-
-            > span {
-                padding-bottom: $padding-y;
-            }
         }
 
         .k-matches-container {
@@ -560,6 +555,24 @@
             }
         }
 
+        // Generic widgets
+        .k-numerictextbox {
+            width: 10em;
+
+            & + .k-dropdown-list {
+                width: 5em;
+            }
+
+            & + .k-color-picker,
+            & + .k-dropdown-list {
+                margin-left: map-get( $spacing, 2 );
+            }
+        }
+
+        .k-color-picker {
+            vertical-align: middle;
+        }
+
         .k-edit-field > .k-checkbox {
             position: relative; // fix scrolling
         }

package/scss/fab/_layout.scss

@@ -9,9 +9,9 @@
         box-sizing: border-box;
         color: inherit;
         background-color: transparent;
-        font-size: $fab-font-size;
-        line-height: $fab-line-height;
-        font-family: $fab-font-family;
+        font-size: $kendo-fab-font-size;
+        line-height: $kendo-fab-line-height;
+        font-family: $kendo-fab-font-family;
         text-align: center;
         white-space: nowrap;
         display: inline-flex;
@@ -30,73 +30,39 @@
 
     // FAB Icon
     .k-fab-icon {
-        width: $fab-icon-width;
-        height: $fab-icon-height;
+        width: $kendo-fab-icon-width;
+        height: $kendo-fab-icon-height;
 
         &:not(:only-child) {
-            margin-right: $fab-icon-spacing;
-            margin-left: -$fab-icon-spacing;
+            margin-right: $kendo-fab-icon-spacing;
+            margin-left: -$kendo-fab-icon-spacing;
         }
     }
 
 
     // Sizes
     .k-fab-sm {
-        padding: $fab-padding-y-sm $fab-padding-x-sm;
+        padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
     }
     .k-fab-md {
-        padding: $fab-padding-y $fab-padding-x;
+        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $fab-padding-y-lg $fab-padding-x-lg;
+        padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
     }
 
-
     // Shapes
-    .k-fab-square {
-        border-radius: 0;
-
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-circle {
-        border-radius: 50%;
+    .k-fab-rectangle { }
 
-        &.k-fab-sm {
-            width: $fab-size-sm;
-            height: $fab-size-sm;
-        }
-        &.k-fab-md {
-            width: $fab-size-md;
-            height: $fab-size-md;
-        }
-        &.k-fab-lg {
-            width: $fab-size-lg;
-            height: $fab-size-lg;
-        }
-    }
-    .k-fab-pill {
-        border-radius: 5rem;
-    }
-    .k-fab-rounded {
-        @include border-radius( $fab-border-radius );
+    .k-fab-square {
+        aspect-ratio: 1;
     }
 
 
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $fab-items-padding-y $fab-items-padding-x;
+        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
         display: flex;
     }
 
@@ -141,19 +107,19 @@
     }
 
     .k-fab-item-text {
-        padding: $fab-item-text-padding-y $fab-item-text-padding-x;
-        border-width: $fab-item-text-border-width;
-        border-radius: $fab-item-text-border-radius;
-        font-size: $fab-item-text-font-size;
-        line-height: $fab-item-text-line-height;
+        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        border-width: $kendo-fab-item-text-border-width;
+        border-radius: $kendo-fab-item-text-border-radius;
+        font-size: $kendo-fab-item-text-font-size;
+        line-height: $kendo-fab-item-text-line-height;
     }
 
     .k-fab-item-icon {
-        width: $fab-item-icon-width;
-        height: $fab-item-icon-height;
-        padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
-        border-width: $fab-item-icon-border-width;
-        border-radius: $fab-item-icon-border-radius;
+        width: $kendo-fab-item-icon-width;
+        height: $kendo-fab-item-icon-height;
+        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        border-width: $kendo-fab-item-icon-border-width;
+        border-radius: $kendo-fab-item-icon-border-radius;
         box-sizing: content-box;
         outline: none;
     }