From f5e735da46c7ed6e913dc352f962923afe98b4e2 Mon Sep 17 00:00:00 2001
From: William Riancho <wr.wllm@gmail.com>
Date: Thu, 3 Jul 2014 17:22:19 +0200
Subject: [PATCH] add button support for pagination

---
 .../pagination/examples_pagination_basic.html |  2 +-
 doc/pages/components/pagination.html          |  2 +-
 scss/foundation/components/_pagination.scss   | 22 ++++++++++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/doc/includes/pagination/examples_pagination_basic.html b/doc/includes/pagination/examples_pagination_basic.html
index 0cd6ab406..204e94a3a 100644
--- a/doc/includes/pagination/examples_pagination_basic.html
+++ b/doc/includes/pagination/examples_pagination_basic.html
@@ -8,4 +8,4 @@
   <li><a href="">12</a></li>
   <li><a href="">13</a></li>
   <li class="arrow"><a href="">&raquo;</a></li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/doc/pages/components/pagination.html b/doc/pages/components/pagination.html
index 544c91122..599b6dff1 100644
--- a/doc/pages/components/pagination.html
+++ b/doc/pages/components/pagination.html
@@ -12,7 +12,7 @@ title: Pagination
 
 ## Basic
 
-Add a `.pagination` class to a `ul` to get started, then add list items with links in them.
+Add a `.pagination` class to a `ul` to get started, then add list items with links or buttons in them.
 
 * Create arrows by adding an `.arrow` class to the first and last list items.
 * To mark the current page, add a `.current` class to a list item.
diff --git a/scss/foundation/components/_pagination.scss b/scss/foundation/components/_pagination.scss
index 876df036c..49d0f83f8 100644
--- a/scss/foundation/components/_pagination.scss
+++ b/scss/foundation/components/_pagination.scss
@@ -48,12 +48,16 @@ $pagination-link-current-active-bg: $primary-color !default;
 // @mixins
 // Style unavailable list items
 @mixin pagination-unavailable-item {
-  a {
+  a, button {
     cursor: $pagination-link-unavailable-cursor;
     color: $pagination-link-unavailable-font-color;
   }
   &:hover a,
-  & a:focus { background: $pagination-link-unavailable-bg-active; }
+  & a:focus,
+
+  &:hover button,
+  & button:focus
+  { background: $pagination-link-unavailable-bg-active; }
 }
 // @mixins
 // Style the current list item. Do not assume that the current item has
@@ -61,7 +65,7 @@ $pagination-link-current-active-bg: $primary-color !default;
 // $has-anchor - Default: true, Options: false
 @mixin pagination-current-item($has-anchor: true) {
   @if $has-anchor {
-    a {
+    a, button {
       background: $pagination-link-current-background;
       color: $pagination-link-current-font-color;
       font-weight: $pagination-link-current-font-weight;
@@ -103,15 +107,23 @@ $pagination-link-current-active-bg: $primary-color !default;
       font-size: $pagination-li-font-size;
       margin-#{$default-float}: $pagination-li-margin;
 
-      a {
+      a, button {
         display: block;
         padding: $pagination-link-pad;
         color: $pagination-link-font-color;
+        background: none;
         @include radius;
+        font-weight: normal;
+        font-size: 1em;
+        line-height: inherit;
+        @include single-transition(background-color);
       }
 
       &:hover a,
-      a:focus { background: $pagination-link-active-bg; }
+      a:focus,
+      &:hover button,
+      button:focus
+      { background: $pagination-link-active-bg; }
 
       @if $use-default-classes {
         &.unavailable { @include pagination-unavailable-item(); }
-- 
2.47.2