fix: update buttons

techfromsage · Apr 20, 2021 · 242b9c2 · 242b9c2
1 parent 460bfe8
commit 242b9c2
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 13 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -1,29 +1,31 @@
-.btn-outline-primary,
-.btn-outline-success,
-.btn-outline-warning,
-.btn-outline-info,
 .btn-default,
 .btn-success,
 .btn-warning,
 .btn-info,
 .btn-link {
-  @include button-outline-variant(
+  @include button-variant(
+    $white,
+    $primary,
     $primary,
+    $gray-200,
+    $accent,
     $accent,
     $gray-200,
     $accent,
-    $accent
+    $accent,
+    $white,
+    $gray-500,
+    $gray-500
   )
 
-  background-color: $white;
-
   &:focus {
-    box-shadow: 0 0 0 $btn-focus-width $primary;
+    background-color: $white;
+    box-shadow: 0 0 0 $btn-focus-width $accent;
   }
 
   &:active {
     &:focus {
-      box-shadow: 0 0 0 $btn-focus-width $primary;
+      box-shadow: 0 0 0 $btn-focus-width $accent;
     }
   }
 }
@@ -35,6 +37,13 @@
   text-decoration: none;
 }
 
+.btn-outline-primary,
+.btn-outline-success,
+.btn-outline-warning,
+.btn-outline-info {
+  @extend .btn-default;
+}
+
 .btn-outline-danger,
 .btn-danger {
   @include button-outline-variant(
@@ -63,4 +72,57 @@
     border-color: $white;
     box-shadow: 0px 0px 0px $btn-focus-width $white, 0px 0px 0px 2px $primary;
   }
+
+  &:disabled,
+  &.disabled {
+    background-color: $gray-500;
+    border-color: $gray-500;
+  }
+}
+
+.btn-alert {
+  @include button-outline-variant(
+    $black,
+    $gray-200,
+    transparent,
+    $black,
+    $black
+  )
+
+  &:hover {
+    color: $black;
+    background-color: $gray-200;
+  }
+
+  &:focus {
+    border-color: $black;
+    box-shadow: 0px 0px 0px $btn-focus-width $black, 0px 0px 0px 2px transparent;
+  }
 }
+
+.btn-alert--primary {
+  @include button-variant(
+    $black,
+    $black,
+    $white,
+    $gray-900,
+    $gray-900,
+    $white,
+    $black,
+    $white,
+    $white,
+    $gray-500,
+    $gray-500,
+    $white
+  )
+
+  &:focus {
+    border-color: $black;
+    box-shadow: 0px 0px 0px $btn-focus-width $white, 0px 0px 0px 2px $black;
+  }
+}
+
+.btn-lg {
+  font-weight: 400;
+}
+
diff --git a/scss/talis.scss b/scss/talis.scss
@@ -95,7 +95,12 @@ $modal-backdrop-opacity: .8;
 
 $input-btn-focus-width: 1px !default;
 $input-btn-focus-box-shadow: 0 0 0 1px currentColor !default;
-$btn-font-weight: 600;
+$btn-font-weight: 600 !default;
+$btn-transition: background-color 1s cubic-bezier(0.19, 1, 0.22, 1) !default;
+$btn-disabled-opacity: 1 !default;
+$btn-link-color: $primary !default;
+$btn-link-hover-color: $accent !default;
+$btn-link-disabled-color: $gray-500 !default;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";