@progress/kendo-theme-default 7.2.2-dev.0 → 7.3.0-dev.1

package/scss/drawer/_layout.scss

@@ -1,14 +1,19 @@
 @mixin kendo-drawer--layout-base() {
 
+    // Container
     .k-drawer-container {
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-start;
     }
+
     kendo-drawer.k-drawer,
     kendo-drawer .k-drawer-wrapper {
         transition: none;
     }
+
+
+    // Drawer
     .k-drawer {
         height: 100%;
         max-width: 100%;
@@ -33,41 +38,38 @@
             box-sizing: border-box;
         }
 
-        // Borders
         .k-drawer-mini &.k-drawer-start,
-        .k-drawer-expanded &.k-drawer-start,
-        .k-drawer-left.k-drawer-mini &,
-        .k-drawer-left.k-drawer-expanded & {
-            border-right-width: $kendo-drawer-border-width;
+        .k-drawer-expanded &.k-drawer-start {
+            border-inline-end-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: $kendo-drawer-border-width;
+        .k-drawer-expanded &.k-drawer-end {
+            border-inline-start-width: $kendo-drawer-border-width;
         }
 
+
         // Position
-        &.k-drawer-start,
-        .k-drawer-left & {
+        &.k-drawer-start {
             top: 0;
-            left: 0;
+            inset-inline-start: 0;
         }
-        &.k-drawer-end,
-        .k-drawer-right & {
+        &.k-drawer-end {
             top: 0;
-            right: 0;
+            inset-inline-end: 0;
         }
     }
+
+
+    // Content
     .k-drawer-content {
         flex: 1 1 auto;
         overflow: auto;
     }
 
 
-    // Overlay drawer
+    // Overlay
     .k-drawer-overlay {
-
         .k-drawer {
             max-width: 80vw; // limit width
             position: fixed;
@@ -81,7 +83,6 @@
         &.k-drawer-expanded > .k-overlay {
             display: block;
         }
-
     }
 
 
@@ -96,13 +97,9 @@
             align-self: stretch;
         }
 
-
-        // right drawer
-        .k-drawer.k-drawer-end,
-        &.k-drawer-right .k-drawer {
-            order: 1;
+        &:has(.k-drawer.k-drawer-end) {
+            flex-direction: row-reverse;
         }
-
     }
 
 
@@ -121,8 +118,7 @@
             border-radius: $kendo-drawer-scrollbar-radius;
         }
     }
-    .k-drawer-items,
-    .k-drawer-items ul {
+    .k-drawer-items {
         margin: 0;
         padding: 0;
         list-style: none;
@@ -185,61 +181,18 @@
             }
         }
     }
+
+
+    // Separator
     .k-drawer-separator {
         padding: 0;
         height: 1px;
     }
 
 
-
     // Mini mode
-    .k-drawer-mini {
-
-        .k-drawer-wrapper {
-            width: $kendo-drawer-mini-initial-width;
-        }
-
-    }
-
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Borders
-        &.k-drawer-mini .k-drawer-start,
-        .k-drawer-mini .k-drawer-start,
-        .k-drawer-expanded .k-drawer-start,
-        &.k-drawer-expanded .k-drawer-start {
-            border-left-width: $kendo-drawer-border-width;
-            border-right-width: 0;
-        }
-        &.k-drawer-mini .k-drawer-end,
-        .k-drawer-mini .k-drawer-end,
-        &.k-drawer-expanded .k-drawer-end
-        .k-drawer-expanded .k-drawer-end {
-            border-left-width: 0;
-            border-right-width: $kendo-drawer-border-width;
-        }
-
-        // Position
-        &.k-drawer-overlay .k-drawer-start,
-        .k-drawer-overlay .k-drawer-start {
-            left: auto;
-            right: 0;
-        }
-        &.k-drawer-overlay .k-drawer-end,
-        .k-drawer-overlay .k-drawer-end {
-            left: 0;
-            right: auto;
-        }
-
-        // Order
-        .k-drawer-left.k-drawer-push .k-drawer {
-            order: 1;
-        }
-        .k-drawer-right.k-drawer-push .k-drawer {
-            order: 0;
-        }
+    .k-drawer-mini .k-drawer-wrapper {
+        width: $kendo-drawer-mini-initial-width;
     }
 }
 

package/scss/drawer/_variables.scss

@@ -1,40 +1,105 @@
 // Drawer
+
+/// The background color of the Drawer.
+/// @group drawer
 $kendo-drawer-bg: $kendo-component-bg !default;
+/// The text color of the Drawer.
+/// @group drawer
 $kendo-drawer-text: $kendo-component-text !default;
+/// The border color of the Drawer.
+/// @group drawer
 $kendo-drawer-border: $kendo-component-border !default;
+/// The border width of the Drawer.
+/// @group drawer
 $kendo-drawer-border-width: 1px !default;
+/// The font family of the Drawer.
+/// @group drawer
 $kendo-drawer-font-family: $kendo-font-family !default;
+/// The font size of the Drawer.
+/// @group drawer
 $kendo-drawer-font-size: $kendo-font-size-md !default;
+/// The line height of the Drawer.
+/// @group drawer
 $kendo-drawer-line-height: $kendo-line-height-md !default;
+
+/// The horizontal padding of the Drawer content.
+/// @group drawer
 $kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+/// The vertical padding of the Drawer content.
+/// @group drawer
 $kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
 
+/// The width of the Drawer scrollbar.
+/// @group drawer
 $kendo-drawer-scrollbar-width: 7px !default;
+/// The color of the Drawer scrollbar track.
+/// @group drawer
 $kendo-drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+/// The background color of the Drawer scrollbar thumb.
+/// @group drawer
 $kendo-drawer-scrollbar-bg: #dedede !default;
+/// The border radius of the Drawer scrollbar.
+/// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
+/// The hover color of the Drawer scrollbar track.
+/// @group drawer
 $kendo-drawer-scrollbar-hover-color: rgba(156, 156, 156, 1) !default;
 
+/// The horizontal padding of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-padding-y: $kendo-padding-md-x !default;
+/// The font size of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-font-size: 16px !default;
+/// The line height of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-line-height: $kendo-line-height-lg !default;
 
+/// The horizontal padding of the Drawer item in each level.
+/// @group drawer
 $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+/// The count of the Drawer item levels.
+/// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
 
+/// The horizontal padding of the Drawer icon.
+/// @group drawer
 $kendo-drawer-icon-padding-x: 0 !default;
+/// The vertical padding of the Drawer icon.
+/// @group drawer
 $kendo-drawer-icon-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The initial width of the mini Drawer.
+/// @group drawer
 $kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size}) !default;
 
+/// The background color of the hovered Drawer item.
+/// @group drawer
 $kendo-drawer-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered Drawer item.
+/// @group drawer
 $kendo-drawer-hover-text: $kendo-hover-text !default;
 
+/// The background color of the focused Drawer item.
+/// @group drawer
 $kendo-drawer-focus-bg: $kendo-drawer-bg !default;
+/// The box shadow of the focused Drawer item.
+/// @group drawer
 $kendo-drawer-focus-shadow: $kendo-list-item-focus-shadow !default;
 
+/// The background color of the selected Drawer item.
+/// @group drawer
 $kendo-drawer-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected Drawer item.
+/// @group drawer
 $kendo-drawer-selected-text: $kendo-selected-text !default;
+
+/// The background color of the selected and hovered Drawer item.
+/// @group drawer
 $kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default;
+/// The text color of the selected and hovered Drawer item.
+/// @group drawer
 $kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;

package/scss/floating-label/_layout.scss

@@ -17,7 +17,7 @@
             box-sizing: border-box;
         }
 
-        > .k-label {
+        > .k-floating-label {
             max-width: $kendo-floating-label-max-width;
             font-size: $kendo-floating-label-font-size;
             line-height: $kendo-floating-label-line-height;
@@ -32,13 +32,9 @@
             transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
         }
 
-        > .k-widget {
-            flex: 1 1 auto;
-            width: auto;
-        }
 
         &.k-empty {
-            > .k-label {
+            > .k-floating-label {
                 top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
                 left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 transform: scale( $kendo-floating-label-scale );
@@ -46,13 +42,13 @@
             }
         }
 
-        > .k-label,
-        &.k-focus > .k-label {
+        > .k-floating-label,
+        &.k-focus > .k-floating-label {
             top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
             left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
-        &:focus-within > .k-label {
+        &:focus-within > .k-floating-label {
             top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
             left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
@@ -66,24 +62,24 @@
         .k-rtl &,
         &[dir="rtl"] {
 
-            > .k-label {
+            > .k-floating-label {
                 transform-origin: right center;
                 transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
             }
 
             &.k-empty {
-                > .k-label {
+                > .k-floating-label {
                     left: auto;
                     right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 }
             }
 
-            > .k-label,
-            &.k-focus > .k-label {
+            > .k-floating-label,
+            &.k-focus > .k-floating-label {
                 left: auto;
                 right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }
-            &:focus-within > .k-label {
+            &:focus-within > .k-floating-label {
                 left: auto;
                 right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }

package/scss/floating-label/_theme.scss

@@ -3,23 +3,23 @@
     // Floating label
     .k-floating-label-container {
 
-        > .k-label {
+        > .k-floating-label {
             @include fill(
                 $color: $kendo-floating-label-text,
                 $bg: $kendo-floating-label-bg
             );
         }
 
-        &.k-focus > .k-label {
+        &.k-focus > .k-floating-label {
             @include fill(
                 $color: $kendo-floating-label-focus-text,
                 $bg: $kendo-floating-label-focus-bg
             );
         }
 
-        &.k-invalid > .k-label,
-        &.ng-invalid.ng-touched > .k-label,
-        &.ng-invalid.ng-dirty > .k-label {
+        &.k-invalid > .k-floating-label,
+        &.ng-invalid.ng-touched > .k-floating-label,
+        &.ng-invalid.ng-dirty > .k-floating-label {
             @include fill ( $color: $kendo-invalid-text );
         }
     }

package/scss/forms/_layout.scss

@@ -42,19 +42,6 @@
         }
     }
 
-    .k-input-label {
-        margin-right: $kendo-horizontal-form-label-margin-x;
-        z-index: 1;
-
-        &:dir(rtl),
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            margin-right: 0;
-            margin-left: $kendo-horizontal-form-label-margin-x;
-        }
-    }
 
 
     // Vertical Form

package/scss/panelbar/_layout.scss

@@ -25,7 +25,6 @@
 
 
         // Root
-        > .k-item,
         > .k-panelbar-header {
             // TODO
             border-width: 0;
@@ -51,14 +50,12 @@
                 transition: $kendo-transition;
             }
         }
-        > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
             border-top-width: $kendo-panelbar-item-border-width;
         }
 
 
         // Sub
-        .k-group,
         .k-panelbar-group {
             margin: 0;
             padding: 0;
@@ -68,7 +65,6 @@
             background-color: transparent;
             list-style: none;
         }
-        .k-group > .k-item,
         .k-panelbar-group > .k-panelbar-item {
             display: block;
 
@@ -115,8 +111,8 @@
         .k-panelbar-toggle {
             margin-inline-start: auto;
         }
-        .k-group .k-panelbar-expand,
-        .k-group .k-panelbar-collapse,
+        .k-panelbar-group .k-panelbar-expand,
+        .k-panelbar-group .k-panelbar-collapse,
         .k-panelbar-group .k-panelbar-toggle {
             margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
         }
@@ -125,7 +121,6 @@
         .k-rtl &,
         &.k-rtl,
         &[dir = "rtl"] {
-            .k-group > .k-item,
             .k-panelbar-group > .k-panelbar-item {
                 // Hierarchy items
                 @for $i from 1 through $kendo-panelbar-item-level-count {

package/scss/panelbar/_theme.scss

@@ -10,7 +10,6 @@
 
 
         // Root
-        > .k-item,
         > .k-panelbar-header {
 
             &.k-expanded.k-level-0 > .k-link  {
@@ -122,12 +121,9 @@
 
 
         // Sub
-        .k-group,
         .k-panelbar-group {
 
             // Hover
-            > .k-item > .k-link:hover,
-            > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
@@ -139,8 +135,6 @@
             }
 
             // Focus
-            > .k-item > .k-link:focus,
-            > .k-item > .k-link.k-focus,
             > .k-panelbar-item > .k-link:focus,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
@@ -153,8 +147,6 @@
             }
 
             // Focus & Hover
-            > .k-item > .k-link:focus:hover,
-            > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
@@ -166,7 +158,6 @@
             }
 
             // Selected
-            > .k-item > .k-link.k-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $kendo-panelbar-item-selected-text,
@@ -177,8 +168,6 @@
             }
 
             // Selected Hover
-            > .k-item > .k-link.k-selected:hover,
-            > .k-item > .k-link.k-selected.k-hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
@@ -190,8 +179,6 @@
             }
 
             // Selected Focus
-            > .k-item > .k-link.k-selected:focus,
-            > .k-item > .k-link.k-selected.k-focus,
             > .k-panelbar-item > .k-link.k-selected:focus,
             > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
@@ -203,8 +190,6 @@
             }
 
             // Selected Focus & Hover
-            > .k-item > .k-link.k-selected:focus:hover,
-            > .k-item > .k-link.k-selected.k-focus.k-hover,
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(