fix: update outline button styles

techfromsage · Apr 19, 2021 · 86470d8 · 86470d8
1 parent a58cd78
commit 86470d8
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 22 deletions.
diff --git a/assets/app.js b/assets/app.js
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/_alerts.scss b/scss/_alerts.scss
@@ -0,0 +1,3 @@
+.alert {
+  border-left-width: 3px;
+}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -0,0 +1,54 @@
+.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(
+    $primary,
+    $accent,
+    $gray-200,
+    $accent,
+    $accent
+  )
+
+  &:focus {
+    box-shadow: 0 0 0 $btn-focus-width $primary;
+  }
+
+  &:active {
+    &:focus {
+      box-shadow: 0 0 0 $btn-focus-width $primary;
+    }
+  }
+}
+
+.btn-link {
+  border-color: transparent;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.btn-outline-danger,
+.btn-danger {
+  @include button-outline-variant(
+    $red,
+    #a71a22,
+    $gray-200,
+    #a71a22,
+    #a71a22
+  )
+
+  &:focus {
+    box-shadow: 0 0 0 $btn-focus-width #a71a22;
+  }
+
+  &:active {
+    &:focus {
+      box-shadow: 0 0 0 $btn-focus-width #a71a22;
+    }
+  }
+}
diff --git a/scss/talis.scss b/scss/talis.scss
@@ -139,24 +139,5 @@ $btn-font-weight: 600;
 // Utilities
 @import "bootstrap/scss/utilities/api";
 
-.alert {
-  border-left-width: 3px;
-}
-
-.btn-outline-primary {
-  @include button-outline-variant(
-    $primary,
-    $accent,
-    $gray-200,
-    $accent,
-    $accent
-  )
-
-  &:focus {
-    box-shadow: 0 0 0 $btn-focus-width $primary;
-  }
-}
-
-.btn-default {
-  @extend .btn-outline-primary;
-}
+@import 'alerts';
+@import 'buttons';