@progress/kendo-theme-default 4.43.1-dev.2 → 4.43.1-dev.6

package/scss/combobox/_layout.scss

@@ -1,62 +1,55 @@
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
     // Combobox
     .k-combobox {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        background: none;
         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%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            flex-flow: row nowrap;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            outline: 0;
-            cursor: initial;
-            overflow: hidden;
-        }
-
 
         // Input
         .k-input {}
 
+
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
+        }
+
+
         // Select
         .k-select {
-            padding: $combobox-select-padding-y $combobox-select-padding-x;
-            width: if( $use-picker-select-width, $combobox-select-width, null );
+            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;
-            box-sizing: border-box;
             border-style: solid;
+            box-sizing: border-box;
+            outline: 0;
             display: flex;
+            flex-flow: row nowrap;
             align-items: center;
             justify-content: center;
             flex: 0 0 auto;
-            text-align: center;
             cursor: pointer;
         }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-        }
     }
+
 }

package/scss/combobox/_theme.scss

@@ -1,125 +1,85 @@
-@include exports("combobox/theme") {
+@include exports( "combobox/theme" ) {
 
     .k-combobox {
-
-        // Normal state
-        .k-dropdown-wrap {
-            @include fill(
-                $combobox-text,
-                $combobox-bg,
-                $combobox-border
-            );
-
-            // 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);
-                }
-            }
-        }
-
-        .k-select {
-            @include fill(
-                $combobox-select-text,
-                $combobox-select-bg,
-                $combobox-select-border,
-                $combobox-select-gradient
-            );
-        }
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
 
         // Hover state
-        > :hover,
-        .k-state-hover {
+        &:hover,
+        &.k-state-hover {
             @include fill(
-                $combobox-hovered-text,
-                $combobox-hovered-bg,
-                $combobox-hovered-border
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
             );
         }
-        .k-select:hover {
+
+        // Focus state
+        &:focus,
+        &.k-state-focus {
             @include fill(
-                $combobox-select-hovered-text,
-                $combobox-select-hovered-bg,
-                $combobox-select-hovered-border,
-                $combobox-select-hovered-gradient
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
+            @include box-shadow( $input-focused-shadow );
         }
-
-        // Focus state
-        > .k-state-focused {
+        &:focus-within {
             @include fill(
-                $combobox-focused-text,
-                $combobox-focused-bg,
-                $combobox-focused-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
-            @include box-shadow($combobox-focused-shadow);
+            @include box-shadow( $input-focused-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);
-                }
-            }
-        }
-    }
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
 
-    // Universal rendering
-    .k-combobox {
-        &.k-state-hover {
-            .k-dropdown-wrap {
-                @include fill(
-                    $combobox-hovered-text,
-                    $combobox-hovered-bg,
-                    $combobox-hovered-border
-                );
+            .k-input-validation-icon {
+                color: $invalid-text;
             }
-        }
 
-        &.k-state-focus {
-            .k-dropdown-wrap {
-                @include fill(
-                    $combobox-focused-text,
-                    $combobox-focused-bg,
-                    $combobox-focused-border
-                );
-                @include box-shadow($combobox-focused-shadow);
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
 
-        &.k-invalid {
-            .k-dropdown-wrap {
-                border-color: $invalid-border;
 
-                .k-input-validation-icon {
-                    color: $invalid-text;
-                }
-            }
+        // Select
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
         }
-
-        &.k-invalid.k-state-focus {
-            .k-dropdown-wrap {
-                @include box-shadow($invalid-shadow);
-            }
+        .k-select:hover,
+        .k-select.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+        .k-select:active,
+        .k-select.k-state-active {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
         }
     }
 

package/scss/combobox/_variables.scss

@@ -1,32 +1 @@
-// Comboboxes
-$combobox-select-padding-x: 0px !default;
-$combobox-select-padding-y: 0px !default;
-$combobox-select-width: $button-inner-calc-size !default;
-
-$combobox-bg: $input-bg !default;
-$combobox-text: $input-text !default;
-$combobox-border: $input-border !default;
-
-$combobox-hovered-bg: $input-hovered-bg !default;
-$combobox-hovered-text: $input-hovered-text !default;
-$combobox-hovered-border: $input-hovered-border !default;
-
-$combobox-focused-bg: $input-focused-bg !default;
-$combobox-focused-text: $input-focused-text !default;
-$combobox-focused-border: $input-focused-border !default;
-$combobox-focused-shadow: $input-focused-shadow !default;
-
-$combobox-select-bg: $button-bg !default;
-$combobox-select-text: $button-text !default;
-$combobox-select-border: $button-border !default;
-$combobox-select-gradient: $button-gradient !default;
-
-$combobox-select-hovered-bg: $button-hovered-bg !default;
-$combobox-select-hovered-text: $button-hovered-text !default;
-$combobox-select-hovered-border: $button-hovered-border !default;
-$combobox-select-hovered-gradient: $button-hovered-gradient !default;
-
-$combobox-select-pressed-bg: $button-active-bg !default;
-$combobox-select-pressed-text: $button-active-text !default;
-$combobox-select-pressed-border: $button-active-border !default;
-$combobox-select-pressed-gradient: $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/daterangepicker/_index.scss

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

package/scss/daterangepicker/_layout.scss

@@ -0,0 +1,27 @@
+@include exports( "daterangepicker/layout" ) {
+
+    // Daterange picker
+    .k-daterangepicker {
+        border: 0;
+        display: inline-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;
+    }
+
+}

package/scss/daterangepicker/_theme.scss

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

package/scss/daterangepicker/_variables.scss

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

package/scss/dropdowngrid/_layout.scss

@@ -1,4 +1,5 @@
 @include exports("dropdowngrid/layout") {
+
     .k-dropdowngrid-popup {
         overflow: hidden;
     }

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);
+            }
+        }
+
     }
 
 }