First Commit

3D Components/Sass/assets/_button.scss

@@ -0,0 +1,111 @@
+// Buttons
+@mixin btn($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%);
+    }
+}
+
+.btn {
+    display: inline-block;
+    padding: 0.5em 1em;
+    background: $black;
+    border: 1px solid $black;
+    @if $border-radius <= 0 {
+        border-radius: 3px;
+    } @else {
+        border-radius: $border-radius;
+    }
+    color: $white;
+    text-decoration: none;
+    text-shadow: 0 1px 0 $black;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        background: $black;
+        border-color: $black;
+        box-shadow: 0 1px 2px rgba($black, 0.2);
+        cursor: pointer;
+    }
+
+    &:active {
+        background: #000;
+        border-color: $black;
+        box-shadow: inset 0 1px 2px rgba($black, 0.3);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: $black;
+        box-shadow: 0 0 0 1px rgba($black, 0.2), 0 1px 2px rgba($black, 0.2);
+    }
+
+    &:disabled {
+        background: #151515;
+        border-color: $black;
+        color: #333;
+        cursor: default;
+    }
+
+    &.btn-wide {
+        width: 100%;
+    }
+
+    &.btn-primary {
+        @include btn($accent);
+    }
+
+    &.btn-secondary {
+        @include btn($accent-alt);
+    }
+
+    &.btn-success {
+        @include btn($green);
+    }
+
+    &.btn-danger {
+        @include btn($red);
+    }
+
+    &.btn-warning {
+        @include btn($orange);
+    }
+
+    &.btn-info {
+        @include btn($blue);
+    }
+
+    &.btn-dark {
+        @include btn($black, #fefefe);
+    }
+
+    &.btn-light {
+        @include btn($white, #121212);
+    }
+}