_pagination.scss in TokiCLI-0.3.0

- old
+ new

@@ -14,27 +14,27 @@
 $pagination-margin: rem-calc(-5) !default;
 
 // We use these to set the list-item properties
 $pagination-li-float: $default-float !default;
 $pagination-li-height: rem-calc(24) !default;
-$pagination-li-font-color: #222 !default;
+$pagination-li-font-color: $jet !default;
 $pagination-li-font-size: rem-calc(14) !default;
 $pagination-li-margin: rem-calc(5) !default;
 
 // We use these for the pagination anchor links
 $pagination-link-pad: rem-calc(1 10 1) !default;
-$pagination-link-font-color: #999 !default;
-$pagination-link-active-bg: scale-color(#fff, $lightness: -10%) !default;
+$pagination-link-font-color: $aluminum !default;
+$pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
 
 // We use these for disabled anchor links
 $pagination-link-unavailable-cursor: default !default;
-$pagination-link-unavailable-font-color: #999 !default;
+$pagination-link-unavailable-font-color: $aluminum !default;
 $pagination-link-unavailable-bg-active: transparent !default;
 
 // We use these for currently selected anchor links
 $pagination-link-current-background: $primary-color !default;
-$pagination-link-current-font-color: #fff !default;
+$pagination-link-current-font-color: $white !default;
 $pagination-link-current-font-weight: $font-weight-bold !default;
 $pagination-link-current-cursor: default !default;
 $pagination-link-current-active-bg: $primary-color !default;
 
 // @mixins
@@ -46,24 +46,28 @@
 }
 
 // @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
 // an anchor <a> element.
 // $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;
       cursor: $pagination-link-current-cursor;
 
@@ -101,18 +105,26 @@
       height: $pagination-li-height;
       color: $pagination-li-font-color;
       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(); }
         &.current { @include pagination-current-item(); }
       }