add pagination example

1 files changed, 24 insertions, 26 deletions

diff --git a/src/navigation.less b/src/navigation.less
index 9828cf3..8dc5f83 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -1,8 +1,12 @@
 // Navigation
-// Breadcrumbs
-.breadcrumb {
+.breadcrumb,
+.tab,
+.pagination {
   list-style: none;
   margin: .5rem 0;
+}
+// Breadcrumbs
+.breadcrumb {
   padding: 1.2rem;
 
   li {
@@ -33,35 +37,33 @@
 // Tabs
 .tab {
   display: block;
-  list-style: none;
-  margin: .5rem 0;
   border-bottom: .1rem solid @control-color;
   .clearfix();
 
   .tab-item {
     float: left;
-    border-bottom: .1rem solid transparent;
     margin-bottom: -.1rem;
+    margin-right: .2rem;
+    padding: .5rem 1.5rem;
 
     a {
       display: block;
       padding: .5rem 1.5rem;
+      margin: -.5rem -1.5rem;
+      border-bottom: .2rem solid transparent;
       color: @body-font-color;
       text-decoration: none;
-    }
 
-    &:hover,
-    &:focus {
-      border-bottom-color: @core-color;
-
-      a {
+      &:hover,
+      &:focus {
+        border-bottom-color: @core-color;
         color: @core-color;
       }
     }
-    &.active {
-      border-bottom-color: darken(@core-color, 10%);
 
+    &.active {
       a {
+        border-bottom-color: darken(@core-color, 10%);
         color: darken(@core-color, 10%);
       }
     }
@@ -79,32 +81,28 @@
 }
 // Pagination
 .pagination {
-  list-style: none;
-  margin: .5rem 0;
   padding: 1.2rem;
 
   .page-item {
     float: left;
+    margin-right: .2rem;
     padding: .1rem .2rem;
-    border: .1rem solid transparent;
-    border-radius: .3rem;
 
+    span {
+      display: inline-block;
+      padding: .7rem .5rem;
+    }
     a {
       display: block;
-      padding: .5rem 1.5rem;
-      color: @core-color;
+      padding: .7rem 1.5rem;
+      border-radius: .3rem;
       text-decoration: none;
-
-      &:hover,
-      &:focus {
-        color: darken(@core-color, 15%);
-      }
     }
+    
     &.active {
-      background-color: @core-color;
-
       a {
         color: #fff;
+        background-color: @core-color;
       }
     }
   }