add button support for pagination

diff --git a/doc/includes/pagination/examples_pagination_basic.html b/doc/includes/pagination/examples_pagination_basic.html
index 0cd6ab406ef9993b566825005771fe6351cd9a5b..204e94a3a0622ea962e5ee64b6c4e52432a95705 100644 (file)
--- 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 544c91122c4d7de493e14ee784903f60b5912abe..599b6dff135a15889b06e1b1710ba1aa22abf27e 100644 (file)
--- 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 876df036c32a9abdf334c317b51348a40dfd9417..49d0f83f87d0ae72967a4db3aeb509f71849cd96 100644 (file)
--- 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(); }