Merge pull request #2 from picturepan2/feature/navigation-code

Feature/navigation code

4 files changed, 47 insertions, 44 deletions

diff --git a/src/base.less b/src/base.less
index 8090c55..01d06bb 100644
--- a/src/base.less
+++ b/src/base.less
@@ -25,11 +25,16 @@ a {
     color: darken(@core-link-color, 25%);
   }
 }
-
+// Disabled state
+&[disabled],
+.disabled {
+  opacity: .5;
+  cursor: default;
+  pointer-events: none;
+}
 
 // Icons
 .btn,
-button,
 .toast,
 .menu {
   .icon {
diff --git a/src/buttons.less b/src/buttons.less
index 5fd5c80..6ed1e42 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -6,7 +6,7 @@
   border: .1rem solid @core-color;
   background-color: transparent;
   border-radius: .3rem;
-  color: @core-color;
+  color: @core-link-color;
   font-size: 1.4rem;
   line-height: 1.6rem;
   text-align: center;
@@ -31,12 +31,6 @@
     background-color: darken(@core-color, 5%);
   }
 
-  &[disabled],
-  .disabled {
-    opacity: .5;
-    cursor: default;
-  }
-
   // Button Primary
   &.btn-primary {
     color: #fff;
@@ -67,17 +61,17 @@
 
   // Button Link
   &.btn-link {
-    color: @core-color;
+    color: @core-link-color;
     border-color: transparent;
     background-color: transparent;
 
     &:hover,
     &:focus {
-      color: darken(@core-color, 15%);
+      color: darken(@core-link-color, 15%);
     }
     &:active,
     &.active {
-      color: darken(@core-color, 25%);
+      color: darken(@core-link-color, 25%);
     }
   }
 
diff --git a/src/menus.less b/src/menus.less
index 3a23fcf..818155b 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -29,11 +29,13 @@
 
       &:hover,
       &:focus {
-        background-color: lighten(@core-border-color, 2%);
+        color: @core-link-color;
+        background-color: lighten(@core-color, 45%);
       }
       &:active,
       &.active {
-        background-color: @core-border-color;
+        color: darken(@core-link-color, 15%);
+        background-color: lighten(@core-color, 40%);
       }
     }
   }
diff --git a/src/navigation.less b/src/navigation.less
index 9828cf3..80cba1a 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -1,11 +1,15 @@
 // Navigation
-// Breadcrumbs
-.breadcrumb {
+.breadcrumb,
+.tab,
+.pagination {
   list-style: none;
   margin: .5rem 0;
+}
+// Breadcrumbs
+.breadcrumb {
   padding: 1.2rem;
 
-  li {
+  .breadcrumb-item {
     display: inline-block;
     margin: 0;
 
@@ -33,36 +37,34 @@
 // 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;
+    display: inline-block;
     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 {
-        color: @core-color;
+      &:hover,
+      &:focus {
+        border-bottom-color: @core-color;
+        color: @core-link-color;
       }
     }
-    &.active {
-      border-bottom-color: darken(@core-color, 10%);
 
+    &.active {
       a {
-        color: darken(@core-color, 10%);
+        border-bottom-color: darken(@core-color, 10%);
+        color: darken(@core-link-color, 10%);
       }
     }
   }
@@ -71,7 +73,6 @@
     display: flex;
 
     .tab-item {
-      float: none;
       flex: 1 0 auto;
       text-align: center;
     }
@@ -79,32 +80,33 @@
 }
 // Pagination
 .pagination {
-  list-style: none;
-  margin: .5rem 0;
+  display: inline-block;
   padding: 1.2rem;
 
   .page-item {
-    float: left;
-    padding: .1rem .2rem;
-    border: .1rem solid transparent;
-    border-radius: .3rem;
+    display: inline-block;
 
+    span {
+      display: inline-block;
+      padding: .6rem .5rem;
+    }
     a {
-      display: block;
-      padding: .5rem 1.5rem;
-      color: @core-color;
+      display: inline-block;
+      padding: .6rem 1.2rem;
+      margin: 0 .1rem;
+      border-radius: .3rem;
       text-decoration: none;
 
       &:hover,
       &:focus {
-        color: darken(@core-color, 15%);
+        background-color: lighten(@core-color, 40%);
       }
     }
-    &.active {
-      background-color: @core-color;
 
+    &.active {
       a {
         color: #fff;
+        background-color: @core-color;
       }
     }
   }