update tabs code and add tab-block

3 files changed, 71 insertions, 25 deletions

diff --git a/demo/index.html b/demo/index.html
index e74275d..d8636a1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -512,38 +512,48 @@
             <div class="columns">
                 <div class="column">
                     <ul class="tab">
+                        <li class="tab-item active">
+                            <a href="#">
+                                Music
+                            </a>
+                        </li>
                         <li class="tab-item">
-                            <a href="#" class="active">
-                                Home
+                            <a href="#">
+                                Playlists
                             </a>
                         </li>
                         <li class="tab-item">
                             <a href="#">
-                                Profile
+                                Radio
                             </a>
                         </li>
                         <li class="tab-item">
                             <a href="#">
-                                Change avatar
+                                Connect
                             </a>
                         </li>
                     </ul>
                 </div>
                 <div class="column">
                     <ul class="tab tab-block">
+                        <li class="tab-item active">
+                            <a href="#">
+                                Music
+                            </a>
+                        </li>
                         <li class="tab-item">
-                            <a href="#" class="active">
-                                Home
+                            <a href="#">
+                                Playlists
                             </a>
                         </li>
                         <li class="tab-item">
                             <a href="#">
-                                Profile
+                                Radio
                             </a>
                         </li>
                         <li class="tab-item">
                             <a href="#">
-                                Change avatar
+                                Connect
                             </a>
                         </li>
                     </ul>
diff --git a/dist/spectre.css b/dist/spectre.css
index 69d5c82..99c6bd9 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1232,7 +1232,7 @@ textarea.form-input {
   color: #c5c5c5;
 }
 .tab {
-  display: inline-block;
+  display: block;
   list-style: none;
   margin: .5rem 0;
   border-bottom: 0.1rem solid #c5c5c5;
@@ -1247,26 +1247,45 @@ textarea.form-input {
   display: table;
   clear: both;
 }
-.tab li {
+.tab .tab-item {
   float: left;
+  border-bottom: .1rem solid transparent;
   margin-bottom: -0.1rem;
 }
-.tab li a {
+.tab .tab-item a {
   display: block;
   padding: .5rem 1.5rem;
-  border-bottom: .1rem solid transparent;
   color: #333;
   text-decoration: none;
 }
-.tab li a:hover {
-  color: #5764C6;
+.tab .tab-item:hover,
+.tab .tab-item:focus {
   border-bottom-color: #5764C6;
 }
-.tab li a.active,
-.tab li a:active {
-  color: #3b49af;
+.tab .tab-item:hover a,
+.tab .tab-item:focus a {
+  color: #5764C6;
+}
+.tab .tab-item.active {
   border-bottom-color: #3b49af;
 }
+.tab .tab-item.active a {
+  color: #3b49af;
+}
+.tab.tab-block {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.tab.tab-block .tab-item {
+  float: none;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  text-align: center;
+}
 .tooltip {
   position: relative;
 }
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;
+    }
+
+  }
 }