@progress/kendo-theme-default 4.43.0 → 4.43.1-dev.3

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

@@ -12,6 +12,8 @@
 
     // Grid list
     .k-grid-list {
+        margin: 0;
+        padding: 0;
         width: 100%;
         max-width: none;
         border-width: 0;
@@ -21,6 +23,7 @@
         empty-cells: show;
         outline: none;
         display: table;
+        list-style: none;
     }
 
 
@@ -115,12 +118,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 +136,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/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/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;
             }

package/scss/filter/_theme.scss

@@ -11,9 +11,11 @@
             color: $filter-preview-operator-text;
         }
 
+        // The last selector targets the Angular rendering
         .k-filter-item::before,
         .k-filter-toolbar::before,
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             background-color: $component-border;
         }
     }

package/scss/forms/_index.scss

@@ -7,7 +7,7 @@
 @import "../button/_variables.scss";
 @import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
-@import "../action-buttons/_variables.scss";
+@import "../action-buttons/_index.scss";
 @import "../window/_variables.scss";
 
 

package/scss/forms/_layout.scss

@@ -83,7 +83,8 @@
             border: 0;
 
             > * {
-                &:first-child {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
                     margin-top: 0;
                 }
             }
@@ -106,14 +107,14 @@
         }
 
         .k-form-field,
-        .k-form-buttons,
         .k-daterangepicker .k-textbox-container {
             margin-top: $form-field-margin-top;
         }
 
         > *,
         .k-daterangepicker .k-textbox-container {
-            &:first-child {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
             }
         }
@@ -170,15 +171,9 @@
 
     // Form Buttons Container
     .k-form-buttons {
-        display: flex;
-
-        > * {
-            margin-right: $form-button-margin-x;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+        @extend .k-actions;
+        margin-top: 2 * $form-field-margin-top;
+        padding: 0;
     }
 
     // Form Hint/Error Messages
@@ -235,28 +230,12 @@
             max-width: $horizontal-form-field-wrap-max-width;
             flex: 1 1 auto;
         }
-
-        .k-form-buttons {
-            margin-top: 2 * $form-field-margin-top;
-        }
     }
 
     // RTL Adjustments
     .k-form {
         [dir="rtl"],
         .k-rtl & {
-            .k-form-buttons,
-            &.k-form-buttons {
-                > * {
-                    margin-right: 0;
-                    margin-left: $form-button-margin-x;
-
-                    &:last-child {
-                        margin-left: 0;
-                    }
-                }
-            }
-
             .k-label-optional {
                 margin-left: 0;
                 margin-right: $label-optional-margin-x;

package/scss/gantt/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../validator/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";

package/scss/grid/_index.scss

@@ -14,7 +14,7 @@
 @import "../radio/_index.scss";
 @import "../validator/_index.scss";
 @import "../autocomplete/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../menu/_index.scss";
@@ -23,6 +23,7 @@
 @import "../skeleton/_index.scss";
 @import "../utils/_float.scss";
 @import "../utils/_spacer.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/grid/_layout.scss

@@ -320,11 +320,6 @@
                 border-right-width: 0;
             }
 
-            .k-filtercell-operator {
-                margin-left: 0;
-                margin-right: $table-cell-padding-y / 2;
-            }
-
             .k-dirty {
                 border-color: currentColor currentColor transparent transparent;
                 left: auto;
@@ -510,10 +505,6 @@
         }
     }
 
-    .k-group-indicator {
-        margin-right: ( $grid-group-indicator-gap / 2 );
-    }
-
     .k-group-indicator + .k-group-indicator {
         margin-left: ( $grid-group-indicator-gap / 2 );
     }
@@ -664,14 +655,6 @@
             bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $button-inner-calc-size / 2 } );
             z-index: 1;
 
-            .k-ie & {
-                position: static;
-                float: right;
-                margin-top: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-bottom: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-right: calc( -1 * #{ $button-calc-size });
-            }
-
             &:hover {
                 cursor: pointer;
             }
@@ -757,77 +740,38 @@
         .k-multiselect {
             height: auto;
         }
-
-        .k-filtercell .k-widget.k-sized-input {
-            flex: 0 1 auto;
-        }
     }
 
     .k-filtercell {
         width: auto;
         display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
 
         > span,
         .k-filtercell-wrapper {
             display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            gap: ( $grid-cell-padding-y / 2 );
             flex: 1 1 auto;
 
-            > label {
-                vertical-align: middle;
-            }
-        }
-
-        .k-filtercell-wrapper > .k-widget {
-            width: 100%;
-        }
-
-        > span {
-            .k-button {
-                visibility: visible;
-                pointer-events: all;
+            > .k-widget,
+            > .k-textbox {
+                width: 100%;
             }
 
-            .k-button,
+            .k-colorpicker,
             .k-dropdown-operator {
-                margin-left: $grid-cell-padding-y / 2;
-
-                .k-ie & {
-                    min-width: $button-inner-calc-size;
-                }
-            }
-
-            .k-widget {
-                width: auto;
-            }
-        }
-
-        .k-filtercell-operator {
-            > .k-button.k-clear-button-visible {
-                visibility: visible;
-                height: $button-calc-size;
+                width: min-content;
+                flex: none;
             }
 
-            > .k-button:not(.k-clear-button-visible) {
-                visibility: hidden;
-                pointer-events: none;
+            > .k-button {
+                flex: none;
             }
         }
 
-        .k-filtercell-operator {
-            margin-left: $grid-cell-padding-y / 2;
-        }
-
-        .k-widget:not(.k-dropdown-operator),
-        .k-filtercell-wrapper > .k-textbox {
-            display: flex;
-            flex: 1 1 auto;
-        }
-
-        .k-filtercell-wrapper > .k-textbox {
-            width: 100%;
-            min-width: 0;
-        }
-
     }
 
     // Grid content

package/scss/index.scss

@@ -15,12 +15,13 @@
 
 
 // Primitive components
-// @import "list/_index.scss";
+@import "list/_index.scss";
 @import "listgroup/_index.scss";
 @import "overlay/_index.scss";
 @import "popup/_index.scss";
 @import "ripple/_index.scss";
-// @import "table/_index.scss";
+@import "table/_index.scss";
+@import "virtual-scroller/_index.scss";
 
 
 // Indicators
@@ -53,6 +54,7 @@
 
 // Form requirements
 @import "calendar/_index.scss";
+@import "timeselector/_index.scss";
 
 
 // Augmented forms
@@ -63,7 +65,10 @@
 @import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
-@import "datetime/_index.scss";
+@import "dateinput/_index.scss";
+@import "datepicker/_index.scss";
+@import "timepicker/_index.scss";
+@import "datetimepicker/_index.scss";
 @import "dropdowngrid/_index.scss";
 @import "dropdownlist/_index.scss";
 @import "dropdowntree/_index.scss";