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

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 );
         }
     }
 
@@ -59,11 +59,11 @@
 
             &.k-expanded {
                 @include fill(
-                    $popup-text,
-                    $popup-bg,
-                    $popup-border
+                    $kendo-popup-text,
+                    $kendo-popup-bg,
+                    $kendo-popup-border
                 );
-                @include box-shadow( $popup-shadow );
+                @include box-shadow( $kendo-popup-shadow );
             }
 
         }

package/scss/pager/_variables.scss

@@ -1,42 +1,45 @@
+@import "../list/_variables.scss";
+
+
 // Pager
 
 /// Horizontal padding of the pager according to the pager size.
 /// @group pager
 $kendo-pager-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-pager-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-pager-padding-x-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-pager-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-pager-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-pager-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
 /// Vertical padding of the pager according to the pager size.
 /// @group pager
 $kendo-pager-padding-y: $kendo-pager-padding-x !default;
-$kendo-pager-padding-y-sm: $kendo-pager-padding-x-sm !default;
-$kendo-pager-padding-y-md: $kendo-pager-padding-x-md !default;
-$kendo-pager-padding-y-lg: $kendo-pager-padding-x-lg !default;
+$kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
+$kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
+$kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;
 
 /// Minimum width of the pager items according to the pager size.
 /// @group pager
-$kendo-pager-item-min-width-sm: $kendo-button-calc-size-sm !default;
-$kendo-pager-item-min-width-md: $kendo-button-calc-size-md !default;
-$kendo-pager-item-min-width-lg: $kendo-button-calc-size-lg !default;
+$kendo-pager-sm-item-min-width: $kendo-button-sm-calc-size !default;
+$kendo-pager-md-item-min-width: $kendo-button-md-calc-size !default;
+$kendo-pager-lg-item-min-width: $kendo-button-lg-calc-size !default;
 
 /// Margin between pager item groups according to the pager size.
 /// @group pager
-$kendo-pager-item-group-spacing-sm: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-pager-item-group-spacing-md: k-map-get( $kendo-spacing, 3.5 ) !default;
-$kendo-pager-item-group-spacing-lg: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-pager-sm-item-group-spacing: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-pager-md-item-group-spacing: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-pager-lg-item-group-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 
 /// Border width of the pager.
 /// @group pager
 $kendo-pager-border-width: 1px !default;
 /// Font family of the pager.
 /// @group pager
-$kendo-pager-font-family: $font-family !default;
+$kendo-pager-font-family: $kendo-font-family !default;
 /// Font size of the pager.
 /// @group pager
-$kendo-pager-font-size: $font-size !default;
+$kendo-pager-font-size: $kendo-font-size-md !default;
 /// Line height of the pager.
 /// @group pager
-$kendo-pager-line-height: $line-height !default;
+$kendo-pager-line-height: $kendo-line-height-md !default;
 /// Background color of the pager.
 /// @group pager
 $kendo-pager-bg: $kendo-component-header-bg !default;
@@ -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;
@@ -114,32 +118,32 @@ $kendo-pager-input-width: 5em !default;
 
 /// Width of the pager dropdowns according to the pager size.
 /// @group pager
-$kendo-pager-dropdown-width-sm: 5em !default;
-$kendo-pager-dropdown-width-md: 5em !default;
-$kendo-pager-dropdown-width-lg: 5em !default;
+$kendo-pager-sm-dropdown-width: 5em !default;
+$kendo-pager-md-dropdown-width: 5em !default;
+$kendo-pager-lg-dropdown-width: 5em !default;
 
 /// Sizes map of the pager.
 /// @group pager
 $kendo-pager-sizes: (
     sm: (
-        padding-x: $kendo-pager-padding-x-sm,
-        padding-y: $kendo-pager-padding-y-sm,
-        item-group-spacing: $kendo-pager-item-group-spacing-sm,
-        item-min-width: $kendo-pager-item-min-width-sm,
-        pager-dropdown-width: $kendo-pager-dropdown-width-sm
+        padding-x: $kendo-pager-sm-padding-x,
+        padding-y: $kendo-pager-sm-padding-y,
+        item-group-spacing: $kendo-pager-sm-item-group-spacing,
+        item-min-width: $kendo-pager-sm-item-min-width,
+        pager-dropdown-width: $kendo-pager-sm-dropdown-width
     ),
     md: (
-        padding-x: $kendo-pager-padding-x-md,
-        padding-y: $kendo-pager-padding-y-md,
-        item-group-spacing: $kendo-pager-item-group-spacing-md,
-        item-min-width: $kendo-pager-item-min-width-md,
-        pager-dropdown-width: $kendo-pager-dropdown-width-md
+        padding-x: $kendo-pager-md-padding-x,
+        padding-y: $kendo-pager-md-padding-y,
+        item-group-spacing: $kendo-pager-md-item-group-spacing,
+        item-min-width: $kendo-pager-md-item-min-width,
+        pager-dropdown-width: $kendo-pager-md-dropdown-width
     ),
     lg: (
-        padding-x: $kendo-pager-padding-x-lg,
-        padding-y: $kendo-pager-padding-y-lg,
-        item-group-spacing: $kendo-pager-item-group-spacing-lg,
-        item-min-width: $kendo-pager-item-min-width-lg,
-        pager-dropdown-width: $kendo-pager-dropdown-width-lg
+        padding-x: $kendo-pager-lg-padding-x,
+        padding-y: $kendo-pager-lg-padding-y,
+        item-group-spacing: $kendo-pager-lg-item-group-spacing,
+        item-min-width: $kendo-pager-lg-item-min-width,
+        pager-dropdown-width: $kendo-pager-lg-dropdown-width
     )
 ) !default;

package/scss/panelbar/_layout.scss

@@ -4,13 +4,13 @@
     .k-panelbar {
         margin: 0;
         padding: 0;
-        border-width: $panelbar-border-width;
-        border-style: $panelbar-border-style;
+        border-width: $kendo-panelbar-border-width;
+        border-style: $kendo-panelbar-border-style;
         box-sizing: border-box;
         outline: 0;
-        font-family: $panelbar-font-family;
-        font-size: $panelbar-font-size;
-        line-height: $panelbar-line-height;
+        font-family: $kendo-panelbar-font-family;
+        font-size: $kendo-panelbar-font-size;
+        line-height: $kendo-panelbar-line-height;
         list-style: none;
         display: block;
         -webkit-touch-callout: none;
@@ -28,19 +28,19 @@
         > .k-panelbar-header {
             // TODO
             border-width: 0;
-            border-style: $panelbar-item-border-style;
+            border-style: $kendo-panelbar-item-border-style;
             border-color: inherit;
             display: block;
 
             > .k-link {
-                padding: $panelbar-header-padding-y $panelbar-header-padding-x;
+                padding: $kendo-panelbar-header-padding-y $kendo-panelbar-header-padding-x;
                 color: inherit;
                 background: none;
                 text-decoration: none;
                 font-weight: 500;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $icon-spacing;
+                gap: $kendo-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;
@@ -51,7 +51,7 @@
         }
         > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: $panelbar-item-border-width;
+            border-top-width: $kendo-panelbar-item-border-width;
         }
 
 
@@ -71,12 +71,12 @@
             display: block;
 
             > .k-link {
-                padding: $panelbar-item-padding-y $panelbar-item-padding-x;
+                padding: $kendo-panelbar-item-padding-y $kendo-panelbar-item-padding-x;
                 color: inherit;
                 text-decoration: none;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $icon-spacing;
+                gap: $kendo-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;
@@ -86,10 +86,10 @@
             }
 
             // Hierarchy items
-            @for $i from 1 through $panelbar-item-level-count {
+            @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
                     .k-link {
-                        padding-left: ( $panelbar-item-padding-x * $i );
+                        padding-left: ( $kendo-panelbar-item-padding-x * $i );
                     }
                 }
             }
@@ -115,7 +115,7 @@
         .k-group .k-panelbar-expand,
         .k-group .k-panelbar-collapse,
         .k-panelbar-group .k-panelbar-toggle {
-            margin-inline-end: calc( #{$panelbar-header-padding-x} - #{$panelbar-item-padding-x} );
+            margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
         }
 
 
@@ -125,11 +125,11 @@
             .k-group > .k-item,
             .k-panelbar-group > .k-panelbar-item {
                 // Hierarchy items
-                @for $i from 1 through $panelbar-item-level-count {
+                @for $i from 1 through $kendo-panelbar-item-level-count {
                     &.k-level-#{$i} {
                         .k-link {
-                            padding-left: $panelbar-item-padding-x;
-                            padding-right: ( $panelbar-item-padding-x * $i );
+                            padding-left: $kendo-panelbar-item-padding-x;
+                            padding-right: ( $kendo-panelbar-item-padding-x * $i );
                         }
                     }
                 }

package/scss/panelbar/_theme.scss

@@ -2,9 +2,9 @@
 
     .k-panelbar {
         @include fill(
-            $panelbar-text,
-            $panelbar-bg,
-            $panelbar-border
+            $kendo-panelbar-text,
+            $kendo-panelbar-bg,
+            $kendo-panelbar-border
         );
 
 
@@ -14,25 +14,25 @@
 
             &.k-expanded.k-level-0 > .k-link  {
                 @include fill(
-                    $panelbar-header-expanded-text,
-                    $panelbar-header-expanded-bg,
-                    $panelbar-header-expanded-border,
-                    $panelbar-header-expanded-gradient
+                    $kendo-panelbar-header-expanded-text,
+                    $kendo-panelbar-header-expanded-bg,
+                    $kendo-panelbar-header-expanded-border,
+                    $kendo-panelbar-header-expanded-gradient
                 );
             }
 
             // Normal
             > .k-link {
                 @include fill(
-                    $panelbar-header-text,
-                    $panelbar-header-bg,
-                    $panelbar-header-border,
-                    $panelbar-header-gradient
+                    $kendo-panelbar-header-text,
+                    $kendo-panelbar-header-bg,
+                    $kendo-panelbar-header-border,
+                    $kendo-panelbar-header-gradient
                 );
 
                 .k-icon,
                 .k-panelbar-item-icon {
-                    color: $panelbar-text;
+                    color: $kendo-panelbar-text;
                 }
             }
 
@@ -40,10 +40,10 @@
             > .k-link:hover,
             > .k-link.k-hover {
                 @include fill(
-                    $panelbar-header-hover-text,
-                    $panelbar-header-hover-bg,
-                    $panelbar-header-hover-border,
-                    $panelbar-header-hover-gradient
+                    $kendo-panelbar-header-hover-text,
+                    $kendo-panelbar-header-hover-bg,
+                    $kendo-panelbar-header-hover-border,
+                    $kendo-panelbar-header-hover-gradient
                 );
             }
 
@@ -51,32 +51,32 @@
             > .k-link:focus,
             > .k-link.k-focus {
                 @include fill(
-                    $panelbar-header-focus-text,
-                    $panelbar-header-focus-bg,
-                    $panelbar-header-focus-border,
-                    $panelbar-header-focus-gradient
+                    $kendo-panelbar-header-focus-text,
+                    $kendo-panelbar-header-focus-bg,
+                    $kendo-panelbar-header-focus-border,
+                    $kendo-panelbar-header-focus-gradient
                 );
-                box-shadow: $panelbar-header-focus-shadow;
+                @include focus-indicator( $kendo-panelbar-header-focus-shadow, true );
             }
 
             // Focus & Hover
             > .k-link:focus:hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
-                    $panelbar-header-hover-focus-text,
-                    $panelbar-header-hover-focus-bg,
-                    $panelbar-header-hover-focus-border,
-                    $panelbar-header-hover-focus-gradient
+                    $kendo-panelbar-header-hover-focus-text,
+                    $kendo-panelbar-header-hover-focus-bg,
+                    $kendo-panelbar-header-hover-focus-border,
+                    $kendo-panelbar-header-hover-focus-gradient
                 );
             }
 
             // Selected
             > .k-link.k-selected {
                 @include fill(
-                    $panelbar-header-selected-text,
-                    $panelbar-header-selected-bg,
-                    $panelbar-header-selected-border,
-                    $panelbar-header-selected-gradient
+                    $kendo-panelbar-header-selected-text,
+                    $kendo-panelbar-header-selected-bg,
+                    $kendo-panelbar-header-selected-border,
+                    $kendo-panelbar-header-selected-gradient
                 );
 
                 .k-icon,
@@ -89,10 +89,10 @@
             > .k-link.k-selected:hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
-                    $panelbar-header-selected-hover-text,
-                    $panelbar-header-selected-hover-bg,
-                    $panelbar-header-selected-hover-border,
-                    $panelbar-header-selected-hover-gradient
+                    $kendo-panelbar-header-selected-hover-text,
+                    $kendo-panelbar-header-selected-hover-bg,
+                    $kendo-panelbar-header-selected-hover-border,
+                    $kendo-panelbar-header-selected-hover-gradient
                 );
             }
 
@@ -100,10 +100,10 @@
             > .k-link.k-selected:focus,
             > .k-link.k-selected.k-focus {
                 @include fill(
-                    $panelbar-header-selected-focus-text,
-                    $panelbar-header-selected-focus-bg,
-                    $panelbar-header-selected-focus-border,
-                    $panelbar-header-selected-focus-gradient
+                    $kendo-panelbar-header-selected-focus-text,
+                    $kendo-panelbar-header-selected-focus-bg,
+                    $kendo-panelbar-header-selected-focus-border,
+                    $kendo-panelbar-header-selected-focus-gradient
                 );
             }
 
@@ -111,10 +111,10 @@
             > .k-link.k-selected:hover:focus,
             > .k-link.k-selected.k-hover.k-focus {
                 @include fill(
-                    $panelbar-header-selected-hover-focus-text,
-                    $panelbar-header-selected-hover-focus-bg,
-                    $panelbar-header-selected-hover-focus-border,
-                    $panelbar-header-selected-hover-focus-gradient
+                    $kendo-panelbar-header-selected-hover-focus-text,
+                    $kendo-panelbar-header-selected-hover-focus-bg,
+                    $kendo-panelbar-header-selected-hover-focus-border,
+                    $kendo-panelbar-header-selected-hover-focus-gradient
                 );
             }
         }
@@ -130,10 +130,10 @@
             > .k-panelbar-item > .k-link:hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
-                    $panelbar-item-hover-text,
-                    $panelbar-item-hover-bg,
-                    $panelbar-item-hover-border,
-                    $panelbar-item-hover-gradient
+                    $kendo-panelbar-item-hover-text,
+                    $kendo-panelbar-item-hover-bg,
+                    $kendo-panelbar-item-hover-border,
+                    $kendo-panelbar-item-hover-gradient
                 );
             }
 
@@ -143,12 +143,12 @@
             > .k-panelbar-item > .k-link:focus,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
-                    $panelbar-item-focus-text,
-                    $panelbar-item-focus-bg,
-                    $panelbar-item-focus-border,
-                    $panelbar-item-focus-gradient
+                    $kendo-panelbar-item-focus-text,
+                    $kendo-panelbar-item-focus-bg,
+                    $kendo-panelbar-item-focus-border,
+                    $kendo-panelbar-item-focus-gradient
                 );
-                box-shadow: $panelbar-item-focus-shadow;
+                @include focus-indicator( $kendo-panelbar-item-focus-shadow, true );
             }
 
             // Focus & Hover
@@ -157,10 +157,10 @@
             > .k-panelbar-item > .k-link:focus:hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
-                    $panelbar-item-hover-focus-text,
-                    $panelbar-item-hover-focus-bg,
-                    $panelbar-item-hover-focus-border,
-                    $panelbar-item-hover-focus-gradient
+                    $kendo-panelbar-item-hover-focus-text,
+                    $kendo-panelbar-item-hover-focus-bg,
+                    $kendo-panelbar-item-hover-focus-border,
+                    $kendo-panelbar-item-hover-focus-gradient
                 );
             }
 
@@ -168,10 +168,10 @@
             > .k-item > .k-link.k-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
-                    $panelbar-item-selected-text,
-                    $panelbar-item-selected-bg,
-                    $panelbar-item-selected-border,
-                    $panelbar-item-selected-gradient
+                    $kendo-panelbar-item-selected-text,
+                    $kendo-panelbar-item-selected-bg,
+                    $kendo-panelbar-item-selected-border,
+                    $kendo-panelbar-item-selected-gradient
                 );
             }
 
@@ -181,10 +181,10 @@
             > .k-panelbar-item > .k-link.k-selected:hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
-                    $panelbar-item-selected-hover-text,
-                    $panelbar-item-selected-hover-bg,
-                    $panelbar-item-selected-hover-border,
-                    $panelbar-item-selected-hover-gradient
+                    $kendo-panelbar-item-selected-hover-text,
+                    $kendo-panelbar-item-selected-hover-bg,
+                    $kendo-panelbar-item-selected-hover-border,
+                    $kendo-panelbar-item-selected-hover-gradient
                 );
             }
 
@@ -194,10 +194,10 @@
             > .k-panelbar-item > .k-link.k-selected:focus,
             > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
-                    $panelbar-item-selected-focus-text,
-                    $panelbar-item-selected-focus-bg,
-                    $panelbar-item-selected-focus-border,
-                    $panelbar-item-selected-focus-gradient
+                    $kendo-panelbar-item-selected-focus-text,
+                    $kendo-panelbar-item-selected-focus-bg,
+                    $kendo-panelbar-item-selected-focus-border,
+                    $kendo-panelbar-item-selected-focus-gradient
                 );
             }
 
@@ -207,10 +207,10 @@
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(
-                    $panelbar-item-selected-hover-focus-text,
-                    $panelbar-item-selected-hover-focus-bg,
-                    $panelbar-item-selected-hover-focus-border,
-                    $panelbar-item-selected-hover-focus-gradient
+                    $kendo-panelbar-item-selected-hover-focus-text,
+                    $kendo-panelbar-item-selected-hover-focus-bg,
+                    $kendo-panelbar-item-selected-hover-focus-border,
+                    $kendo-panelbar-item-selected-hover-focus-gradient
                 );
             }
         }