@progress/kendo-theme-default 5.0.0-next.2 → 5.0.0

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

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/dateinput/_layout.scss

@@ -0,0 +1,6 @@
+@include exports("dateinput/layout") {
+
+    // Date input
+    .k-dateinput {}
+
+}

package/scss/dateinput/_theme.scss

@@ -0,0 +1,6 @@
+@include exports("dateinput/theme") {
+
+    // Date input
+    .k-dateinput {}
+
+}

package/scss/dateinput/_variables.scss

@@ -0,0 +1 @@
+// Date input

package/scss/datepicker/_index.scss

@@ -0,0 +1,13 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../popup/_index.scss";
+@import "../calendar/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datepicker/_layout.scss

@@ -0,0 +1,6 @@
+@include exports("datepicker/layout") {
+
+    // Date picker
+    .k-datepicker {}
+
+}

package/scss/datepicker/_theme.scss

@@ -0,0 +1,6 @@
+@include exports("datepicker/theme") {
+
+    // Date picker
+    .k-datepicker {}
+
+}

package/scss/datepicker/_variables.scss

@@ -0,0 +1 @@
+// Datepicker

package/scss/{datetime → daterangepicker}/_index.scss

@@ -3,11 +3,10 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
 @import "../popup/_index.scss";
+@import "../icons/_index.scss";
 
 
 // Component

package/scss/daterangepicker/_layout.scss

@@ -0,0 +1,39 @@
+@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 );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // 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/daterangepicker/_theme.scss

@@ -0,0 +1,3 @@
+@include exports("daterangepicker/theme") {
+
+}

package/scss/daterangepicker/_variables.scss

@@ -0,0 +1 @@
+// Daterangepicker

package/scss/datetimepicker/_index.scss

@@ -0,0 +1,17 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../button/_index.scss";
+@import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../calendar/_index.scss";
+@import "../timeselector/_index.scss";
+@import "../action-buttons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datetimepicker/_layout.scss

@@ -0,0 +1,56 @@
+@include exports( "datetimepicker/layout" ) {
+
+    // Datetime container
+    .k-datetime-container {}
+
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: $datetime-width;
+        overflow: hidden;
+
+        .k-datetime-buttongroup {
+            padding: $actions-padding-y $actions-padding-x;
+        }
+
+        .k-calendar,
+        .k-timeselector {
+            width: 100%;
+            border-width: 0;
+        }
+    }
+
+    // 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

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

package/scss/datetimepicker/_variables.scss

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

package/scss/drawer/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../overlay/_index.scss";
 @import "../toolbar/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/drawer/_layout.scss

@@ -2,8 +2,7 @@
 
     .k-drawer-container {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         align-items: flex-start;
     }
     kendo-drawer.k-drawer,
@@ -27,6 +26,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Borders
         .k-drawer-mini &.k-drawer-start,
         .k-drawer-expanded &.k-drawer-start,
@@ -130,8 +135,7 @@
         font-size: $drawer-item-font-size;
         line-height: $drawer-item-line-height;
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         cursor: pointer;
 
         > .k-drawer-link {
@@ -139,8 +143,7 @@
             padding: $drawer-item-padding-y $drawer-item-padding-x;
             color: inherit;
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
+            flex-flow: row nowrap;
             flex: 1 0 auto;
         }
 

package/scss/drawer/_variables.scss

@@ -27,7 +27,7 @@ $drawer-hovered-bg: $hovered-bg !default;
 $drawer-hovered-text: $hovered-text !default;
 
 $drawer-focused-bg: $drawer-bg !default;
-$drawer-focused-shadow: $list-item-focused-shadow !default;
+$drawer-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $drawer-selected-bg: $selected-bg !default;
 $drawer-selected-text: $selected-text !default;

package/scss/dropdowngrid/_layout.scss

@@ -1,4 +1,8 @@
 @include exports("dropdowngrid/layout") {
+
+    // Dropdown grid
+    .k-dropdown-grid {}
+
     .k-dropdowngrid-popup {
         overflow: hidden;
     }
@@ -12,6 +16,8 @@
 
     // Grid list
     .k-grid-list {
+        margin: 0;
+        padding: 0;
         width: 100%;
         max-width: none;
         border-width: 0;
@@ -21,12 +27,13 @@
         empty-cells: show;
         outline: none;
         display: table;
+        list-style: none;
     }
 
 
     // Header
     .k-dropdowngrid-popup .k-grid-header {
-        border-width: 0 0 1px 0;
+        border-width: 0 0 1px;
         border-style: solid;
         border-color: inherit;
         font-size: $grid-header-font-size;
@@ -115,12 +122,10 @@
         margin: 0;
         padding: $grid-header-padding-y $grid-header-padding-x;
         min-height: auto;
+        font-size: inherit;
         text-align: left;
         font-weight: bold;
     }
-    .k-dropdowngrid-popup .k-outer-group-header.k-first {
-        border-bottom-width: 1px;
-    }
     .k-grid-list > .k-item.k-first {
         border-top: 1px solid currentColor;
     }
@@ -135,7 +140,7 @@
     }
     .k-grid-list > .k-item > .k-group-cell > span {
         padding: 0 ($grid-cell-padding-x / 2);
-        font-size: .875em;
+        font-size: .75em;
         position: absolute;
         top: 0;
         right: 0;
@@ -157,7 +162,7 @@
     // Footer
     .k-dropdowngrid-popup .k-footer {
         padding: $grid-footer-padding-y $grid-footer-padding-x;
-        border-width: 1px 0 0 0;
+        border-width: 1px 0 0;
         border-style: solid;
         text-align: left;
         white-space: nowrap;

package/scss/dropdowngrid/_theme.scss

@@ -1,5 +1,8 @@
 @include exports("dropdowngrid/theme") {
 
+    // Dropdown grid
+    .k-dropdown-grid {}
+
     // Dropdowngrid
     .k-dropdowngrid-popup {
         border-color: $grid-border;
@@ -27,11 +30,16 @@
 
     // Group header
     .k-dropdowngrid-popup .k-group-header,
-    .k-dropdowngrid-popup .k-outer-group-header.k-first {
+    .k-dropdowngrid-popup .k-outer-group-header {
         border-color: $grid-header-border;
         color: $grid-header-text;
         background-color: $grid-header-bg;
     }
+    .k-grid-list > .k-group-header,
+    .k-grid-list > .k-outer-group-header {
+        background: none;
+        box-shadow: none;
+    }
 
 
     // Alt
@@ -39,7 +47,6 @@
         background-color: $grid-alt-bg;
     }
     .k-grid-list > .k-outer-group-header:nth-child(2n) {
-        background: none;
 
         > strong {
             background-color: $grid-alt-bg;

package/scss/dropdownlist/_index.scss

@@ -6,6 +6,7 @@
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/dropdownlist/_layout.scss

@@ -1,117 +1,36 @@
 @include exports("dropdownlist/layout") {
 
-    .k-dropdown {
-        width: $input-default-width;
-        border-width: 0;
-        outline: 0;
-        background: none;
-        box-sizing: border-box;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+    // Dropdown list
+    .k-dropdown-list {}
 
-        .k-dropdown-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            display: flex;
-            flex-flow: row nowrap;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: pointer;
-            outline: 0;
-
-
-            // Input
-            .k-input {}
-
-
-            // Select
-            .k-select {
-                @include border-right-radius-only( $input-border-radius );
-                padding: $picker-select-padding-y $picker-select-padding-x;
-                width: if( $use-picker-select-width, $button-inner-calc-size, null );
-                border-width: 0;
-                box-sizing: border-box;
-                border-style: solid;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 auto;
-                text-align: center;
-                cursor: pointer;
-            }
-
-            // Clear value
-            .k-clear-value {
-                visibility: hidden;
-            }
-            &.k-state-focused,
-            &.k-state-hover,
-            &:hover {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-        }
-
-    }
-
-
-    // RTL
-
-    .k-dropdown.k-rtl,
-    .k-dropdown[dir="rtl"],
-    .k-rtl .k-dropdown,
-    [dir="rtl"] .k-dropdown {
-        text-align: right;
-
-        .k-select {
-            @include border-left-radius-only( $input-border-radius );
-        }
-    }
 
+    // Native select
+    select.k-dropdown-list {}
 
 
     // Dropdown operator
     .k-dropdown-operator {
-        width: auto;
+        width: min-content;
+        flex: none;
+        aspect-ratio: 1;
 
-        .k-dropdown-wrap {
-            .k-input {
-                display: none;
-            }
-            .k-select {
-                width: $button-inner-calc-size;
-                height: $button-inner-calc-size;
-            }
+        .k-input-button {
+            border-width: 0;
+        }
+        .k-input-button .k-button-icon {
+            width: auto;
+            aspect-ratio: 1;
         }
 
+        .k-input-inner {
+            display: none;
+        }
     }
 
-
-    // Native select
-    select.k-dropdown {
-        @include border-radius( $input-border-radius );
-        padding: $input-padding-y $input-padding-x;
-        border-width: 1px;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        transition: all .1s ease; // sass-lint:disable-block no-transition-all
-        cursor: pointer;
+    // Alias
+    .k-dropdown,
+    .k-dropdownlist {
+        @extend .k-dropdown-list !optional;
     }
 
 }

package/scss/dropdownlist/_theme.scss

@@ -1,97 +1,9 @@
 @include exports( "dropdownlist/theme" ) {
 
-    .k-dropdown {
-
-        .k-dropdown-wrap {
-            @include fill(
-                $dropdownlist-text,
-                $dropdownlist-bg,
-                $dropdownlist-border,
-                $dropdownlist-gradient
-            );
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $dropdownlist-hovered-text,
-                    $dropdownlist-hovered-bg,
-                    $dropdownlist-hovered-border,
-                    $dropdownlist-hovered-gradient
-                );
-            }
-
-            &.k-state-active {}
-
-            // Focused state
-            &.k-state-focused {
-                @include fill(
-                    $dropdownlist-focused-text,
-                    $dropdownlist-focused-bg,
-                    $dropdownlist-focused-border,
-                    $dropdownlist-focused-gradient
-                );
-                @include box-shadow($dropdownlist-focused-shadow);
-            }
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            > .k-dropdown-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-    }
+    // Dropdown list
+    .k-dropdown-list {}
 
     // Native select
-    select.k-dropdown {
-        @include fill(
-            $dropdownlist-text,
-            $dropdownlist-bg,
-            $dropdownlist-border,
-            $dropdownlist-gradient
-        );
-
-        // Hover state
-        &:hover {
-            @include fill(
-                $dropdownlist-hovered-text,
-                $dropdownlist-hovered-bg,
-                $dropdownlist-hovered-border,
-                $dropdownlist-hovered-gradient
-            );
-        }
-
-        // Focused state
-        &:focus {
-            @include fill(
-                $dropdownlist-focused-text,
-                $dropdownlist-focused-bg,
-                $dropdownlist-focused-border,
-                $dropdownlist-focused-gradient
-            );
-            @include box-shadow($dropdownlist-focused-shadow);
-        }
-    }
+    select.k-dropdown-list {}
 
 }