lumen: fix positioning and style of pager, closes #232

lumen/bootstrap.css

@@ -5918,6 +5918,8 @@ label {
 .pager > li > a,
 .pagination > li > span,
 .pager > li > span {
+  position: relative;
+  top: 0;
   border-width: 0 1px 4px 1px;
   color: #555555;
   font-size: 12px;
@@ -5928,30 +5930,45 @@ label {
 .pager > li > a:hover,
 .pagination > li > span:hover,
 .pager > li > span:hover {
-  margin-top: 1px;
+  top: 1px;
   border-bottom-width: 3px;
 }
 .pagination > li > a:active,
 .pager > li > a:active,
 .pagination > li > span:active,
 .pager > li > span:active {
-  margin-top: 2px;
+  top: 2px;
   border-bottom-width: 2px;
 }
 .pagination > .disabled > a:hover,
 .pager > .disabled > a:hover,
 .pagination > .disabled > span:hover,
 .pager > .disabled > span:hover {
-  margin-top: 0;
+  top: 0;
   border-width: 0 1px 4px 1px;
 }
 .pagination > .disabled > a:active,
 .pager > .disabled > a:active,
 .pagination > .disabled > span:active,
 .pager > .disabled > span:active {
-  margin-top: 0;
+  top: 0;
   border-width: 0 1px 4px 1px;
 }
+.pager > li > a,
+.pager > li > span,
+.pager > .disabled > a,
+.pager > .disabled > span,
+.pager > li > a:hover,
+.pager > li > span:hover,
+.pager > .disabled > a:hover,
+.pager > .disabled > span:hover,
+.pager > li > a:active,
+.pager > li > span:active,
+.pager > .disabled > a:active,
+.pager > .disabled > span:active {
+  border-left-width: 2px;
+  border-right-width: 2px;
+}
 .alert {
   border-width: 0 1px 4px 1px;
 }

lumen/bootswatch.less

@@ -267,6 +267,8 @@ label {
 
   > li > a,
   > li > span {
+    position: relative;
+    top: 0;
     .shadow();
     color: @pagination-color;
     font-size: 12px;
@@ -274,12 +276,12 @@ label {
     text-transform: uppercase;
 
     &:hover {
-      margin-top: 1px;
+      top: 1px;
       border-bottom-width: 3px;
     }
 
     &:active {
-      margin-top: 2px;
+      top: 2px;
       border-bottom-width: 2px;
     }
   }
@@ -288,17 +290,33 @@ label {
   > .disabled > span {
 
     &:hover {
-      margin-top: 0;
+      top: 0;
       .shadow();
     }
 
     &:active {
-      margin-top: 0;
+      top: 0;
       .shadow();
     }
   }
 }
 
+.pager {
+
+  > li > a,
+  > li > span,
+  > .disabled > a,
+  > .disabled > span {
+
+    &,
+    &:hover,
+    &:active {
+      border-left-width: 2px;
+      border-right-width: 2px;
+    }
+  }
+}
+
 // Indicators =================================================================
 
 .alert {