feat(pager): add pager sizes

BREAKING CHANGE: Added `size` appearance property:

* `size` controls the overall physical size of the pager and it's components.

Generates pager specific class name `k-pager-{size}`.

BREAKING CHANGE: Added kendo prefix to all pager variables:

Change variable names from `$pager-*` to `$kendo-pager-*`.

BREAKING CHANGE: Replaced pager numbers with buttons:

The rendering ot the Pager component has been changed to use buttons instead of spans.

packages/bootstrap/scss/pager/_index.scss

@@ -7,6 +7,7 @@
 @import "../icons/_index.scss";
 @import "../toolbar/_variables.scss";
 @import "../list/_index.scss";
+@import "../button/_index.scss";
 
 
 // Component

packages/bootstrap/scss/pager/_layout.scss

@@ -5,20 +5,20 @@
 
     // Pager items
     .k-pager-nav { @include border-radius( 0 ); }
-    .k-pager-first { @include border-left-radius-only( $pager-item-border-radius ); }
-    .k-pager-last { @include border-right-radius-only( $pager-item-border-radius ); }
+    .k-pager-first { @include border-left-radius-only( $kendo-pager-item-border-radius ); }
+    .k-pager-last { @include border-right-radius-only( $kendo-pager-item-border-radius ); }
 
     .k-rtl,
     [dir="rtl"] {
-        .k-pager-first { @include border-right-radius-only( $pager-item-border-radius ); }
-        .k-pager-last { @include border-left-radius-only( $pager-item-border-radius ); }
+        .k-pager-first { @include border-right-radius-only( $kendo-pager-item-border-radius ); }
+        .k-pager-last { @include border-left-radius-only( $kendo-pager-item-border-radius ); }
     }
 
 
     // Pager refresh
     .k-pager-refresh {
-        @include border-radius( $pager-item-border-radius );
-        border-width: $pager-item-border-width;
+        @include border-radius( $kendo-pager-item-border-radius );
+        border-width: $kendo-pager-item-border-width;
         border-style: solid;
     }
 

packages/bootstrap/scss/pager/_theme.scss

@@ -1,36 +1 @@
 @import "~@progress/kendo-theme-default/scss/pager/_theme.scss";
-
-@include exports( "pager/theme/bootstrap" ) {
-
-
-    // Pager
-    .k-pager-wrap {}
-
-
-    // Responsive
-    .k-pager-md,
-    .k-pager-sm {
-
-        .k-pager-numbers {
-
-            .k-current-page .k-link {
-                @include fill(
-                    $pager-text,
-                    $pager-item-bg,
-                    $pager-item-border
-                );
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $pager-text,
-                        $pager-item-hover-bg,
-                        $pager-item-hover-border
-                    );
-                }
-            }
-
-        }
-    }
-
-}

packages/bootstrap/scss/pager/_variables.scss

@@ -1,66 +1,146 @@
 // Pager
-$pager-padding-x: k-map-get( $spacing, 2 ) !default;
-$pager-padding-y: k-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( $spacing, 2 ) !default;
+$kendo-pager-padding-x-sm: k-map-get( $spacing, 1 ) !default;
+$kendo-pager-padding-x-md: k-map-get( $spacing, 2 ) !default;
+$kendo-pager-padding-x-lg: k-map-get( $spacing, 2 ) + k-map-get( $spacing, thin ) !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: $header-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: inset 0 0 0 2px rgba( black, .08) !default;
+/// Margin between pager item groups according to the pager size.
+/// @group pager
+$kendo-pager-item-group-spacing-sm: k-map-get( $spacing, 3 ) + k-map-get( $spacing, thin ) !default;
+$kendo-pager-item-group-spacing-md: k-map-get( $spacing, 4 ) !default;
+$kendo-pager-item-group-spacing-lg: k-map-get( $spacing, 4 ) + k-map-get( $spacing, thin ) !default;
 
-$pager-section-spacing: k-map-get( $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;
+/// 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: $header-bg !default;
+/// Text color of the pager.
+/// @group pager
+$kendo-pager-text: $header-text !default;
+/// Border color of the pager.
+/// @group pager
+$kendo-pager-border: $header-border !default;
 
-$pager-item-padding-x: $kendo-button-padding-y !default;
-$pager-item-padding-y: $kendo-button-padding-y !default;
-$pager-item-border-width: 1px !default;
-$pager-item-border-radius: k-map-get( $spacing, 1 ) !default;
-$pager-item-spacing: -$pager-item-border-width !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: inset 0 0 0 2px rgba( 0, 0, 0, .08) !default;
 
-$pager-item-bg: $component-bg !default;
-$pager-item-text: $link-text !default;
-$pager-item-border: $component-border !default;
+/// Spacing between the pager sections.
+/// @group pager
+$kendo-pager-section-spacing: k-map-get( $spacing, 4 ) !default;
 
-$pager-item-hover-bg: $hovered-bg !default;
-$pager-item-hover-text: $link-hover-text !default;
-$pager-item-hover-border: $hovered-border !default;
+/// Border width of the pager items.
+/// @group pager
+$kendo-pager-item-border-width: 1px !default;
+/// Border radius of the pager items.
+/// @group pager
+$kendo-pager-item-border-radius: k-map-get( $spacing, 1 ) !default;
+/// Spacing around the pager items.
+/// @group pager
+$kendo-pager-item-spacing: (-1 * $kendo-pager-item-border-width) !default;
+/// Background color of the pager items.
+/// @group pager
+$kendo-pager-item-bg: $component-bg !default;
+/// Text color of the pager items.
+/// @group pager
+$kendo-pager-item-text: $link-text !default;
+/// Border color of the pager items.
+/// @group pager
+$kendo-pager-item-border: $component-border !default;
 
-$pager-item-selected-bg: $selected-bg !default;
-$pager-item-selected-text: $selected-text !default;
-$pager-item-selected-border: $pager-item-selected-bg !default;
+/// Background color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-bg: $hovered-bg !default;
+/// Text color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-text: $link-hover-text !default;
+/// Border color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-border: $hovered-border !default;
+/// Background color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-bg: $selected-bg !default;
+/// Text color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-text: $selected-text !default;
+/// Border color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-border: $kendo-pager-item-selected-bg !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: $kendo-pager-item-bg !default;
+/// Box shadow of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-shadow: 0 0 0 3px rgba($primary, .25) !default;
 
-$pager-item-focus-opacity: null !default;
-$pager-item-focus-bg: $pager-item-bg !default;
-$pager-item-focus-shadow: 0 0 0 3px rgba( $primary, .25 ) !default;
+/// Border radius of the pager numbers.
+/// @group pager
+$kendo-pager-number-border-radius: 0px !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: 0px !default;
-$pager-number-spacing: $pager-item-spacing !default;
+/// Width of the pager inputs.
+/// @group pager
+$kendo-pager-input-width: 5em !default;
 
-$pager-number-bg: $pager-item-bg !default;
-$pager-number-text: $pager-item-text !default;
-$pager-number-border: $pager-item-border !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: 6em !default;
 
-$pager-number-hover-opacity: null !default;
-$pager-number-hover-bg: $pager-item-hover-bg !default;
-$pager-number-hover-text: $pager-item-text !default;
-$pager-number-hover-border: $pager-item-hover-border !default;
-
-$pager-number-selected-opacity: null !default;
-$pager-number-selected-bg: $pager-item-selected-bg !default;
-$pager-number-selected-text: $pager-item-selected-text !default;
-$pager-number-selected-border: $pager-item-selected-border !default;
-
-$pager-number-focus-opacity: null !default;
-$pager-number-focus-bg: $pager-number-bg !default;
-$pager-number-focus-shadow: $pager-item-focus-shadow !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;

packages/classic/scss/pager/_index.scss

@@ -7,6 +7,7 @@
 @import "../icons/_index.scss";
 @import "../toolbar/_variables.scss";
 @import "../list/_index.scss";
+@import "../button/_index.scss";
 
 
 // Component