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

package/scss/pager/_layout.scss

@@ -1,15 +1,14 @@
 @include exports("pager/layout") {
 
-    .k-pager-wrap,
     .k-pager {
-        padding: $pager-padding-y $pager-padding-x;
-        border-width: $pager-border-width;
+        padding: 0;
+        border-width: $kendo-pager-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $pager-font-family;
-        font-size: $pager-font-size;
-        line-height: $pager-line-height;
+        font-family: $kendo-pager-font-family;
+        font-size: $kendo-pager-font-size;
+        line-height: $kendo-pager-line-height;
         white-space: nowrap;
         display: flex;
         align-items: center;
@@ -18,7 +17,7 @@
         cursor: default;
         flex: 0 0 auto;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -26,19 +25,6 @@
             box-sizing: border-box;
         }
 
-        .k-link {
-            text-decoration: none;
-            outline: 0;
-            font: inherit;
-            background-color: inherit;
-
-            // Focused state
-            &:focus,
-            &.k-focus {
-                z-index: 3;
-            }
-        }
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
@@ -63,10 +49,6 @@
 
     // Base pager section
     %base-pager-section {
-        @if ($pager-section-spacing) {
-            margin-left: $pager-section-spacing;
-            margin-right: $pager-section-spacing;
-        }
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -75,8 +57,6 @@
 
     // Base pager item
     %base-pager-item {
-        min-width: $kendo-button-calc-size;
-        height: $kendo-button-calc-size;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -96,10 +76,6 @@
     // Pager items
     .k-pager-nav {
         @extend %base-pager-item;
-        @include border-radius( $pager-item-border-radius );
-        padding: $pager-item-padding-y $pager-item-padding-x;
-        border-width: $pager-item-border-width;
-        border-style: solid;
     }
 
 
@@ -115,26 +91,9 @@
         }
     }
     .k-pager-numbers {
-        margin: 0;
-        padding: 0;
-        list-style: none;
         display: flex;
         flex-direction: row;
 
-        li {
-            display: inline-flex;
-        }
-
-
-        // Links
-        .k-link {
-            @extend %base-pager-item;
-            @include border-radius( $pager-number-border-radius );
-            padding: $pager-number-padding-y $pager-number-padding-x;
-            border-width: $pager-number-border-width;
-            border-style: solid;
-        }
-
         // Selected state
         .k-selected {
             cursor: inherit;
@@ -146,17 +105,16 @@
     // Spacing between items
     .k-pager-nav + .k-pager-nav,
     .k-pager-nav + .k-pager-numbers-wrap,
-    .k-pager-numbers-wrap + .k-pager-nav,
-    .k-pager-numbers > li + li {
-        @if ($pager-item-spacing) {
-            margin-left: $pager-item-spacing;
+    .k-pager-numbers-wrap + .k-pager-nav {
+        @if ($kendo-pager-item-spacing) {
+            margin-left: $kendo-pager-item-spacing;
         }
 
         .k-rtl &,
         [dir="rtl"] & {
-            @if ($pager-item-spacing) {
+            @if ($kendo-pager-item-spacing) {
                 margin-left: 0;
-                margin-right: $pager-item-spacing;
+                margin-right: $kendo-pager-item-spacing;
             }
         }
     }
@@ -168,7 +126,7 @@
 
         .k-textbox {
             margin: 0 1ex;
-            width: $pager-input-width;
+            width: $kendo-pager-input-width;
         }
     }
 
@@ -180,7 +138,6 @@
         .k-dropdown-list,
         > select {
             margin-right: 1ex;
-            width: $pager-dropdown-width;
         }
 
         .k-input-inner,
@@ -223,46 +180,63 @@
     }
 
     // Responsive
-    .k-pager-sm {
+    .k-pager-mobile-sm {
         overflow: visible;
 
         // Show native select
         .k-pager-numbers-wrap {
+            border-color: inherit;
+
             select.k-dropdown-list {
-                width: $pager-dropdown-width;
-                display: flex;
+                @extend %base-pager-section;
+                @if ($kendo-pager-section-spacing) {
+                    margin-left: $kendo-pager-section-spacing;
+                    margin-right: $kendo-pager-section-spacing;
+                }
+                width: $kendo-pager-dropdown-width-sm;
             }
         }
+    }
 
-        .k-pager-numbers-wrap {
-            @if ($pager-section-spacing) {
-                margin-left: $pager-section-spacing;
-                margin-right: $pager-section-spacing;
-            }
+    // Hide components
+    .k-pager-mobile-md .k-pager-info,
+    .k-pager-mobile-sm .k-pager-info,
+    .k-pager-mobile-sm .k-pager-sizes,
+    .k-pager-mobile-sm .k-pager-numbers {
+        display: none;
+    }
 
-            height: $kendo-button-calc-size;
-            border-color: inherit;
-        }
+    // Pager sizes
+    @each $size, $size-props in $kendo-pager-sizes {
+        $_padding-x: k-map-get($size-props, padding-x);
+        $_padding-y: k-map-get($size-props, padding-y);
+        $_item-group-spacing: k-map-get($size-props, item-group-spacing);
+        $_item-min-width: k-map-get($size-props, item-min-width);
+        $_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);
+
+        .k-pager-#{$size} {
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
+            gap: $_item-group-spacing;
 
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
             .k-pager-numbers-wrap {
-                @if ($pager-section-spacing) {
-                    margin-left: $pager-section-spacing;
-                    margin-right: $pager-section-spacing;
+                .k-button {
+                    min-width: $_item-min-width;
                 }
-            }
-        }
 
-    }
+                .k-pager-input {
+                    margin-inline-start: $_item-group-spacing;
+                    margin-inline-end: $_item-group-spacing;
+                }
+            }
 
-    // Hide components
-    .k-pager-md .k-pager-info,
-    .k-pager-sm .k-pager-info,
-    .k-pager-sm .k-pager-sizes,
-    .k-pager-sm .k-pager-numbers {
-        display: none;
+            .k-pager-sizes {
+                .k-dropdown-list,
+                > select {
+                    width: $_pager-dropdown-width;
+                }
+            }
+        }
     }
 
 }

package/scss/pager/_theme.scss

@@ -1,124 +1,62 @@
 @include exports("pager/theme") {
 
-    .k-pager-wrap,
     .k-pager {
         @include fill(
-            $pager-text,
-            $pager-bg,
-            $pager-border
+            $kendo-pager-text,
+            $kendo-pager-bg,
+            $kendo-pager-border
         );
 
         &:focus,
         &.k-focus {
-            @include fill( $bg: $pager-focus-bg );
-            @include box-shadow( $pager-focus-shadow );
+            @include fill( $bg: $kendo-pager-focus-bg );
+            @include box-shadow( $kendo-pager-focus-shadow );
         }
     }
 
 
     %base-pager-item-theme {
         @include fill(
-            $pager-item-text,
-            $pager-item-bg,
-            $pager-item-border
+            $kendo-pager-item-text,
+            $kendo-pager-item-bg,
+            $kendo-pager-item-border
         );
 
         &:hover,
         &.k-hover {
             @include fill(
-                $pager-item-hover-text,
-                $pager-item-hover-bg,
-                $pager-item-hover-border
+                $kendo-pager-item-hover-text,
+                $kendo-pager-item-hover-bg,
+                $kendo-pager-item-hover-border
             );
         }
 
         &.k-selected {
             @include fill(
-                $pager-item-selected-text,
-                $pager-item-selected-bg,
-                $pager-item-selected-border
+                $kendo-pager-item-selected-text,
+                $kendo-pager-item-selected-bg,
+                $kendo-pager-item-selected-border
             );
         }
 
         &:focus,
         &.k-focus {
-            background-color: $pager-item-focus-bg;
-            @include box-shadow( $pager-item-focus-shadow );
+            background-color: $kendo-pager-item-focus-bg;
+            @include box-shadow( $kendo-pager-item-focus-shadow );
         }
     }
 
-
-    // Pager items
-    .k-pager-nav.k-link {
-        @extend %base-pager-item-theme;
-    }
-
-
-    // Pager numbers
-    .k-pager-numbers {
-        .k-link {
-            @include fill(
-                $pager-number-text,
-                $pager-number-bg,
-                $pager-number-border
-            );
-
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    $pager-number-hover-text,
-                    $pager-number-hover-bg,
-                    $pager-number-hover-border
-                );
-            }
-
-            &:focus,
-            &.k-focus {
-                background-color: $pager-number-focus-bg;
-                @include box-shadow( $pager-number-focus-shadow );
-            }
-
-            &.k-selected {
-                @include fill(
-                    $pager-number-selected-text,
-                    $pager-number-selected-bg,
-                    $pager-number-selected-border
-                );
-            }
-        }
-    }
-
-
     // Pager refresh
     .k-pager-refresh {
         @extend %base-pager-item-theme;
     }
 
-
-
     // Responsive
     .k-pager-md,
     .k-pager-sm {
 
         .k-pager-numbers {
 
-            .k-current-page .k-link {
-                @include fill(
-                    $dropdownlist-text,
-                    $dropdownlist-bg,
-                    $dropdownlist-border
-                );
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $dropdownlist-hovered-text,
-                        $dropdownlist-hovered-bg,
-                        $dropdownlist-hovered-border
-                    );
-                }
-            }
-
             &.k-expanded {
                 @include fill(
                     $popup-text,
@@ -126,25 +64,6 @@
                     $popup-border
                 );
                 @include box-shadow( $popup-shadow );
-
-                .k-link {
-
-                    &:hover,
-                    &.k-hover {
-                        @include fill(
-                            $kendo-list-item-hover-text,
-                            $kendo-list-item-hover-bg
-                        );
-                    }
-
-                    &.k-selected {
-                        @include fill(
-                            $kendo-list-item-selected-text,
-                            $kendo-list-item-selected-bg
-                        );
-                    }
-
-                }
             }
 
         }

package/scss/pager/_variables.scss

@@ -1,66 +1,145 @@
 // Pager
-$pager-padding-x: map-get( $spacing, 2 ) !default;
-$pager-padding-y: map-get( $spacing, 2 ) !default;
-$pager-border-width: 1px !default;
 
-$pager-font-family: $font-family !default;
-$pager-font-size: $font-size !default;
-$pager-line-height: $line-height !default;
+/// 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;
+/// 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;
 
-$pager-bg: $header-bg !default;
-$pager-text: $header-text !default;
-$pager-border: $component-border !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;
 
-$pager-focus-bg: null !default;
-$pager-focus-shadow: $focused-shadow !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;
 
-$pager-section-spacing: $spacer-x !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;
+/// Font size of the pager.
+/// @group pager
+$kendo-pager-font-size: $font-size !default;
+/// Line height of the pager.
+/// @group pager
+$kendo-pager-line-height: $line-height !default;
+/// Background color of the pager.
+/// @group pager
+$kendo-pager-bg: $kendo-component-header-bg !default;
+/// Text color of the pager.
+/// @group pager
+$kendo-pager-text: $kendo-component-header-text !default;
+/// Border color of the pager.
+/// @group pager
+$kendo-pager-border: $kendo-component-border !default;
 
-$pager-item-padding-x: $kendo-button-padding-y !default;
-$pager-item-padding-y: $pager-item-padding-x !default;
-$pager-item-border-width: 0px !default;
-$pager-item-border-radius: null !default;
-$pager-item-spacing: null !default;
+/// Background color of the focused pager.
+/// @group pager
+$kendo-pager-focus-bg: null !default;
+/// Box shadow of the focused pager.
+/// @group pager
+$kendo-pager-focus-shadow: $kendo-focus-shadow !default;
 
-$pager-item-bg: null !default;
-$pager-item-text: null !default;
-$pager-item-border: null !default;
+/// Spacing between the pager sections.
+/// @group pager
+$kendo-pager-section-spacing: $spacer-x !default;
+/// Border width of the pager items.
+/// @group pager
+$kendo-pager-item-border-width: 0px !default;
+/// Border radius of the pager items.
+/// @group pager
+$kendo-pager-item-border-radius: null !default;
+/// Spacing around the pager items.
+/// @group pager
+$kendo-pager-item-spacing: null !default;
+/// Background color of the pager items.
+/// @group pager
+$kendo-pager-item-bg: null !default;
+/// Text color of the pager items.
+/// @group pager
+$kendo-pager-item-text: null !default;
+/// Border color of the pager items.
+/// @group pager
+$kendo-pager-item-border: null !default;
 
-$pager-item-hover-bg: $kendo-list-item-hover-bg !default;
-$pager-item-hover-text: $kendo-list-item-hover-text !default;
-$pager-item-hover-border: null !default;
+/// Background color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-bg: $kendo-list-item-hover-bg !default;
+/// Text color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-text: $kendo-list-item-hover-text !default;
+/// Border color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-border: null !default;
+/// Background color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-bg: $kendo-list-item-selected-bg !default;
+/// Text color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-text: $kendo-list-item-selected-text !default;
+/// Border color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-border: null !default;
+/// Opacity of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-opacity: null !default;
+/// Background color of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-bg: transparent !default;
+/// Box shadow of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$pager-item-selected-bg: $kendo-list-item-selected-bg !default;
-$pager-item-selected-text: $kendo-list-item-selected-text !default;
-$pager-item-selected-border: null !default;
+/// Border radius of the pager numbers.
+/// @group pager
+$kendo-pager-number-border-radius: null !default;
 
-$pager-item-focus-opacity: null !default;
-$pager-item-focus-bg: transparent !default;
-$pager-item-focus-shadow: $kendo-list-item-focus-shadow !default;
+/// Width of the pager inputs.
+/// @group pager
+$kendo-pager-input-width: 5em !default;
 
-$pager-number-padding-x: $pager-item-padding-x !default;
-$pager-number-padding-y: $pager-item-padding-y !default;
-$pager-number-border-width: $pager-item-border-width !default;
-$pager-number-border-radius: null !default;
-$pager-number-spacing: $pager-item-spacing !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;
 
-$pager-number-bg: null !default;
-$pager-number-text: $primary !default;
-$pager-number-border: null !default;
-
-$pager-number-hover-opacity: .08 !default;
-$pager-number-hover-bg: rgba($pager-item-selected-bg, $pager-number-hover-opacity) !default;
-$pager-number-hover-text: $pager-number-text !default;
-$pager-number-hover-border: $pager-item-hover-border !default;
-
-$pager-number-selected-opacity: .2 !default;
-$pager-number-selected-bg: rgba($pager-item-selected-bg, $pager-number-selected-opacity) !default;
-$pager-number-selected-text: $pager-number-text !default;
-$pager-number-selected-border: $pager-item-selected-border !default;
-
-$pager-number-focus-opacity: .12 !default;
-$pager-number-focus-bg: transparent !default;
-$pager-number-focus-shadow: inset 0 0 0 2px rgba($pager-number-selected-bg, $pager-number-focus-opacity) !default;
-
-$pager-input-width: 5em !default;
-$pager-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
+    ),
+    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
+    ),
+    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
+    )
+) !default;

package/scss/panelbar/_index.scss

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

package/scss/panelbar/_layout.scss

@@ -14,7 +14,7 @@
         list-style: none;
         display: block;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -46,7 +46,7 @@
                 position: relative;
                 user-select: none;
                 cursor: default;
-                transition: $transition;
+                transition: $kendo-transition;
             }
         }
         > .k-item + .k-item,
@@ -82,7 +82,7 @@
                 position: relative;
                 user-select: none;
                 cursor: default;
-                transition: $transition;
+                transition: $kendo-transition;
             }
 
             // Hierarchy items
@@ -139,44 +139,3 @@
     }
 
 }
-
-
-
-
-@include exports( "panelbar/layout/compatibility" ) {
-
-    .k-ie {
-
-        // Toggle icon
-        .k-panelbar-expand,
-        .k-panelbar-collapse,
-        .k-panelbar-toggle {
-            margin-left: auto;
-        }
-
-        .k-group .k-panelbar-expand,
-        .k-group .k-panelbar-collapse,
-        .k-panelbar-group .k-panelbar-toggle {
-            margin-right: calc( #{$panelbar-header-padding-x} - #{$panelbar-item-padding-x} );
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        &[dir = "rtl"] {
-            // Toggle icon
-            .k-panelbar-expand,
-            .k-panelbar-collapse,
-            .k-panelbar-toggle {
-                margin-left: initial;
-                margin-right: auto;
-            }
-
-            .k-group .k-panelbar-expand,
-            .k-group .k-panelbar-collapse,
-            .k-panelbar-group .k-panelbar-toggle {
-                margin-left: calc( #{$panelbar-header-padding-x} - #{$panelbar-item-padding-x} );
-            }
-        }
-    }
-
-}