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

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/daterangepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_index.scss";
+@import "../popup/_index.scss";
+@import "../icons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/daterangepicker/_layout.scss

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

package/scss/daterangepicker/_theme.scss

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

package/scss/daterangepicker/_variables.scss

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

package/scss/datetime/_layout.scss

@@ -1,257 +1,5 @@
 @include exports("datetime/layout") {
 
-    // Dateinput
-    .k-dateinput {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-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;
-
-        .k-dateinput-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-input-border-radius );
-            padding: 0;
-            width: $kendo-input-spinner-width;
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
-            flex: 1 1 auto;
-            display: block;
-            overflow: hidden;
-            position: relative;
-
-            .k-icon {
-                position: absolute;
-                right: 50%;
-                transform: translateX(50%);
-            }
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-
-
-        // Nested dateinput
-        .k-picker-wrap & {
-            margin: 0 !important; // sass-lint:disable-line no-important
-            width: 100%;
-            flex: 1 1 auto;
-
-            .k-dateinput-wrap {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0;
-                box-shadow: none !important; // sass-lint:disable-line no-important
-            }
-
-            [dir="rtl"] &,
-            .k-rtl & {
-                .k-dateinput-wrap {
-                    @include border-right-radius-only( $kendo-input-border-radius );
-                }
-            }
-
-        }
-    }
-
-
-    // Datepicker / timepicker
-    .k-datepicker,
-    .k-timepicker {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrapper
-        .k-picker-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $kendo-input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-input-border-radius );
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $picker-select-calc-size, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
-
-
-    // Datetimepicker
-    .k-datetimepicker {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        background: none;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // Wrappers
-        .k-picker-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-input-border-radius );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            outline: 0;
-            display: flex;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-        .k-link {
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $kendo-button-inner-calc-size, null );
-            height: 100%;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $kendo-input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
-
     .k-datetime-container {
 
         .k-datetime-wrap {
@@ -453,7 +201,6 @@
         z-index: 1;
         border-width: $time-highlight-size 0;
         border-style: solid;
-        border-radius: .1px; // workaround for https://bugs.webkit.org/show_bug.cgi?id=175117
     }
 
     .k-time-container .k-scrollable-placeholder {

package/scss/datetime/_theme.scss

@@ -1,103 +1,5 @@
 @include exports("datetime/theme") {
 
-    // Common
-    .k-datepicker,
-    .k-timepicker,
-    .k-datetimepicker,
-    .k-dateinput {
-
-        .k-select {
-            @include fill(
-                $datetime-select-text,
-                $datetime-select-bg,
-                $datetime-select-border,
-                $datetime-select-gradient
-            );
-        }
-
-        .k-i-warning {
-            color: $error;
-        }
-    }
-
-
-    .k-datepicker .k-picker-wrap,
-    .k-timepicker .k-picker-wrap,
-    .k-datetimepicker .k-picker-wrap,
-    .k-dateinput .k-dateinput-wrap {
-        @include fill(
-            $datetime-text,
-            $datetime-bg,
-            $datetime-border
-        );
-
-        // Hovered state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $datetime-hovered-text,
-                $datetime-hovered-bg,
-                $datetime-hovered-border
-            );
-        }
-
-        // Selected state
-        &.k-state-focused,
-        &.k-state-active {
-            @include fill(
-                $datetime-focused-text,
-                $datetime-focused-bg,
-                $datetime-focused-border
-            );
-            @include box-shadow($datetime-focused-shadow);
-        }
-    }
-
-    .k-datepicker,
-    .k-timepicker {
-
-        .k-select:hover,
-        .k-select.k-state-hover {
-            @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
-            );
-        }
-    }
-
-
-    .k-dateinput,
-    .k-datetimepicker {
-
-        .k-link:hover,
-        .k-link.k-state-hover {
-            @include fill(
-                $datetime-select-hovered-text,
-                $datetime-select-hovered-bg,
-                $datetime-select-hovered-border,
-                $datetime-select-hovered-gradient
-            );
-        }
-
-        .k-link:active,
-        .k-link.k-state-active,
-        .k-link.k-state-selected {
-            @include fill(
-                $datetime-select-pressed-text,
-                $datetime-select-pressed-bg,
-                $datetime-select-pressed-border,
-                $datetime-select-pressed-gradient
-            );
-        }
-    }
-
-
-    // Timepicker
-    .k-timepicker {}
-
-
     // Timepicker header
     .k-time-header {
 
@@ -165,133 +67,4 @@
         }
     }
 
-    .k-datepicker,
-    .k-datetimepicker,
-    .k-timepicker {
-        .k-picker-wrap {
-            // Invalid
-            &.k-invalid,
-            &.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-picker-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-    .k-dateinput {
-        .k-dateinput-wrap {
-            // Invalid
-            &.k-invalid,
-            &.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-dateinput-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-datepicker {
-        &.k-state-hover {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-picker-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-picker-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
-    .k-dateinput,
-    .k-daterangepicker {
-        &.k-state-hover {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-hovered-text,
-                    $datetime-hovered-bg,
-                    $datetime-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-dateinput-wrap {
-                @include fill(
-                    $datetime-focused-text,
-                    $datetime-focused-bg,
-                    $datetime-focused-border
-                );
-                @include box-shadow($datetime-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-dateinput-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-dateinput-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
 }

package/scss/datetimepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_index.scss";
+@import "../popup/_index.scss";
+@import "../icons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datetimepicker/_layout.scss

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

package/scss/datetimepicker/_theme.scss

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

package/scss/datetimepicker/_variables.scss

@@ -0,0 +1 @@
+// Datetimepicker

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/_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

@@ -16,6 +16,8 @@
 
     // Grid list
     .k-grid-list {
+        margin: 0;
+        padding: 0;
         width: 100%;
         max-width: none;
         border-width: 0;
@@ -25,6 +27,7 @@
         empty-cells: show;
         outline: none;
         display: table;
+        list-style: none;
     }
 
 
@@ -119,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;
     }
@@ -139,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;

package/scss/dropdowngrid/_theme.scss

@@ -30,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
@@ -42,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

@@ -7,4 +7,15 @@
     // Native select
     select.k-dropdown-list {}
 
+
+    // Dropdown operator
+    .k-dropdown-operator {
+        width: min-content;
+        aspect-ratio: 1;
+
+        .k-input-inner {
+            display: none;
+        }
+    }
+
 }