First Commit

3D Components/Sass/assets/_tab.scss

@@ -0,0 +1,108 @@
+@mixin tab($color, $fg: $color) {
+    background: $color;
+    background-image: linear-gradient(to top, darken($color, 5%), $color);
+    border-color: $color;
+    text-shadow: 0 1px 0 $color;
+    color: darken($fg, 30%);
+
+    &:hover {
+        background: darken($color, 5%);
+        background-image: linear-gradient(to bottom, darken($color, 5%), $color);
+        border-color: darken($color, 5%);
+    }
+
+    &:active {
+        background: darken($color, 10%);
+        border-color: darken($color, 10%);
+        box-shadow: 0 1px 2px rgba($color, 0.6);
+    }
+
+    &:focus {
+        border-color: darken($color, 5%);
+        box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
+    }
+
+    &:disabled {
+        background: darken($color, 20%);
+        border-color: darken($color, 25%);
+        text-shadow: none;
+        color: darken($fg, 30%);
+    }
+
+    &.active {
+        background: darken($color, 15%);
+        background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%));
+        border-color: 1px darken($color, 20%) solid;
+    }
+}
+
+.tabs {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+
+    .tab {
+        display: block;
+        margin: 0;
+        padding: 0.5em 1em;
+        background: $black;
+        border: 1px solid $black;
+        color: $white;
+        text-decoration: none;
+        text-shadow: 0 1px 0 $black;
+        transition: all 0.2s ease-in-out;
+
+        &:first-child {
+            border-top-left-radius: $border-radius;
+            border-bottom-left-radius: $border-radius;
+        }
+        &:last-child {
+            border-top-right-radius: $border-radius;
+            border-bottom-right-radius: $border-radius;
+        }
+
+        &:hover {
+            background: $black;
+            border-color: $black;
+            cursor: pointer;
+        }
+    
+        &:focus {
+            outline: none;
+            border-color: $black;
+        }
+    }
+
+    .tab-primary {
+        @include tab($accent);
+    }
+
+    .tab-secondary {
+        @include tab($accent-alt);
+    }
+
+    .tab-success {
+        @include tab($green);
+    }
+
+    .tab-danger {
+        @include tab($red);
+    }
+
+    .tab-warning {
+        @include tab($orange);
+    }
+
+    .tab-info {
+        @include tab($blue);
+    }
+
+    .tab-light {
+        @include tab($white, #121212);
+    }
+
+    .tab-dark {
+        @include tab($black, #fefefe);
+    }
+}