fix(buttons): update btn-alert variants

techfromsage · Oct 6, 2020 · 3f946f2 · 3f946f2
1 parent 162dc99
commit 3f946f2
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 5 deletions.
diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss
@@ -90,6 +90,10 @@ a.btn {
   @include button-variant-alert();
 }
 
+.btn-alert--primary {
+  @include button-variant-alert--primary();
+}
+
 
 // Link buttons
 // -------------------------

diff --git a/assets/stylesheets/bootstrap/mixins/_alerts.scss b/assets/stylesheets/bootstrap/mixins/_alerts.scss
@@ -15,10 +15,12 @@
   a {
     color: $text-color;
   }
+
   .btn-alert {
     text-decoration: none;
+
     &:hover {
-      color: $white !important;
+      color: currentColor !important;
     }
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss
@@ -164,8 +164,8 @@
   border-color: $black;
 
   &:hover {
-    background-color: $black;
-    color: $white;
+    background-color:rgba(0,0,0,0.1);
+    color: $black;
     border-color: $black;
   }
 
@@ -186,7 +186,7 @@
   &.active,
   .open > &.dropdown-toggle {
     color: $black;
-    background-color: transparent;
+    background-color: rgba(0,0,0,0.1);
     border-color: $black;
     box-shadow:
       0px 0px 0px 1px $black,
@@ -200,9 +200,83 @@
   }
 
   &:hover:active {
+    background-color: rgba(0,0,0,0.1);
+    color: $black;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] {
+    background-color: #ADB5BD;
+    border-color: #ADB5BD;
+    color: $white;
+    box-shadow: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  &[disabled]:active,
+  fieldset[disabled] & {
+    // pointer-events: none;
+
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: #ADB5BD;
+      border-color: #ADB5BD;
+      color: $white;
+      box-shadow: none;
+    }
+  }
+}
+
+@mixin button-variant-alert--primary() {
+  color: $white;
+  background-color: $black;
+  border-color: $black;
+
+  &:hover {
+    background-color: $gray800;
+    color: $white;
+    border-color: $black;
+  }
+
+  &:focus,
+  &.focus {
+    color: $white;
+    border-color: $black;
+    box-shadow:
+      0px 0px 0px 1px $white,
+      0px 0px 0px 2px $black,
+  }
+
+  &:hover:focus {
+    color: $white;
     background-color: $black;
   }
 
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $white;
+    background-color: $gray800;
+    border-color: $black;
+    box-shadow:
+      0px 0px 0px 1px $white,
+      0px 0px 0px 2px $gray800;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+  }
+
+  &:hover:active {
+    background-color: #gray800;
+    color: $white;
+  }
+
   &.disabled,
   &[disabled],
   fieldset[disabled] {

diff --git a/index.html b/index.html
@@ -674,7 +674,7 @@ <h2>Dropdowns</h2>
         <h2>Alerts</h2>
         <!-- Basic -->
         <div class="alert alert-info">
-          <span>Something has happened. Yup.</span> <button class="btn btn-alert">Click me</button>
+          <span>Something has happened. Yup.</span> <button class="btn btn-alert">Click me</button> <button class="btn btn-alert--primary">Click me</button>
         </div>
 
         <!-- Success -->