feat: add pager styles for material (#10)

* feat: add Pager styling * chore(pager): improve Pager styling * chore(pager): move layout styles to layout file * chore(pager): improve styling * refactor(pager): improve styles reuse * chore: add pager fixture
telerik · Feb 13, 2018 · 12e13f4 · 12e13f4
1 parent 9ddc102
commit 12e13f4
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 2 deletions.
diff --git 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
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Pager</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- TODO: determine way to include the theme and font conditionally, to allow cross-theme tests -->
+    <link rel="stylesheet" href="/packages/material/dist/all.css" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <style>
+        body {
+            font-size: 14px;
+            font-family: Roboto, Arial, sans-serif;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="test-area">
+
+        <div class="k-pager-wrap k-widget k-floatwrap" data-role="pager">
+            <a href="#" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" tabindex="-1"><span class="k-icon k-i-arrow-end-left"></span></a>
+            <a href="#" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" tabindex="-1"><span class="k-icon k-i-arrow-60-left"></span></a>
+
+            <ul class="k-pager-numbers k-reset">
+                <li class="k-current-page"><span class="k-link k-pager-nav">1</span></li>
+                <li><span class="k-state-selected">1</span></li>
+                <li><a tabindex="-1" href="#" class="k-link">2</a></li>
+                <li><a tabindex="-1" href="#" class="k-link">3</a></li>
+                <li><a tabindex="-1" href="#" class="k-link">4</a></li>
+                <li><a tabindex="-1" href="#" class="k-link">5</a></li>
+            </ul>
+
+            <a href="#" title="Go to the next page" class="k-link k-pager-nav" tabindex="-1"><span class="k-icon k-i-arrow-60-right"></span></a>
+
+            <a href="#" title="Go to the last page" class="k-link k-pager-nav k-pager-last" tabindex="-1"><span class="k-icon k-i-arrow-end-right"></span></a>
+
+            <span class="k-pager-sizes k-label">
+                <!-- dropdown -->
+                <span class="k-widget k-dropdown k-header" unselectable="on" tabindex="0">
+                    <span unselectable="on" class="k-dropdown-wrap k-state-default">
+                        <span unselectable="on" class="k-input">20</span>
+                        <span unselectable="on" class="k-select" aria-label="select">
+                            <span class="k-icon k-i-arrow-60-down"></span>
+                        </span>
+                    </span>
+                </span>
+                items per page
+            </span>
+
+            <a href="#" class="k-pager-refresh k-link" title="Refresh"><span class="k-icon k-i-reload"></span></a>
+
+            <span class="k-pager-info k-label">1 - 20 of 91 items</span>
+        </div>
+
+
+    </div>
+
+</body>
+</html>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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%;
+        }
+    }
+}