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

package/scss/input/_layout.scss

@@ -201,7 +201,7 @@
     .k-input-separator {
         margin: 0;
         width: 0;
-        height: $icon-size;
+        height: $kendo-icon-size;
         border-width: 0 0 0 1px;
         border-style: solid;
         border-color: inherit;

package/scss/input/_theme.scss

@@ -27,7 +27,7 @@
                 $kendo-input-focus-bg,
                 $kendo-input-focus-border
             );
-            @include box-shadow( $kendo-input-focus-shadow );
+            @include focus-indicator( $kendo-input-focus-shadow );
         }
         &:focus-within {
             @include fill (
@@ -35,7 +35,7 @@
                 $kendo-input-focus-bg,
                 $kendo-input-focus-border
             );
-            @include box-shadow( $kendo-input-focus-shadow );
+            @include focus-indicator( $kendo-input-focus-shadow );
         }
 
         // Disabled
@@ -63,10 +63,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
 
@@ -103,7 +103,7 @@
                 $kendo-picker-focus-border,
                 $kendo-picker-focus-gradient
             );
-            @include box-shadow( $kendo-picker-focus-shadow );
+            @include focus-indicator( $kendo-picker-focus-shadow );
         }
         &:focus-within {
             @include fill (
@@ -112,7 +112,7 @@
                 $kendo-picker-focus-border,
                 $kendo-picker-focus-gradient
             );
-            @include box-shadow( $kendo-picker-focus-shadow );
+            @include focus-indicator( $kendo-picker-focus-shadow );
         }
 
         // Disabled
@@ -140,10 +140,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
     }
@@ -188,7 +188,7 @@
                 $kendo-input-outline-focus-bg,
                 $kendo-input-outline-focus-border
              );
-            @include box-shadow ( $kendo-input-outline-focus-shadow );
+            @include focus-indicator( $kendo-input-outline-focus-shadow );
         }
         &:focus-within {
             @include fill (
@@ -196,7 +196,7 @@
                 $kendo-input-outline-focus-bg,
                 $kendo-input-outline-focus-border
              );
-            @include box-shadow ( $kendo-input-outline-focus-shadow );
+            @include focus-indicator( $kendo-input-outline-focus-shadow );
         }
 
         // Disabled
@@ -224,10 +224,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
 
@@ -260,7 +260,7 @@
                 $kendo-picker-outline-focus-bg,
                 $kendo-picker-outline-focus-border
             );
-            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+            @include focus-indicator( $kendo-picker-outline-focus-shadow );
         }
         &:focus-within {
             @include fill (
@@ -268,7 +268,7 @@
                 $kendo-picker-outline-focus-bg,
                 $kendo-picker-outline-focus-border
             );
-            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+            @include focus-indicator( $kendo-picker-outline-focus-shadow );
         }
 
         &:focus:hover,
@@ -307,10 +307,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
     }
@@ -342,7 +342,7 @@
                 $kendo-input-flat-focus-bg,
                 $kendo-input-flat-focus-border
             );
-            @include box-shadow( $kendo-input-flat-focus-shadow );
+            @include focus-indicator( $kendo-input-flat-focus-shadow );
         }
         &:focus-within {
             @include fill (
@@ -350,7 +350,7 @@
                 $kendo-input-flat-focus-bg,
                 $kendo-input-flat-focus-border
             );
-            @include box-shadow( $kendo-input-flat-focus-shadow );
+            @include focus-indicator( $kendo-input-flat-focus-shadow );
         }
 
         // Disabled
@@ -378,10 +378,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
     }
@@ -413,7 +413,7 @@
                 $kendo-picker-flat-focus-bg,
                 $kendo-picker-flat-focus-border
             );
-            @include box-shadow( $kendo-picker-flat-focus-shadow );
+            @include focus-indicator( $kendo-picker-flat-focus-shadow );
         }
         &:focus-within {
             @include fill (
@@ -421,7 +421,7 @@
                 $kendo-picker-flat-focus-bg,
                 $kendo-picker-flat-focus-border
             );
-            @include box-shadow( $kendo-picker-flat-focus-shadow );
+            @include focus-indicator( $kendo-picker-flat-focus-shadow );
         }
 
         &:focus:hover,
@@ -460,10 +460,10 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow( $kendo-input-invalid-shadow );
+                @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
     }

package/scss/input/_variables.scss

@@ -49,7 +49,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-padding-y-sm,
         font-size: $kendo-input-font-size-sm,
         line-height: $kendo-input-line-height-sm,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
+        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-padding-y-sm * 2} ),
         button-padding-x: $kendo-input-padding-y-sm,
         button-padding-y: $kendo-input-padding-y-sm
     ),
@@ -58,7 +58,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-padding-y-md,
         font-size: $kendo-input-font-size-md,
         line-height: $kendo-input-line-height-md,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
+        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-padding-y-md * 2} ),
         button-padding-x: $kendo-input-padding-y-md,
         button-padding-y: $kendo-input-padding-y-md
     ),
@@ -67,7 +67,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-padding-y-lg,
         font-size: $kendo-input-font-size-lg,
         line-height: $kendo-input-line-height-lg,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
+        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-padding-y-lg * 2} ),
         button-padding-x: $kendo-input-padding-y-lg,
         button-padding-y: $kendo-input-padding-y-lg
     )

package/scss/list/_layout.scss

@@ -93,7 +93,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: $icon-spacing;
+        gap: $kendo-icon-spacing;
         position: relative;
         transition-property: color, background-color, outline-color, box-shadow;
         transition-duration: 200ms;
@@ -136,7 +136,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: $icon-spacing;
+        gap: $kendo-icon-spacing;
         position: relative;
     }
 

package/scss/list/_theme.scss

@@ -45,7 +45,7 @@
                 $kendo-list-item-focus-text,
                 $kendo-list-item-focus-bg
             );
-            @include box-shadow( $kendo-list-item-focus-shadow );
+            @include focus-indicator( $kendo-list-item-focus-shadow, true );
         }
 
         // Selected

package/scss/listview/_index.scss

@@ -3,8 +3,8 @@
 
 // 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";
 

package/scss/listview/_theme.scss

@@ -19,7 +19,7 @@
                 $kendo-listview-item-focus-bg,
                 $kendo-listview-item-focus-border
             );
-            @include box-shadow( $kendo-listview-item-focus-shadow );
+            @include focus-indicator( $kendo-listview-item-focus-shadow, true );
         }
 
         > .k-selected {

package/scss/loader/_variables.scss

@@ -1,4 +1,5 @@
 // Loader
+
 $kendo-loader-segment-border-radius: 50% !default;
 $kendo-loader-segment-size-sm: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-loader-segment-size-md: k-map-get( $kendo-spacing, 2 ) !default;

package/scss/map/_index.scss

@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";
 @import "../icons/_index.scss";

package/scss/map/_layout.scss

@@ -121,7 +121,7 @@
 
     // Zoom control
     .k-zoom-control {
-        margin: $spacer-x;
+        margin: k-map-get( $kendo-spacing, 4 );
         border: 0;
         background: none;
         display: flex;

package/scss/map/_variables.scss

@@ -9,13 +9,13 @@ $map-bg: $kendo-component-bg !default;
 $map-text: $kendo-component-text !default;
 $map-border: $kendo-component-border !default;
 
-$map-navigator-margin: $spacer-x !default;
+$map-navigator-margin: k-map-get( $kendo-spacing, 4 ) !default;
 $map-navigator-padding: 2px !default;
-$map-navigator-width: calc( #{$icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
+$map-navigator-width: calc( #{$kendo-icon-size * 3} + #{$map-navigator-padding * 2} ) !default;
 $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
-$map-zoom-control-margin: $spacer-x !default;
+$map-zoom-control-margin: k-map-get( $kendo-spacing, 4 ) !default;
 $map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
@@ -24,5 +24,5 @@ $map-attribution-padding-y: $kendo-padding-sm-y !default;
 $map-attribution-font-size: ($map-font-size * .75) !default;
 $map-attribution-bg: rgba( $map-bg, .8 ) !default;
 
-$map-marker-size: $icon-size-lg !default;
+$map-marker-size: $kendo-icon-size-xxl !default;
 $map-marker-fill: $kendo-color-primary !default;

package/scss/menu/_layout.scss

@@ -75,7 +75,7 @@
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin-inline-end: -$icon-spacing;
+        margin-inline-end: -$kendo-icon-spacing;
         display: inline-flex;
         flex-flow: row wrap;
         align-items: center;

package/scss/menu/_theme.scss

@@ -38,7 +38,7 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $menu-item-focus-shadow );
+                @include focus-indicator( $menu-item-focus-shadow, true );
             }
         }
     }
@@ -85,7 +85,7 @@
         .k-item:focus,
         .k-item.k-focus {
             > .k-link {
-                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
             }
         }
     }

package/scss/menu/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Menu
+
 $menu-padding-x: 0px !default;
 $menu-padding-y: 0px !default;
 $menu-border-width: 0px !default;
@@ -14,7 +18,7 @@ $menu-gradient: null !default;
 $menu-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
 $menu-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 $menu-item-spacing: 0 !default;
-$menu-item-icon-spacing: $icon-spacing !default;
+$menu-item-icon-spacing: $kendo-icon-spacing !default;
 
 $menu-item-bg: null !default;
 $menu-item-text: $link-text !default;
@@ -106,10 +110,10 @@ $kendo-menu-popup-item-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
+$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$kendo-icon-size} ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu

package/scss/messagebox/_variables.scss

@@ -1,5 +1,5 @@
 // Message box
-$message-box-margin: 0 0 $spacer 0 !default;
+$message-box-margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0 !default;
 $message-box-padding-x: $kendo-padding-md-x !default;
 $message-box-padding-y: $kendo-padding-md-y !default;
 $message-box-border-width: 0 0 0 4px !default;

package/scss/multiselect/_index.scss

@@ -3,7 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../forms/_variables.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../chip/_index.scss";

package/scss/notification/_variables.scss

@@ -27,7 +27,7 @@ $kendo-notification-line-height: $line-height !default;
 
 /// Horizontal spacing of the notification icon.
 /// @group notification
-$kendo-notification-icon-spacing: $icon-spacing !default;
+$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
 /// Background color of the notification.
 /// @group notification

package/scss/orgchart/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_index.scss";
+// @import "../utils/_index.scss";
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../forms/_index.scss";

package/scss/orgchart/_theme.scss

@@ -19,7 +19,7 @@
 
         &:focus,
         &.k-focus {
-            @include box-shadow( $orgchart-card-focus-shadow );
+            @include focus-indicator( $orgchart-card-focus-shadow );
         }
     }
 
@@ -33,7 +33,7 @@
     }
     .k-orgchart-node-group-container:focus,
     .k-orgchart-node-group-container.k-focus {
-        @include box-shadow( $orgchart-node-group-focus-shadow );
+        @include focus-indicator( $orgchart-node-group-focus-shadow );
         @include fill ( $border: $orgchart-node-group-focus-border );
     }
 

package/scss/pager/_index.scss

@@ -5,8 +5,6 @@
 @import "../common/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../icons/_index.scss";
-@import "../toolbar/_variables.scss";
-@import "../list/_index.scss";
 @import "../button/_index.scss";
 
 

package/scss/pager/_theme.scss

@@ -10,7 +10,7 @@
         &:focus,
         &.k-focus {
             @include fill( $bg: $kendo-pager-focus-bg );
-            @include box-shadow( $kendo-pager-focus-shadow );
+            @include focus-indicator( $kendo-pager-focus-shadow, true );
         }
     }
 
@@ -42,7 +42,7 @@
         &:focus,
         &.k-focus {
             background-color: $kendo-pager-item-focus-bg;
-            @include box-shadow( $kendo-pager-item-focus-shadow );
+            @include focus-indicator( $kendo-pager-item-focus-shadow, true );
         }
     }
 

package/scss/pager/_variables.scss

@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Pager
 
 /// Horizontal padding of the pager according to the pager size.
@@ -56,7 +59,8 @@ $kendo-pager-focus-shadow: $kendo-focus-shadow !default;
 
 /// Spacing between the pager sections.
 /// @group pager
-$kendo-pager-section-spacing: $spacer-x !default;
+$kendo-pager-section-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+
 /// Border width of the pager items.
 /// @group pager
 $kendo-pager-item-border-width: 0px !default;

package/scss/panelbar/_layout.scss

@@ -40,7 +40,7 @@
                 font-weight: 500;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $icon-spacing;
+                gap: $kendo-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;
@@ -76,7 +76,7 @@
                 text-decoration: none;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $icon-spacing;
+                gap: $kendo-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;

package/scss/panelbar/_theme.scss

@@ -56,7 +56,7 @@
                     $panelbar-header-focus-border,
                     $panelbar-header-focus-gradient
                 );
-                box-shadow: $panelbar-header-focus-shadow;
+                @include focus-indicator( $panelbar-header-focus-shadow, true );
             }
 
             // Focus & Hover
@@ -148,7 +148,7 @@
                     $panelbar-item-focus-border,
                     $panelbar-item-focus-gradient
                 );
-                box-shadow: $panelbar-item-focus-shadow;
+                @include focus-indicator( $panelbar-item-focus-shadow, true );
             }
 
             // Focus & Hover

package/scss/panelbar/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Panelbar
+
 $panelbar-padding-x: 0px !default;
 $panelbar-padding-y: 0px !default;
 $panelbar-font-family: $font-family !default;

package/scss/pdf-viewer/_index.scss

@@ -3,8 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_index.scss";
-@import "../button/_variables.scss";
+// @import "../utils/_index.scss";
 @import "../combobox/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../dialog/_index.scss";

package/scss/pdf-viewer/_variables.scss

@@ -1,4 +1,5 @@
 // PDF viewer
+
 $pdf-viewer-border-width: 1px !default;
 $pdf-viewer-font-family: $font-family !default;
 $pdf-viewer-font-size: $font-size !default;
@@ -42,4 +43,4 @@ $pdf-viewer-search-highlight-bg: $kendo-body-text !default;
 $pdf-viewer-search-highlight-mark-bg: yellow !default;
 
 $pdf-viewer-icon-text: $dropzone-icon-text !default;
-$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
+$pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;

package/scss/pivotgrid/_index.scss

@@ -7,12 +7,12 @@
 @import "../treeview/_index.scss";
 @import "../grid/_index.scss";
 @import "../icons/_index.scss";
-@import "../utils/_spacer.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_spacer.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
+// @import "../utils/_position.scss";
 @import "../list/_index.scss";
-@import "../table/_variables.scss";
+
 
 // Component
 @import "./_variables.scss";

package/scss/pivotgrid/_theme.scss

@@ -67,7 +67,7 @@
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
     .k-group-footer > .k-pivotgrid-cell:focus {
-        @include box-shadow($pivotgrid-focus-shadow);
+        @include focus-indicator( $pivotgrid-focus-shadow, true );
     }
 
     // Selected state

package/scss/pivotgrid/_variables.scss

@@ -1,3 +1,6 @@
+@import "../table/_variables.scss";
+
+
 // Pivot grid
 $pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default;
 $pivotgrid-padding-x: null !default;