@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/listbox/_layout.scss

@@ -1,79 +1,55 @@
 @include exports( "listbox/layout" ) {
 
     .k-listbox {
-        width: $listbox-width;
-        height: $listbox-default-height;
+        width: $kendo-listbox-width;
+        height: $kendo-listbox-default-height;
         border-width: 0;
         outline: 0;
-        font-family: $listbox-font-family;
-        font-size: $listbox-font-size;
-        line-height: $listbox-line-height;
+        font-family: $kendo-listbox-font-family;
+        font-size: $kendo-listbox-font-size;
+        line-height: $kendo-listbox-line-height;
         vertical-align: top;
         background-color: transparent;
         display: inline-flex;
+        gap: $kendo-listbox-spacing;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
-        .k-listbox-toolbar ul {
+        .k-listbox-actions {
             display: flex;
+            gap: $kendo-listbox-button-spacing;
         }
 
-        &.k-listbox-toolbar-left,
-        &.k-listbox-toolbar-right {
-            .k-listbox-toolbar ul {
-                flex-direction: column;
-            }
-
-            .k-listbox-toolbar li + li {
-                margin-top: $listbox-button-margin;
-            }
-        }
-
-        &.k-listbox-toolbar-left {
+        &.k-listbox-actions-left,
+        &.k-listbox-actions-right {
             flex-direction: row;
 
-            .k-listbox-toolbar {
-                margin-right: $listbox-margin;
+            .k-listbox-actions {
+                flex-direction: column;
             }
         }
 
-        &.k-listbox-toolbar-right {
+        &.k-listbox-actions-right {
             flex-direction: row-reverse;
-
-            .k-listbox-toolbar {
-                margin-left: $listbox-margin;
-            }
         }
 
-        &.k-listbox-toolbar-top,
-        &.k-listbox-toolbar-bottom {
+        &.k-listbox-actions-top,
+        &.k-listbox-actions-bottom {
             flex-direction: column;
 
-            .k-listbox-toolbar ul {
+            .k-listbox-actions {
                 flex-direction: row;
             }
-
-            .k-listbox-toolbar li + li {
-                margin-left: $listbox-button-margin;
-            }
         }
 
-        &.k-listbox-toolbar-top {
-            .k-listbox-toolbar {
-                margin-bottom: $listbox-margin;
-            }
-        }
-
-        &.k-listbox-toolbar-bottom {
-            .k-listbox-toolbar {
-                margin-top: $listbox-margin;
-            }
+        &.k-listbox-actions-bottom {
+            flex-direction: column-reverse;
         }
 
         .k-list-scroller {
             width: 100%;
             height: inherit;
-            border-width: $listbox-border-width;
+            border-width: $kendo-listbox-border-width;
             border-style: solid;
             box-sizing: border-box;
 
@@ -88,7 +64,7 @@
         }
 
         .k-drop-hint {
-            border-top-width: $listbox-drop-hint-width;
+            border-top-width: $kendo-listbox-drop-hint-width;
             border-top-style: solid;
         }
 
@@ -100,26 +76,12 @@
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            &.k-listbox-toolbar-left,
-            &.k-listbox-toolbar-right {
-                .k-listbox-toolbar {
+            &.k-listbox-actions-left,
+            &.k-listbox-actions-right {
+                .k-listbox-actions {
                     transform: scaleX(-1);
                 }
             }
-
-            &.k-listbox-toolbar-left {
-                .k-listbox-toolbar {
-                    margin-right: 0;
-                    margin-left: $listbox-margin;
-                }
-            }
-
-            &.k-listbox-toolbar-right {
-                .k-listbox-toolbar {
-                    margin-right: $listbox-margin;
-                    margin-left: 0;
-                }
-            }
         }
     }
 

package/scss/listbox/_theme.scss

@@ -3,13 +3,13 @@
     .k-listbox {
         .k-list-scroller {
             @include fill(
-                $listbox-text,
-                $listbox-bg,
-                $listbox-border
+                $kendo-listbox-text,
+                $kendo-listbox-bg,
+                $kendo-listbox-border
             );
         }
         .k-drop-hint {
-            border-top-color: $primary;
+            border-top-color: $kendo-color-primary;
         }
     }
 

package/scss/listbox/_variables.scss

@@ -1,20 +1,49 @@
 // Listbox
-$listbox-margin: $padding-x !default;
-$listbox-button-margin: $padding-x !default;
-$listbox-width: 10em !default;
-$listbox-default-height: 200px !default;
 
-$listbox-border-width: 1px !default;
-$listbox-font-family: $font-family !default;
-$listbox-font-size: $font-size !default;
-$listbox-line-height: $line-height !default;
+/// Margin between the listbox elements.
+/// @group listbox
+$kendo-listbox-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// Margin between the listbox buttons.
+/// @group listbox
+$kendo-listbox-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// Width of the listbox.
+/// @group listbox
+$kendo-listbox-width: 10em !default;
+/// Height of the listbox.
+/// @group listbox
+$kendo-listbox-default-height: 200px !default;
+/// Width of the border around the listbox.
+/// @group listbox
+$kendo-listbox-border-width: 1px !default;
+/// Font family of the listbox.
+/// @group listbox
+$kendo-listbox-font-family: $font-family !default;
+/// Font size of the listbox.
+/// @group listbox
+$kendo-listbox-font-size: $font-size !default;
+/// Line height of the listbox.
+/// @group listbox
+$kendo-listbox-line-height: $line-height !default;
+/// Background color of the listbox.
+/// @group listbox
+$kendo-listbox-bg: $kendo-component-bg !default;
+/// Text color of the listbox.
+/// @group listbox
+$kendo-listbox-text: $kendo-component-text !default;
+/// Border color of the listbox.
+/// @group listbox
+$kendo-listbox-border: $kendo-component-border !default;
 
-$listbox-bg: $component-bg !default;
-$listbox-text: $component-text !default;
-$listbox-border: $component-border !default;
+/// Inline item padding of the listbox.
+/// @group listbox
+$kendo-listbox-item-padding-x: null !default;
+/// Block item padding of the listbox.
+/// @group listbox
+$kendo-listbox-item-padding-y: null !default;
 
-$listbox-item-padding-x: null !default;
-$listbox-item-padding-y: null !default;
-
-$listbox-drop-hint-border-width: null !default;
-$listbox-drop-hint-width: 1px !default;
+/// Width of the border around the drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-border-width: null !default;
+/// Width of the drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-width: 1px !default;

package/scss/listgroup/_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/listgroup/_variables.scss

@@ -5,10 +5,10 @@ $listgroup-border-radius: $kendo-border-radius-md !default;
 $listgroup-font-size: $font-size !default;
 $listgroup-line-height: $line-height !default;
 
-$listgroup-bg: $component-bg !default;
-$listgroup-text: $component-text !default;
-$listgroup-border: $component-border !default;
+$listgroup-bg: $kendo-component-bg !default;
+$listgroup-text: $kendo-component-text !default;
+$listgroup-border: $kendo-component-border !default;
 
-$listgroup-item-padding-x: map-get( $spacing, 2 ) !default;
-$listgroup-item-padding-y: map-get( $spacing, 2 ) !default;
+$listgroup-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$listgroup-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $listgroup-item-border-width: 1px !default;

package/scss/listview/_index.scss

@@ -3,13 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
 @import "../pager/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/listview/_layout.scss

@@ -7,16 +7,16 @@
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $listview-font-family;
-        font-size: $listview-font-size;
-        line-height: $listview-line-height;
+        font-family: $kendo-listview-font-family;
+        font-size: $kendo-listview-font-size;
+        line-height: $kendo-listview-line-height;
         flex-flow: column nowrap;
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: transparent;
     }
     .k-listview-bordered {
-        border-width: $listview-border-width;
+        border-width: $kendo-listview-border-width;
     }
 
 
@@ -27,7 +27,7 @@
         border-color: inherit;
     }
     .k-listview-bordered > .k-listview-header {
-        border-bottom-width: $listview-border-width;
+        border-bottom-width: $kendo-listview-border-width;
     }
 
 
@@ -51,10 +51,10 @@
         &::after { display: none; }
     }
     .k-listview-content-padding-rectangle {
-        padding: $listview-padding-y $listview-padding-x;
+        padding: $kendo-listview-padding-y $kendo-listview-padding-x;
     }
     .k-listview-content-padding-square {
-        padding: $listview-padding-y;
+        padding: $kendo-listview-padding-y;
     }
 
 
@@ -68,18 +68,18 @@
         flex-shrink: 0;
     }
     .k-listview-item-padding-rectangle {
-        padding: $listview-item-padding-y $listview-item-padding-x;
+        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-rectangle .k-listview-link {
-        margin: (-$listview-item-padding-y) (-$listview-item-padding-x);
-        padding: $listview-item-padding-y $listview-item-padding-x;
+        margin: (-$kendo-listview-item-padding-y) (-$kendo-listview-item-padding-x);
+        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-square {
-        padding: $listview-item-padding-y;
+        padding: $kendo-listview-item-padding-y;
     }
     .k-listview-item-padding-square .k-listview-link {
-        margin: (-$listview-item-padding-y);
-        padding: $listview-item-padding-y;
+        margin: (-$kendo-listview-item-padding-y);
+        padding: $kendo-listview-item-padding-y;
     }
 
 
@@ -90,7 +90,7 @@
         border-color: inherit;
     }
     .k-listview-bordered > .k-listview-footer {
-        border-top-width: $listview-border-width;
+        border-top-width: $kendo-listview-border-width;
     }
 
 
@@ -98,13 +98,12 @@
     .k-listview-pager {
         border-width: 0;
         border-color: inherit;
-        font: inherit;
     }
     .k-listview-bordered > .k-listview-pager-top {
-        border-bottom-width: $listview-border-width;
+        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
     }
     .k-listview-bordered > .k-listview-pager-bottom {
-        border-top-width: $listview-border-width;
+        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
     }
 
 

package/scss/listview/_theme.scss

@@ -3,9 +3,9 @@
     // Listview
     .k-listview {
         @include fill(
-            $listview-text,
-            $listview-bg,
-            $listview-border
+            $kendo-listview-text,
+            $kendo-listview-bg,
+            $kendo-listview-border
         );
     }
 
@@ -15,21 +15,26 @@
 
         > .k-focus {
             @include fill(
-                $listview-item-focus-text,
-                $listview-item-focus-bg,
-                $listview-item-focus-border
+                $kendo-listview-item-focus-text,
+                $kendo-listview-item-focus-bg,
+                $kendo-listview-item-focus-border
             );
-            @include box-shadow( $listview-item-focus-shadow );
+            @include focus-indicator( $kendo-listview-item-focus-shadow, true );
         }
 
         > .k-selected {
             @include fill(
-                $listview-item-selected-text,
-                $listview-item-selected-bg,
-                $listview-item-selected-border
+                $kendo-listview-item-selected-text,
+                $kendo-listview-item-selected-bg,
+                $kendo-listview-item-selected-border
             );
         }
 
     }
 
+    // List item
+    .k-listview-item {
+        border-color: $kendo-listview-border;
+    }
+
 }

package/scss/listview/_variables.scss

@@ -1,25 +1,25 @@
 // Listview
-$listview-padding-x: map-get( $spacing, 1 ) !default;
-$listview-padding-y: map-get( $spacing, 1 ) !default;
-$listview-border-width: 1px !default;
-$listview-font-family: $font-family !default;
-$listview-font-size: $font-size !default;
-$listview-line-height: $line-height !default;
+$kendo-listview-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-border-width: 1px !default;
+$kendo-listview-font-family: $font-family !default;
+$kendo-listview-font-size: $font-size !default;
+$kendo-listview-line-height: $line-height !default;
 
-$listview-bg: $component-bg !default;
-$listview-text: $component-text !default;
-$listview-border: $component-border !default;
+$kendo-listview-bg: $kendo-component-bg !default;
+$kendo-listview-text: $kendo-component-text !default;
+$kendo-listview-border: $kendo-component-border !default;
 
-$listview-grid-gap: 10px !default;
+$kendo-listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
-$listview-item-selected-text: null !default;
-$listview-item-selected-border: null !default;
+$kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: null !default;
-$listview-item-focus-text: null !default;
-$listview-item-focus-border: null !default;
-$listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-listview-item-focus-bg: null !default;
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/loader/_index.scss

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