@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/daterangepicker/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/daterangepicker/_layout.scss

@@ -6,7 +6,7 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-end;
-        gap: map-get( $spacing, 2 );
+        gap: k-map-get( $kendo-spacing, 2 );
 
         *,
         *::before,

package/scss/datetimepicker/_index.scss

@@ -12,6 +12,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dialog/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dialog/_layout.scss

@@ -42,7 +42,7 @@
 
 
     // Actions
-    .k-dialog-actions {}
+    .k-dialog-titlebar-actions {}
     .k-dialog-action {}
 
 
@@ -51,33 +51,18 @@
 
 
     // Buttons
-    .k-dialog-buttongroup {
-        @include border-bottom-radius( $window-border-radius );
-        padding: $dialog-buttongroup-padding-y $dialog-buttongroup-padding-x;
-        border-width: $dialog-buttongroup-border-width 0 0;
+    .k-dialog-actions {
+        @include border-bottom-radius( $kendo-window-border-radius );
+        padding: $kendo-dialog-buttongroup-padding-y $kendo-dialog-buttongroup-padding-x;
+        border-width: $kendo-dialog-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;
         flex: 0 0 auto;
         display: flex;
         flex-flow: row wrap;
         align-items: center;
-        gap: $dialog-button-spacing;
+        gap: $kendo-dialog-button-spacing;
         overflow: hidden;
     }
 
-
-    // Legacy spacing
-    .k-ie .k-dialog-buttongroup {
-
-        .k-button ~ .k-button {
-            margin-left: $dialog-button-spacing;
-
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $dialog-button-spacing;
-            }
-        }
-    }
-
 }

package/scss/dialog/_theme.scss

@@ -2,10 +2,18 @@
     // Titlebar
     .k-dialog-titlebar {
         @include fill(
-            $dialog-titlebar-text,
-            $dialog-titlebar-bg,
-            $dialog-titlebar-border
+            $kendo-dialog-titlebar-text,
+            $kendo-dialog-titlebar-bg,
+            $kendo-dialog-titlebar-border
         );
     }
 
+    // Dialog theme colors
+    @each $name, $color in $kendo-dialog-theme-colors {
+        .k-dialog-#{$name} .k-dialog-titlebar {
+            color: k-contrast-legacy( $color );
+            background-color: $color;
+        }
+    }
+
 }

package/scss/dialog/_variables.scss

@@ -1,10 +1,18 @@
 // Dialog
-$dialog-titlebar-bg: $primary !default;
-$dialog-titlebar-text: $primary-contrast !default;
-$dialog-titlebar-border: inherit !default;
+$kendo-dialog-titlebar-bg: $kendo-component-header-bg !default;
+$kendo-dialog-titlebar-text: $kendo-component-header-text !default;
+$kendo-dialog-titlebar-border: inherit !default;
 
-$dialog-buttongroup-padding-x: $actions-padding-x !default;
-$dialog-buttongroup-padding-y: $actions-padding-y !default;
-$dialog-buttongroup-border-width: 1px !default;
+$kendo-dialog-buttongroup-padding-x: $actions-padding-x !default;
+$kendo-dialog-buttongroup-padding-y: $actions-padding-y !default;
+$kendo-dialog-buttongroup-border-width: 1px !default;
 
-$dialog-button-spacing: $actions-button-spacing !default;
+$kendo-dialog-button-spacing: $actions-button-spacing !default;
+
+/// Theme colors map for the dialog.
+/// @group dialog
+$kendo-dialog-theme-colors: (
+    "primary": k-map-get($kendo-theme-colors, "primary"),
+    "light": k-map-get($kendo-theme-colors, "light"),
+    "dark": k-map-get($kendo-theme-colors, "dark")
+) !default;

package/scss/draggable/_index.scss

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

package/scss/draggable/_layout.scss

@@ -0,0 +1,122 @@
+@include exports( "draggable/layout" ) {
+
+    // Layout
+    .k-drag-clue {
+        @include border-radius( $drag-clue-border-radius );
+        padding: $drag-clue-padding-y $drag-clue-padding-x;
+        border-width: $drag-clue-border-width;
+        border-style: if( $drag-clue-border-width == null, null, solid );
+        box-sizing: border-box;
+        font-size: $drag-clue-font-size;
+        font-family: $drag-clue-font-family;
+        line-height: $drag-clue-line-height;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        white-space: nowrap;
+        opacity: $drag-clue-opacity;
+        overflow: hidden;
+        position: absolute;
+        z-index: 20000;
+        cursor: move;
+    }
+    .k-drag-status,
+    .k-drag-clue .k-drag-status {
+        margin: 0;
+        margin-right: .4ex;
+    }
+
+
+    // Drop hint
+    .k-drop-hint {
+        display: flex;
+        gap: $drop-hint-arrow-spacing;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        z-index: 1000;
+        transform: translate(-50%, -50%);
+    }
+
+    .k-drop-hint-start,
+    .k-drop-hint-end {
+        flex-shrink: 0;
+        border-width: k-math-div( $drop-hint-arrow-size, 2 );
+        border-style: solid;
+        border-color: transparent;
+    }
+
+    .k-drop-hint-line {
+        flex-grow: 1;
+        background-color: $drop-hint-bg;
+    }
+
+    .k-drop-hint-h {
+        .k-drop-hint-start {
+            border-left-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-left-color: $drop-hint-bg;
+            border-right-width: 0;
+        }
+
+        .k-drop-hint-line {
+            width: $drop-hint-line-h-width;
+            height: $drop-hint-line-h-height;
+        }
+
+        .k-drop-hint-end {
+            border-right-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-right-color: $drop-hint-bg;
+            border-left-width: 0;
+        }
+    }
+
+    .k-drop-hint-v {
+        flex-direction: column;
+
+        .k-drop-hint-start {
+            border-top-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-top-color: $drop-hint-bg;
+            border-bottom-width: 0;
+        }
+
+        .k-drop-hint-line {
+            width: $drop-hint-line-v-width;
+            height: $drop-hint-line-v-height;
+        }
+
+        .k-drop-hint-end {
+            border-bottom-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-bottom-color: $drop-hint-bg;
+            border-top-width: 0;
+        }
+    }
+
+
+    // Reorder cue
+    .k-reorder-cue {
+        position: absolute;
+
+        &::before,
+        &::after {
+            content: "";
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            position: absolute;
+            transform: translateX(-50%);
+        }
+
+        &::before {
+            border-bottom-width: 0;
+            border-top-color: currentColor;
+            top: -4px;
+        }
+        &::after {
+            border-top-width: 0;
+            border-bottom-color: currentColor;
+            bottom: -4px;
+        }
+    }
+
+}

package/scss/draggable/_theme.scss

@@ -0,0 +1,14 @@
+@include exports( "draggable/theme" ) {
+
+    // Theme
+    .k-drag-clue {
+        @include fill(
+            $drag-clue-text,
+            $drag-clue-bg,
+            $drag-clue-border,
+            $drag-clue-gradient
+        );
+        @include box-shadow( $drag-clue-shadow );
+    }
+
+}

package/scss/draggable/_variables.scss

@@ -0,0 +1,27 @@
+// Drag hint
+$drag-clue-padding-x: $kendo-padding-md-x !default;
+$drag-clue-padding-y: $kendo-padding-md-y !default;
+$drag-clue-border-width: 1px !default;
+$drag-clue-border-radius: $kendo-border-radius-md !default;
+$drag-clue-font-size: $font-size !default;
+$drag-clue-font-family: $font-family !default;
+$drag-clue-line-height: $line-height !default;
+
+$drag-clue-bg: $base-bg !default;
+$drag-clue-text: $base-text !default;
+$drag-clue-border: $base-border !default;
+$drag-clue-gradient: null !default;
+$drag-clue-shadow: null !default;
+
+$drag-clue-opacity: null !default;
+
+
+// Drop hint
+$drop-hint-arrow-size: 8px !default;
+$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
+$drop-hint-line-h-width: 20px !default;
+$drop-hint-line-h-height: 1px !default;
+$drop-hint-line-v-width: $drop-hint-line-h-height !default;
+$drop-hint-line-v-height: $drop-hint-line-h-width !default;
+
+$drop-hint-bg: $kendo-color-primary !default;

package/scss/drawer/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/drawer/_layout.scss

@@ -16,16 +16,16 @@
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $drawer-font-family;
-        font-size: $drawer-font-size;
-        line-height: $drawer-line-height;
+        font-family: $kendo-drawer-font-family;
+        font-size: $kendo-drawer-font-size;
+        line-height: $kendo-drawer-line-height;
         display: flex;
         flex-direction: column;
         flex: 0 0 auto;
         transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -38,13 +38,13 @@
         .k-drawer-expanded &.k-drawer-start,
         .k-drawer-left.k-drawer-mini &,
         .k-drawer-left.k-drawer-expanded & {
-            border-right-width: $drawer-border-width;
+            border-right-width: $kendo-drawer-border-width;
         }
         .k-drawer-mini &.k-drawer-end,
         .k-drawer-expanded &.k-drawer-end,
         .k-drawer-right.k-drawer-mini &,
         .k-drawer-right.k-drawer-expanded & {
-            border-left-width: $drawer-border-width;
+            border-left-width: $kendo-drawer-border-width;
         }
 
         // Position
@@ -114,10 +114,10 @@
 
         // Scrollbar styles for Chrome, Safari and Opera
         &::-webkit-scrollbar {
-            width: $drawer-scrollbar-width;
+            width: $kendo-drawer-scrollbar-width;
         }
         &::-webkit-scrollbar-thumb {
-            border-radius: $drawer-scrollbar-radius;
+            border-radius: $kendo-drawer-scrollbar-radius;
         }
     }
     .k-drawer-items,
@@ -130,29 +130,30 @@
         align-items: stretch;
     }
     .k-drawer-item {
-        padding: $drawer-item-padding-y $drawer-item-padding-x;
+        padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
         outline: 0;
         color: inherit;
-        font-size: $drawer-item-font-size;
-        line-height: $drawer-item-line-height;
+        font-size: $kendo-drawer-item-font-size;
+        line-height: $kendo-drawer-item-line-height;
         display: flex;
         flex-flow: row nowrap;
+        gap: $kendo-drawer-item-padding-x;
         cursor: pointer;
 
         > .k-drawer-link {
-            margin: (-$drawer-item-padding-y) (-$drawer-item-padding-x);
-            padding: $drawer-item-padding-y $drawer-item-padding-x;
+            margin: (-$kendo-drawer-item-padding-y) (-$kendo-drawer-item-padding-x);
+            padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
             color: inherit;
             display: flex;
             flex-flow: row nowrap;
             flex: 1 0 auto;
+            gap: $kendo-drawer-item-padding-x;
         }
 
         .k-icon {
-            margin: 0 $drawer-item-padding-x;
             height: auto;
-            font-size: $drawer-icon-size;
-            line-height: $drawer-item-line-height;
+            font-size: $kendo-drawer-icon-size;
+            line-height: $kendo-drawer-item-line-height;
             flex-shrink: 0;
 
             &.k-i-none {
@@ -161,7 +162,6 @@
         }
 
         .k-item-text {
-            padding: 0 $drawer-item-padding-x;
             display: inline-block;
             white-space: nowrap;
             overflow: hidden;
@@ -171,12 +171,13 @@
         .k-drawer-toggle {
             margin-inline-start: auto;
             cursor: pointer;
+            display: flex;
         }
 
         // Hierarchy items
-        @for $i from 1 through $drawer-item-level-count {
+        @for $i from 1 through $kendo-drawer-item-level-count {
             &.k-level-#{$i} {
-                padding-inline-start: ( $drawer-item-level-padding-x * $i );
+                padding-inline-start: ( $i + 1) * $kendo-drawer-item-level-padding-x;
             }
         }
     }
@@ -191,7 +192,7 @@
     .k-drawer-mini {
 
         .k-drawer-wrapper {
-            width: $drawer-mini-initial-width;
+            width: $kendo-drawer-mini-initial-width;
         }
 
     }
@@ -205,7 +206,7 @@
         .k-drawer-mini .k-drawer-start,
         .k-drawer-expanded .k-drawer-start,
         &.k-drawer-expanded .k-drawer-start {
-            border-left-width: $drawer-border-width;
+            border-left-width: $kendo-drawer-border-width;
             border-right-width: 0;
         }
         &.k-drawer-mini .k-drawer-end,
@@ -213,7 +214,7 @@
         &.k-drawer-expanded .k-drawer-end
         .k-drawer-expanded .k-drawer-end {
             border-left-width: 0;
-            border-right-width: $drawer-border-width;
+            border-right-width: $kendo-drawer-border-width;
         }
 
         // Position

package/scss/drawer/_theme.scss

@@ -2,59 +2,59 @@
 
     .k-drawer {
         @include fill(
-            $drawer-text,
-            $drawer-bg,
-            $drawer-border
+            $kendo-drawer-text,
+            $kendo-drawer-bg,
+            $kendo-drawer-border
         );
     }
 
     // Drawer items
     .k-drawer-wrapper {
-        scrollbar-color: $drawer-scrollbar-color $drawer-scrollbar-bg;
+        scrollbar-color: $kendo-drawer-scrollbar-color $kendo-drawer-scrollbar-bg;
 
         &::-webkit-scrollbar-track {
-            background: $drawer-scrollbar-bg;
+            background: $kendo-drawer-scrollbar-bg;
         }
         &::-webkit-scrollbar-thumb {
-            background: $drawer-scrollbar-color;
+            background: $kendo-drawer-scrollbar-color;
         }
         &::-webkit-scrollbar-thumb:hover {
-            background: $drawer-scrollbar-hovered-color;
+            background: $kendo-drawer-scrollbar-hover-color;
         }
     }
     .k-drawer-item {
 
         &:hover,
         &.k-hover {
-            color: $drawer-hovered-text;
-            background-color: $drawer-hovered-bg;
+            color: $kendo-drawer-hover-text;
+            background-color: $kendo-drawer-hover-bg;
         }
 
         &:focus,
         &.k-focus {
-            background-color: $drawer-focused-bg;
-            box-shadow: $drawer-focused-shadow;
+            background-color: $kendo-drawer-focus-bg;
+            box-shadow: $kendo-drawer-focus-shadow;
 
             &:hover,
             &.k-hover {
-                color: $drawer-hovered-text;
-                background-color: $drawer-hovered-bg;
+                color: $kendo-drawer-hover-text;
+                background-color: $kendo-drawer-hover-bg;
             }
         }
 
         &.k-selected {
-            color: $drawer-selected-text;
-            background-color: $drawer-selected-bg;
+            color: $kendo-drawer-selected-text;
+            background-color: $kendo-drawer-selected-bg;
 
             &:hover,
             &.k-hover {
-                color: $drawer-selected-hover-text;
-                background-color: $drawer-selected-hover-bg;
+                color: $kendo-drawer-selected-hover-text;
+                background-color: $kendo-drawer-selected-hover-bg;
             }
         }
     }
     .k-drawer-separator {
-        background-color: $drawer-border;
+        background-color: $kendo-drawer-border;
     }
 
 }

package/scss/drawer/_variables.scss

@@ -1,38 +1,39 @@
 // Drawer
-$drawer-bg: $component-bg !default;
-$drawer-text: $component-text !default;
-$drawer-border: $component-border !default;
-$drawer-border-width: 1px !default;
-$drawer-font-family: $font-family !default;
-$drawer-font-size: $font-size !default;
-$drawer-line-height: $line-height !default;
-$drawer-content-padding-x: $padding-x !default;
-$drawer-content-padding-y: $padding-y !default;
-$drawer-item-level-padding-x: map-get( $spacing, 4 ) !default;
-
-$drawer-item-level-count: 5 !default;
-
-$drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
-$drawer-scrollbar-bg: #dedede !default;
-$drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
-
-$drawer-item-padding-x: $padding-x !default;
-$drawer-item-padding-y: $padding-x !default;
-$drawer-item-font-size: 16px !default;
-$drawer-item-line-height: $line-height-lg !default;
-$drawer-icon-size: $icon-size !default;
-
-$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
-
-$drawer-hovered-bg: $hovered-bg !default;
-$drawer-hovered-text: $hovered-text !default;
-
-$drawer-focused-bg: $drawer-bg !default;
-$drawer-focused-shadow: $kendo-list-item-focus-shadow !default;
-
-$drawer-selected-bg: $selected-bg !default;
-$drawer-selected-text: $selected-text !default;
-$drawer-selected-hover-bg: $selected-hover-bg !default;
-$drawer-selected-hover-text: $selected-hover-text !default;
+$kendo-drawer-bg: $kendo-component-bg !default;
+$kendo-drawer-text: $kendo-component-text !default;
+$kendo-drawer-border: $kendo-component-border !default;
+$kendo-drawer-border-width: 1px !default;
+$kendo-drawer-font-family: $font-family !default;
+$kendo-drawer-font-size: $font-size !default;
+$kendo-drawer-line-height: $line-height !default;
+$kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+$kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
+
+$kendo-drawer-scrollbar-width: 7px !default;
+$kendo-drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$kendo-drawer-scrollbar-bg: #dedede !default;
+$kendo-drawer-scrollbar-radius: 20px !default;
+$kendo-drawer-scrollbar-hover-color: rgba(156, 156, 156, 1) !default;
+
+$kendo-drawer-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-drawer-item-padding-y: $kendo-padding-md-x !default;
+$kendo-drawer-item-font-size: 16px !default;
+$kendo-drawer-item-line-height: $line-height-lg !default;
+
+$kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+$kendo-drawer-item-level-count: 5 !default;
+
+$kendo-drawer-icon-size: $icon-size !default;
+
+$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size}) !default;
+
+$kendo-drawer-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-hover-text: $kendo-hover-text !default;
+
+$kendo-drawer-focus-bg: $kendo-drawer-bg !default;
+$kendo-drawer-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+$kendo-drawer-selected-bg: $kendo-selected-bg !default;
+$kendo-drawer-selected-text: $kendo-selected-text !default;
+$kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default;
+$kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;

package/scss/dropdowngrid/_index.scss

@@ -10,9 +10,10 @@
 @import "../popup/_index.scss";
 @import "../toolbar/_variables.scss";
 @import "../menu/_variables.scss";
+@import "../chip/_variables.scss";
 @import "../grid/_variables.scss";
 
 
 // Component
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dropdownlist/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/dropdownlist/_layout.scss

@@ -16,7 +16,9 @@
 
         .k-input-button {
             border-width: 0;
+            width: min-content;
         }
+
         .k-input-button .k-button-icon {
             width: auto;
             aspect-ratio: 1;

package/scss/dropdownlist/_variables.scss

@@ -1,16 +1 @@
 // Dropdownlist
-$dropdownlist-bg: $kendo-button-bg !default;
-$dropdownlist-text: $kendo-button-text !default;
-$dropdownlist-border: $kendo-button-border !default;
-$dropdownlist-gradient: $kendo-button-gradient !default;
-
-$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
-$dropdownlist-hovered-text: $kendo-button-hover-text !default;
-$dropdownlist-hovered-border: $kendo-button-hover-border !default;
-$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$dropdownlist-focused-bg: null !default;
-$dropdownlist-focused-text: null !default;
-$dropdownlist-focused-border: null !default;
-$dropdownlist-focused-gradient: null !default;
-$dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;