fix(buttons): make use of currentColor (#62)

* Make use of currentColor To allow customer branding to cascade * Revert form-control-focus changes * currentColor cannot override color * Fix btn-alert:hover:active background * Fix navbar hover background * Remove commented out rule Co-authored-by: Dan Matthew <dm@talis.com> * More use of currentColor * Navbar outline should use currentColor * Fix btn-alert underline and hover color * btn-link should have transparent border Co-authored-by: Dan Matthew <dm@talis.com>
techfromsage · Oct 5, 2020 · 40cb629 · 40cb629
1 parent d98769f
commit 40cb629
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 23 deletions.
diff --git a/assets/stylesheets/bootstrap/_button-groups.scss b/assets/stylesheets/bootstrap/_button-groups.scss
@@ -86,8 +86,7 @@
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
-  border-color: $brand-primary;
-  // box-shadow: 0 0 0 1px $brand-primary;
+  border-color: currentColor;
 }
 
 

diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss
@@ -69,7 +69,7 @@ a.btn {
 .btn-default,
 .btn-success,
 .btn-warning {
-  @include button-variant-plain($btn-default-color, $btn-default-bg, $btn-default-border);
+  @include button-variant-plain($btn-default-color, $btn-default-bg);
 }
 // Appears in Talis turqoise
 .btn-primary {
@@ -78,12 +78,12 @@ a.btn {
 
 // Info appears as pink
 .btn-info {
-  @include button-variant-plain($btn-default-color, $btn-default-bg, $btn-default-border);
+  @include button-variant-plain($btn-default-color, $btn-default-bg);
 }
 
 // Danger and error appear as a plain button with red text...
 .btn-danger {
-  @include button-variant-plain($btn-danger-color, $btn-danger-bg, $btn-danger-color);
+  @include button-variant-plain($btn-danger-color, $btn-danger-bg);
 }
 
 .btn-alert {
@@ -96,8 +96,8 @@ a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: 400;
   color: $link-color;
+  border-color: transparent;
   font-weight: 600;
 
   &,
@@ -115,26 +115,26 @@ a.btn {
   }
 
   &:hover {
-    border-color: $btn-default-border;
+    border-color: currentColor;
     background-color: $gray200;
   }
 
   &:focus {
-    border-color: $btn-default-color;
+    border-color: currentColor;
     background-color: transparent;
-    box-shadow: 0px 0px 0px 1px $btn-default-border;
+    box-shadow: 0px 0px 0px 1px currentColor;
   }
 
   &:hover:focus {
     background-color: $gray200;
-    border-color: $btn-default-color;
-    box-shadow: 0px 0px 0px 1px $btn-default-border;
+    border-color: currentColor;
+    box-shadow: 0px 0px 0px 1px currentColor
   }
 
   &:active {
     background-color: $gray200;
-    border-color: $btn-default-color;
-    box-shadow: 0px 0px 0px 1px $btn-default-border;
+    border-color: currentColor;
+    box-shadow: 0px 0px 0px 1px currentColor;
   }
 
   &[disabled],

diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
@@ -167,7 +167,7 @@
   }
 
   &:focus {
-    outline: 2px solid $white;
+    outline: 2px solid currentColor;
     outline-offset: -2px;
   }
 
@@ -433,9 +433,9 @@
       color: $navbar-default-link-color;
 
       &:focus {
-        outline: 2px solid $white;
+        outline: 2px solid currentColor;
         outline-offset: -2px;
-        background-color: $navbar-default-bg;
+        background-color: inherit;
       }
 
       &:hover {

diff --git a/assets/stylesheets/bootstrap/_scaffolding.scss b/assets/stylesheets/bootstrap/_scaffolding.scss
@@ -64,7 +64,7 @@ a {
 
   &:focus {
     text-decoration: none;
-    outline: 1px solid $link-hover-color;
+    outline: 1px solid currentColor;
   }
 }
 

diff --git a/assets/stylesheets/bootstrap/mixins/_alerts.scss b/assets/stylesheets/bootstrap/mixins/_alerts.scss
@@ -15,4 +15,10 @@
   a {
     color: $text-color;
   }
+  .btn-alert {
+    text-decoration: none;
+    &:hover {
+      color: $white !important;
+    }
+  }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss
@@ -3,10 +3,10 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant-plain($color, $background, $border) {
+@mixin button-variant-plain($color, $background) {
   color: $color;
   background-color: $background;
-  border-color: $border;
+  border-color: currentColor;
 
   &:hover {
     background-color: #E9ECEF;
@@ -17,13 +17,13 @@
   &.focus {
     color: darken(saturate(adjust-hue($color, -0.2776), 1.4706), 7.0588);
     background-color: $background;
-    border-color: darken(saturate(adjust-hue($color, -0.2776), 1.4706), 7.0588);;
-    box-shadow: 0px 0px 0px 1px $color;
+    border-color: currentColor;
+    box-shadow: 0px 0px 0px 1px currentColor;
   }
 
   &:focus:hover {
     background-color: #E9ECEF;
-    box-shadow: 0px 0px 0px 1px $color;
+    box-shadow: 0px 0px 0px 1px currentColor;
   }
 
   &:active,
@@ -35,7 +35,7 @@
     &:focus,
     &.focus {
       background-color: #E9ECEF;
-      box-shadow: 0px 0px 0px 1px $color;
+      box-shadow: 0px 0px 0px 1px currentColor;
     }
   }
 
@@ -199,6 +199,10 @@
     background-image: none;
   }
 
+  &:hover:active {
+    background-color: $black;
+  }
+
   &.disabled,
   &[disabled],
   fieldset[disabled] {