Initial commit.

scss/bootstrap/_buttons.scss

@@ -0,0 +1,184 @@
+// Default buttons
+.btn {
+  // Remove border
+  &-primary, &-secondary, &-success, &-info, &-warning, &-danger, &-light, &-dark {
+    // border-color: transparent;
+  }
+
+  // Tertiary
+  &-tertiary {
+    color: $gray-600;
+    background-color: $gray-200;
+
+    &:hover, &:active, &:focus {
+      color: $black;
+      background-color: $gray-300;
+      border-color: $gray-300;
+    }
+  }
+
+  &-success {
+    color: $white;
+
+    &:hover {
+      color: $white;
+      background-color: $green-600;
+    }
+  }
+
+  &-warning {
+    color: $white;
+
+    &:hover {
+      color: $white;
+      background-color: $orange-600;
+    }
+  }
+}
+
+// Outline buttons
+.btn-outline {
+  &-success:hover {
+    color: $white;
+  }
+
+  &-warning:hover {
+    color: $white;
+  }
+
+  // Tertiary
+  &-tertiary {
+    color: $gray-600;
+    border-color: $gray-400;
+
+    &:hover {
+      color: $black;
+      background-color: $gray-200;
+      border-color: $gray-200;
+    }
+  }
+}
+
+// Tender class
+.btn-tender {
+  &-primary {
+    color: $primary;
+    background-color: $primary-50;
+    border-color: $purple-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  &-secondary {
+    color: $gray-800;
+    background-color: $gray-200;
+    border-color: $gray-500;
+
+    &:hover {
+      color: #fff;
+      background-color: $secondary;
+      border-color: $secondary;
+    }
+  }
+
+  // Tertiary
+  &-tertiary {
+    color: $gray-700;
+    background-color: $gray-100;
+    border-color: $gray-400;
+
+    &:hover, &:active, &:focus {
+      color: $black;
+      background-color: $gray-200;
+      border-color: $gray-200;
+    }
+  }
+
+  &-success {
+    color: $success;
+    background-color: $success-50;
+    border-color: $green-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $success;
+      border-color: $success;
+    }
+  }
+
+  &-info {
+    color: $info;
+    background-color: $info-50;
+    border-color: $blue-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $info;
+      border-color: $info;
+    }
+  }
+
+  &-warning {
+    color: $warning;
+    background-color: $warning-50;
+    border-color: $orange-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $warning;
+      border-color: $warning;
+    }
+  }
+
+  &-danger {
+    color: $danger;
+    background-color: $danger-50;
+    border-color: $red-400;
+
+    &:hover {
+      color: #fff;
+      background-color: $danger;
+      border-color: $danger;
+    }
+  }
+}
+
+// Phantom class
+.btn-phantom {
+  &-primary, &-secondary, &-success, &-info, &-warning, &-danger {
+    background-color: transparent;
+  }
+
+  &-primary:hover {
+    color: $primary;
+    background-color: $primary-50;
+  }
+  &-secondary:hover {
+    color: $black;
+    background-color: $secondary-50;
+  }
+  &-tertiary:hover {
+    color: $gray-600;
+    background-color: $gray-100;
+  }
+  &-success:hover {
+    color: $success;
+    background-color: $success-50;
+  }
+  &-info:hover {
+    color: $info;
+    background-color: $info-50;
+  }
+  &-warning:hover {
+    color: $warning;
+    background-color: $warning-50;
+  }
+  &-danger:hover {
+    color: $danger;
+    background-color: $danger-50;
+  }
+}