update tabs code and add tab-block

1 files changed, 25 insertions, 8 deletions

diff --git a/src/navigation.less b/src/navigation.less
index c2d2cf9..c9b0f71 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -32,33 +32,50 @@
 }
 // Tabs
 .tab {
-  display: inline-block;
+  display: block;
   list-style: none;
   margin: .5rem 0;
   border-bottom: .1rem solid @control-color;
   .clearfix();
 
-  li {
+  .tab-item {
     float: left;
+    border-bottom: .1rem solid transparent;
     margin-bottom: -.1rem;
 
     a {
       display: block;
       padding: .5rem 1.5rem;
-      border-bottom: .1rem solid transparent;
       color: @body-font-color;
       text-decoration: none;
+    }
+
+    &:hover,
+    &:focus {
+      border-bottom-color: @core-color;
 
-      &:hover {
+      a {
         color: @core-color;
-        border-bottom-color: @core-color;
       }
-      &.active,
-      &:active {
+    }
+    &.active {
+      border-bottom-color: darken(@core-color, 10%);
+
+      a {
         color: darken(@core-color, 10%);
-        border-bottom-color: darken(@core-color, 10%);
       }
     }
   }
+
+  &.tab-block {
+    display: flex;
+
+    .tab-item {
+      float: none;
+      flex: 1;
+      text-align: center;
+    }
+
+  }
 }