adding the pager component after rewriting the pagination docs and css

3 files changed, 65 insertions, 37 deletions

diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index d71002c46..43b512086 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -36,6 +36,7 @@
 @import "navs.less";
 @import "breadcrumbs.less";
 @import "pagination.less";
+@import "pager.less";
 
 // Components: Popovers
 @import "modals.less";
diff --git a/lib/pager.less b/lib/pager.less
new file mode 100644
index 000000000..de009afda
--- /dev/null
+++ b/lib/pager.less
@@ -0,0 +1,25 @@
+// PAGER
+// -----
+
+.pager {
+  margin-left: 0;
+  margin-bottom: @baseLineHeight;
+  list-style: none;
+  text-align: center;
+  .clearfix();
+}
+.pager li {
+  display: inline;
+}
+.pager a {
+  display: inline-block;
+  padding: 6px 15px;
+  background-color: #f5f5f5;
+  .border-radius(15px);
+}
+.pager .next a {
+  float: right;
+}
+.pager .previous a {
+  float: left;
+}
diff --git a/lib/pagination.less b/lib/pagination.less
index e38805760..655abe5a3 100644
--- a/lib/pagination.less
+++ b/lib/pagination.less
@@ -4,44 +4,46 @@
 .pagination {
   height: @baseLineHeight * 2;
   margin: @baseLineHeight 0;
-  ul {
-    display: inline-block;
-    .ie7-inline-block();
-    margin: 0;
-    border: 1px solid #ddd;
-    border: 1px solid rgba(0,0,0,.15);
-    .border-radius(3px);
-    .box-shadow(0 1px 2px rgba(0,0,0,.05));
-  }
-  li {
+ }
+.pagination ul {
+  display: inline-block;
+  .ie7-inline-block();
+  margin-left: 0;
+  margin-bottom: 0;
+  border: 1px solid #ddd;
+  border: 1px solid rgba(0,0,0,.15);
+  .border-radius(3px);
+  .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination li {
     display: inline;
   }
-  a {
-    float: left;
-    padding: 0 14px;
-    line-height: (@baseLineHeight * 2) - 2;
-    text-decoration: none;
-    border-right: 1px solid;
-    border-right-color: #ddd;
-    border-right-color: rgba(0,0,0,.15);
-    *border-right-color: #ddd; /* IE6-7 */
-  }
-  a:hover,
-  .active a {
-    background-color: lighten(@blue, 45%);
-  }
-  .disabled a,
-  .disabled a:hover {
-    color: @grayLight;
-    background-color: transparent;
-    cursor: default;
-  }
-  .next a {
-    border: 0;
-  }
+.pagination a {
+  float: left;
+  padding: 0 14px;
+  line-height: (@baseLineHeight * 2) - 2;
+  text-decoration: none;
+  border-right: 1px solid #ddd;
+  border-right: 1px solid rgba(0,0,0,.15);
+}
+.pagination a:hover,
+.pagination .active a {
+  background-color: #f5f5f5;
+}
+.pagination .disabled a,
+.pagination .disabled a:hover {
+  color: @grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination li:last-child a {
+  border: 0;
+}
 
-  // Centered
-  &.centered {
-    text-align: center;
-  }
+// Centered
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
 }