allow pagination mixins to pass vars

diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
index c20bf236eb303a45347249df42b629315f133e40..7b18a3136dd4fc646c31d1cbc27957878fe87928 100644 (file)
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -66,16 +66,24 @@ $pagination-mobile-current-item: false !default;
 $pagination-arrows: true !default;
 
 /// Adds styles for a pagination container. Apply this to a `<ul>`.
-@mixin pagination-container {
+@mixin pagination-container (
+  $margin-bottom: $pagination-margin-bottom,
+  $font-size: $pagination-font-size,
+  $spacing: $pagination-item-spacing,
+  $radius: $pagination-radius,
+  $color: $pagination-item-color,
+  $padding: $pagination-item-padding,
+  $background-hover: $pagination-item-background-hover
+) {
   @include clearfix;
   margin-#{$global-left}: 0;
-  margin-bottom: $pagination-margin-bottom;
+  margin-bottom: $margin-bottom;
 
   // List item
   li {
-    margin-#{$global-right}: $pagination-item-spacing;
-    border-radius: $pagination-radius;
-    font-size: $pagination-font-size;
+    margin-#{$global-right}: $spacing;
+    border-radius: $radius;
+    font-size: $font-size;
 
     @if $pagination-mobile-items {
       display: inline-block;
@@ -104,28 +112,35 @@ $pagination-arrows: true !default;
   a,
   button {
     display: block;
-    padding: $pagination-item-padding;
+    padding: $padding;
     border-radius: $global-radius;
-    color: $pagination-item-color;
+    color: $color;
 
     &:hover {
-      background: $pagination-item-background-hover;
+      background: $background-hover;
     }
   }
 }
 
 /// Adds styles for the current pagination item. Apply this to an `<a>`.
-@mixin pagination-item-current {
-  padding: $pagination-item-padding;
-  background: $pagination-item-background-current;
-  color: $pagination-item-color-current;
+@mixin pagination-item-current (
+  $padding: $pagination-item-padding,
+  $background-current: $pagination-item-background-current,
+  $color-current: $pagination-item-color-current
+) {
+  padding: $padding;
+  background: $background-current;
+  color: $color-current;
   cursor: default;
 }
 
 /// Adds styles for a disabled pagination item. Apply this to an `<a>`.
-@mixin pagination-item-disabled {
-  padding: $pagination-item-padding;
-  color: $pagination-item-color-disabled;
+@mixin pagination-item-disabled (
+  $padding: $pagination-item-padding,
+  $color: $pagination-item-color-disabled
+) {
+  padding: $padding;
+  color: $color;
   cursor: not-allowed;
 
   &:hover {
@@ -134,10 +149,13 @@ $pagination-arrows: true !default;
 }
 
 /// Adds styles for an ellipsis for use in a pagination list.
-@mixin pagination-ellipsis {
-  padding: $pagination-item-padding;
+@mixin pagination-ellipsis (
+  $padding: $pagination-item-padding,
+  $color: $pagination-ellipsis-color
+) {
+  padding: $padding;
   content: '\2026';
-  color: $pagination-ellipsis-color;
+  color: $color;
 }
 
 @mixin foundation-pagination {