Merge pull request #266 from picturepan2/0.4.0 v0.4.0

0.4.0

1 files changed, 62 insertions, 0 deletions

diff --git a/src/_tabs.scss b/src/_tabs.scss
new file mode 100644
index 0000000..e9f9e2e
--- /dev/null
+++ b/src/_tabs.scss
@@ -0,0 +1,62 @@
+// Tabs
+.tab {
+  align-items: center;
+  border-bottom: $border-width solid $border-color;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: $unit-1 0 ($unit-1 - $border-width) 0;
+
+  .tab-item {
+    margin-top: 0;
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    a {
+      border-bottom: $border-width-lg solid transparent;
+      color: inherit;
+      display: block;
+      margin: 0 $unit-2 0 0;
+      padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $link-color;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: $primary-color;
+      color: $link-color;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 0;
+      text-align: center;
+
+      a {
+        margin: 0;
+      }
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: -4px;
+          top: -4px;
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+
+  &:not(.tab-block) {
+    .badge {
+      padding-right: 2px;
+    }
+  }
+}