add tabs code

3 files changed, 96 insertions, 3 deletions

diff --git a/demo/index.html b/demo/index.html
index 2bebac6..f9c8ac2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -457,17 +457,41 @@
             <div class="columns">
                 <div class="column">
                     <ul class="breadcrumb">
-                        <li>
+                        <li class="breadcrumb-item">
                             <a href="#">
                                 Home
                             </a>
                         </li>
-                        <li>
+                        <li class="breadcrumb-item">
                             <a href="#">
                                 Profile
                             </a>
                         </li>
-                        <li>
+                        <li class="breadcrumb-item">
+                            <a href="#">
+                                Change avatar
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <section class="tabs">
+            <header class="text-center"><h4>tabs</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <ul class="tab">
+                        <li class="tab-item">
+                            <a href="#" class="active">
+                                Home
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#">
+                                Profile
+                            </a>
+                        </li>
+                        <li class="tab-item">
                             <a href="#">
                                 Change avatar
                             </a>
diff --git a/dist/spectre.css b/dist/spectre.css
index 3d2944d..c902411 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1194,6 +1194,42 @@ textarea.form-input {
   padding: 0 .4rem;
   color: #c5c5c5;
 }
+.tab {
+  display: inline-block;
+  list-style: none;
+  margin: .5rem 0;
+  border-bottom: 0.1rem solid #c5c5c5;
+}
+.tab::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.tab::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.tab li {
+  float: left;
+  margin-bottom: -0.1rem;
+}
+.tab li a {
+  display: block;
+  padding: .5rem 1.5rem;
+  border-bottom: .1rem solid transparent;
+  color: #333;
+  text-decoration: none;
+}
+.tab li a:hover {
+  color: #5764C6;
+  border-bottom-color: #5764C6;
+}
+.tab li a.active,
+.tab li a:active {
+  color: #3b49af;
+  border-bottom-color: #3b49af;
+}
 .tooltip {
   position: relative;
 }
diff --git a/src/navigation.less b/src/navigation.less
index 2e94d30..c2d2cf9 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -1,4 +1,5 @@
 // Navigation
+// Breadcrumb
 .breadcrumb {
   list-style: none;
   margin: .5rem 0;
@@ -29,3 +30,35 @@
     }
   }
 }
+// Tabs
+.tab {
+  display: inline-block;
+  list-style: none;
+  margin: .5rem 0;
+  border-bottom: .1rem solid @control-color;
+  .clearfix();
+
+  li {
+    float: left;
+    margin-bottom: -.1rem;
+
+    a {
+      display: block;
+      padding: .5rem 1.5rem;
+      border-bottom: .1rem solid transparent;
+      color: @body-font-color;
+      text-decoration: none;
+
+      &:hover {
+        color: @core-color;
+        border-bottom-color: @core-color;
+      }
+      &.active,
+      &:active {
+        color: darken(@core-color, 10%);
+        border-bottom-color: darken(@core-color, 10%);
+      }
+    }
+  }
+}
+