refactor(Pagination) implemented button scss styling mixin #566

Author: gselderslaghs

sass/components/_global.scss

@@ -19,7 +19,7 @@ textarea {
   font-family: $font-stack;
 }
 
-a { color: $link-color; text-decoration: none; 
+a { color: $link-color; text-decoration: none;
    -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
@@ -117,7 +117,7 @@ i {
 
 // Modal
 html.noscroll {
-  position: fixed; 
+  position: fixed;
   overflow-y: scroll;
   width: 100%;
 }
@@ -129,8 +129,9 @@ video.responsive-video {
   height: auto;
 }
 
+// moved to own component styling file @see https://github.com/materializecss/materialize/issues/566
 // Pagination
-.pagination {
+/*.pagination {
 
   li {
     display: inline-block;
@@ -192,7 +193,7 @@ video.responsive-video {
       white-space: nowrap;
     }
   }
-}
+}*/
 
 // Breadcrumbs
 .breadcrumb {
@@ -526,7 +527,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
 $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
 $spacing-horizontal: "x" !default;
 $spacing-vertical: "y" !default;
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; 
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
 
 @each $property, $shortcut in $spacing-shortcuts{
   @each $name, $value in $spacing-values{
@@ -537,7 +538,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
     // (t, b, r, l) spacing
     @each $direction, $suffix in $spacing-directions{
       .#{$shortcut}#{$suffix}-#{$name}{
-        #{$property}-#{$direction}: $value !important 
+        #{$property}-#{$direction}: $value !important
       }
     }
     // x spacing
@@ -552,7 +553,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
       .#{$shortcut}#{$spacing-vertical}-#{$name}{
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
-      }        
-    }      
+      }
+    }
   }
-} 
+}

sass/components/_pagination.scss

@@ -0,0 +1,45 @@
+// Pagination
+.pagination {
+  li {
+    display: inline-block;
+    vertical-align: top;
+
+    a {
+      @include btn($height: 2rem, $padding-left: .66rem, $padding-right: .66rem, $font-size: 1.2rem);
+    }
+
+    &.active a {
+      @include btn-filled;
+    }
+
+    &.disabled a {
+      @include btn-disabled;
+    }
+
+    i {
+      font-size: 2rem;
+    }
+  }
+
+  li.pages ul li {
+    display: inline-block;
+    float: none;
+  }
+}
+
+@media #{$medium-and-down} {
+  .pagination {
+    width: 100%;
+
+    li.prev,
+    li.next {
+      width: 10%;
+    }
+
+    li.pages {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

sass/materialize.scss

@@ -46,3 +46,4 @@
 @import "components/pulse";
 @import "components/datepicker";
 @import "components/timepicker";
+@import "components/pagination";