diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss
index 16b3fd6e1b2..5a94e63d253 100644
--- a/packages/default/scss/pager/_layout.scss
+++ b/packages/default/scss/pager/_layout.scss
@@ -1,5 +1,6 @@
@include exports("pager/layout") {
$pager-buttons-size: calc(#{$form-line-height-em} + 2px) !default; /// icon button size + 2px border (top and bottom)
+ $pager-buttons-padding: $button-padding-y !default;
.k-pager-wrap {
padding: $pager-padding-y $pager-padding-x;
@@ -13,7 +14,7 @@
.k-link,
.k-state-selected {
- padding: $button-padding-y;
+ padding: $pager-buttons-padding;
width: $pager-buttons-size;
height: $pager-buttons-size;
line-height: $pager-buttons-size;
diff --git a/packages/default/tests/fixtures/pager.html b/packages/default/tests/fixtures/pager.html
new file mode 100644
index 00000000000..b0c9c1d5614
--- /dev/null
+++ b/packages/default/tests/fixtures/pager.html
@@ -0,0 +1,61 @@
+
+
+
+ Pager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
index 90381f63d54..08b070e6b10 100644
--- a/packages/material/scss/_variables.scss
+++ b/packages/material/scss/_variables.scss
@@ -407,4 +407,8 @@ $icon-size: 24px;
$icon-size-lg: 32px;
$icon-spacing: 4px !default;
+// Pager
+$pager-padding-x: 8px !default;
+$pager-padding-y: 10px !default;
+
@import "~@progress/kendo-theme-default/scss/variables";
diff --git a/packages/material/scss/all.scss b/packages/material/scss/all.scss
index b16cae8d9fc..a14bebdbdb0 100644
--- a/packages/material/scss/all.scss
+++ b/packages/material/scss/all.scss
@@ -8,7 +8,7 @@
// Data management
-//@import "pager";
+@import "pager";
//@import "grid";
//@import "spreadsheet";
//@import "pivotgrid";
diff --git a/packages/material/scss/pager.scss b/packages/material/scss/pager.scss
new file mode 100644
index 00000000000..2ed9abf6d6d
--- /dev/null
+++ b/packages/material/scss/pager.scss
@@ -0,0 +1,12 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+@import "common/icons";
+
+
+// Component
+@import "pager/layout";
+@import "pager/theme";
diff --git a/packages/material/scss/pager/_layout.scss b/packages/material/scss/pager/_layout.scss
new file mode 100644
index 00000000000..a2bcf3320f7
--- /dev/null
+++ b/packages/material/scss/pager/_layout.scss
@@ -0,0 +1,25 @@
+$pager-buttons-size: 36px !default;
+$pager-buttons-padding: 0 !default;
+
+@import "~@progress/kendo-theme-default/scss/pager/layout";
+
+@include exports ('pager/layout/material') {
+ $pager-elements-margin: 8px !default;
+ $pager-elements-margin-lg: 32px !default;
+
+ .k-pager-wrap {
+ .k-pager-input,
+ .k-pager-numbers,
+ .k-pager-sizes {
+ margin: 0 $pager-elements-margin;
+ }
+
+ .k-pager-sizes>.k-dropdown {
+ margin: 0 $pager-elements-margin 0 0;
+ }
+
+ .k-pager-info {
+ margin: 0 $pager-elements-margin-lg;
+ }
+ }
+}
diff --git a/packages/material/scss/pager/_theme.scss b/packages/material/scss/pager/_theme.scss
new file mode 100644
index 00000000000..59def4c8912
--- /dev/null
+++ b/packages/material/scss/pager/_theme.scss
@@ -0,0 +1,15 @@
+$pager-text: rgba(0, 0, 0, .54) !default;
+$pager-numbers-text: $base-text !default;
+
+@import "~@progress/kendo-theme-default/scss/pager/theme";
+
+@include exports("pager/theme/material") {
+ .k-pager-wrap {
+ .k-pager-nav,
+ .k-pager-numbers .k-link,
+ .k-pager-numbers .k-state-selected,
+ >.k-link {
+ border-radius: 50%;
+ }
+ }
+}