@progress/kendo-theme-default 4.43.1-dev.0 → 4.43.1-dev.4

package/scss/datetimepicker/_layout.scss

@@ -0,0 +1,120 @@
+@include exports( "datetimepicker/layout" ) {
+
+    // Datetime picker
+    .k-datetimepicker {
+        @include border-radius( $input-border-radius );
+        width: $input-default-width;
+        border-width: $input-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $input-font-family;
+        font-size: $input-font-size;
+        line-height: $input-line-height;
+        text-align: start;
+        white-space: nowrap;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+
+        // Input
+        .k-input {}
+
+
+        // Select
+        .k-select {
+            border-width: 0;
+            border-inline-start-width: $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, $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;
+        }
+    }
+
+
+    // Datetime popup
+    .k-datetime-popup,
+    .k-datetime-container {
+
+        // Wrap
+        .k-datetime-wrap {
+            width: $datetime-width;
+            overflow: hidden;
+        }
+        .k-date-tab {
+            .k-datetime-selector {
+                transform: translateX(0);
+            }
+        }
+        .k-time-tab {
+            .k-datetime-selector {
+                transform: translateX(-100%);
+            }
+        }
+
+        // Datetime button group
+        .k-datetime-buttongroup {
+            padding: $actions-padding-y $actions-padding-x;
+        }
+
+        // Datetime selector
+        .k-datetime-selector {
+            display: flex;
+            transition: transform .2s;
+        }
+
+        // Inner wraps
+        .k-datetime-calendar-wrap,
+        .k-datetime-time-wrap {
+            text-align: center;
+            flex: 0 0 $datetime-width;
+        }
+
+        // Calendar
+        .k-datetime-calendar-wrap .k-calendar {
+            border-width: 0;
+        }
+
+        // Time
+        .k-datetime-time-wrap .k-timeselector {
+            border-width: 0;
+        }
+
+        .k-rtl &,
+        &.k-rtl,
+        [dir="rtl"] &,
+        &[dir="rtl"] {
+            .k-time-tab {
+
+                .k-datetime-selector {
+                    transform: translateX(100%);
+                }
+            }
+        }
+    }
+
+}

package/scss/datetimepicker/_theme.scss

@@ -0,0 +1,89 @@
+@include exports( "datetimepicker/theme" ) {
+
+    // Datetime picker
+    .k-datetimepicker {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+
+        // Select
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
+        }
+        .k-link:hover,
+        .k-link.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+
+        .k-link:active,
+        .k-link.k-state-active,
+        .k-link.k-state-selected {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
+        }
+    }
+
+}

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/dropdowngrid/_layout.scss

@@ -1,4 +1,5 @@
 @include exports("dropdowngrid/layout") {
+
     .k-dropdowngrid-popup {
         overflow: hidden;
     }
@@ -12,6 +13,8 @@
 
     // Grid list
     .k-grid-list {
+        margin: 0;
+        padding: 0;
         width: 100%;
         max-width: none;
         border-width: 0;
@@ -21,6 +24,7 @@
         empty-cells: show;
         outline: none;
         display: table;
+        list-style: none;
     }
 
 
@@ -115,12 +119,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 +137,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

@@ -27,11 +27,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 +44,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

@@ -2,70 +2,55 @@
 
     // Dropdown list
     .k-dropdown {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
-        outline: 0;
-        background: none;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
+        outline: 0;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
-        text-align: left;
+        text-align: start;
         white-space: nowrap;
         display: inline-flex;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .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;
-            overflow: hidden;
-
 
-            // Input
-            .k-input {}
+        // Input
+        .k-input {}
 
 
-            // Select
-            .k-select {
-                padding: $picker-select-padding-y $picker-select-padding-x;
-                width: if( $use-picker-select-width, $button-inner-calc-size, null );
-                border-width: 0;
-                border-inline-start-width: $picker-select-border-width;
-                border-color: transparent;
-                box-sizing: border-box;
-                border-style: solid;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 auto;
-                text-align: center;
-                cursor: pointer;
-            }
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
         }
 
-    }
-
-
-    // RTL
 
-    .k-dropdown.k-rtl,
-    .k-dropdown[dir="rtl"],
-    .k-rtl .k-dropdown,
-    [dir="rtl"] .k-dropdown {
-        text-align: right;
+        // Select
+        .k-select {
+            padding: $picker-select-padding-y $picker-select-padding-x;
+            width: if( $use-picker-select-width, $spinner-width, null );
+            border-width: 0;
+            border-inline-start-width: $picker-select-border-width;
+            border-style: solid;
+            border-color: transparent;
+            box-sizing: border-box;
+            outline: 0;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            cursor: pointer;
+        }
     }
 
 
@@ -74,16 +59,13 @@
     .k-dropdown-operator {
         width: auto;
 
-        .k-dropdown-wrap {
-            .k-input {
-                display: none;
-            }
-            .k-select {
-                width: $button-inner-calc-size;
-                height: $button-inner-calc-size;
-            }
+        .k-input {
+            display: none;
+        }
+        .k-select {
+            width: $button-inner-calc-size;
+            height: $button-inner-calc-size;
         }
-
     }
 
 

package/scss/dropdownlist/_theme.scss

@@ -1,78 +1,7 @@
 @include exports( "dropdownlist/theme" ) {
 
+    // Dropdown list
     .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;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &: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;
-
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-    }
-
-    // Native select
-    select.k-dropdown {
         @include fill(
             $dropdownlist-text,
             $dropdownlist-bg,
@@ -81,7 +10,8 @@
         );
 
         // Hover state
-        &:hover {
+        &:hover,
+        &.k-state-hover {
             @include fill(
                 $dropdownlist-hovered-text,
                 $dropdownlist-hovered-bg,
@@ -90,8 +20,18 @@
             );
         }
 
-        // Focused state
-        &:focus {
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $dropdownlist-focused-text,
+                $dropdownlist-focused-bg,
+                $dropdownlist-focused-border,
+                $dropdownlist-focused-gradient
+            );
+            @include box-shadow($dropdownlist-focused-shadow);
+        }
+        &:focus-within {
             @include fill(
                 $dropdownlist-focused-text,
                 $dropdownlist-focused-bg,
@@ -100,6 +40,24 @@
             );
             @include box-shadow($dropdownlist-focused-shadow);
         }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
     }
 
 }

package/scss/dropdowntree/_layout.scss

@@ -10,16 +10,8 @@
     .k-popup-dropdowntree {
         padding: 0;
 
-        .k-list-filter {
-            box-shadow: $dropdowntree-filter-shadow;
-            margin: 0 0 $dropdowntree-filter-spacer;
-        }
-
         .k-check-all {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x 0;
-        }
-        .k-list-filter .k-check-all {
-            padding-top: 0;
+            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x;
         }
 
         .k-treeview {

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,14 @@
             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 {
+                border-width: 0;
+                padding: $toolbar-padding-y;
+                width: $toolbar-inner-calc-size;
+                height: $toolbar-inner-calc-size;
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -304,15 +306,6 @@
         }
     }
 
-    .k-editor-widget .k-colorpicker {}
-
-    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
-        padding-left: 0;
-
-        .k-select {
-            border-width: 0;
-        }
-    }
 
     // Find and replace dialog
     .k-editor-find-replace {

package/scss/expansion-panel/_index.scss

@@ -6,6 +6,7 @@
 @import "../utils/_display.scss";
 @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/filter/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../checkbox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../toolbar/_index.scss";

package/scss/filter/_layout.scss

@@ -58,7 +58,9 @@
             }
         }
 
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+        // The second selector targets the Angular rendering
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             content: "";
             position: absolute;
             width: $filter-line-size;
@@ -67,9 +69,12 @@
             left: -$filter-padding-x;
         }
 
+        // The forth and fifth selectors targets the Angular rendering
         .k-filter-group-main::before,
         .k-filter-group-main > .k-filter-toolbar::before,
         .k-filter-group-main > .k-filter-toolbar::after,
+        .k-filter-group-main > * > .k-filter-toolbar::before,
+        .k-filter-group-main > * > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child::before {
             display: none;
         }
@@ -99,7 +104,9 @@
                 }
             }
 
-            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+            // The second selector targets the Angular rendering
+            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+            .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
                 left: auto;
                 right: -$filter-padding-x;
             }