improve pagination's active state so it looks less like the active state and more like active nav items

2 files changed, 27 insertions, 11 deletions

diff --git a/less/pagination.less b/less/pagination.less
index 12bb71b19..b480b3889 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -11,18 +11,19 @@
     display: inline; // Remove list-style and block-level defaults
     > a,
     > span {
+      position: relative;
       float: left; // Collapse white-space
       padding: @padding-base-vertical @padding-base-horizontal;
       line-height: @line-height-base;
       text-decoration: none;
       background-color: @pagination-bg;
       border: 1px solid @pagination-border;
-      border-left-width: 0;
+      margin-left: -1px;
     }
     &:first-child {
       > a,
       > span {
-        border-left-width: 1px;
+        margin-left: 0;
         .border-left-radius(@border-radius-base);
       }
     }
@@ -34,16 +35,25 @@
     }
   }
 
-  > li > a:hover,
-  > li > a:focus,
-  > .active > a,
-  > .active > span {
-    background-color: @pagination-active-bg;
+  > li > a,
+  > li > span {
+    &:hover,
+    &:focus {
+      background-color: @pagination-hover-bg;
+    }
   }
+
   > .active > a,
   > .active > span {
-    color: @pagination-active-color;
-    cursor: default;
+    &,
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: @pagination-active-color;
+      background-color: @pagination-active-bg;
+      border-color: @pagination-active-bg;
+      cursor: default;
+    }
   }
 
   > .disabled {
@@ -53,6 +63,7 @@
     > a:focus {
       color: @pagination-disabled-color;
       background-color: @pagination-bg;
+      border-color: @pagination-border;
       cursor: not-allowed;
     }
   }
diff --git a/less/variables.less b/less/variables.less
index a76ffc96b..79415c637 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -326,10 +326,15 @@
 
 @pagination-bg:                        #fff;
 @pagination-border:                    #ddd;
-@pagination-active-bg:                 #f5f5f5;
-@pagination-active-color:              @gray-light;
+
+@pagination-hover-bg:                  @gray-lighter;
+
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-color:              #fff;
+
 @pagination-disabled-color:            @gray-light;
 
+
 // Pager
 // -------------------------