From f9c3cd9bf2c7c25d21ab6427f1893f316b28dbfe Mon Sep 17 00:00:00 2001
From: Andy Cochran <acochran@council.nyc.gov>
Date: Fri, 21 Apr 2017 13:54:15 -0400
Subject: [PATCH] simplify clear button method

---
 scss/components/_button.scss | 50 +++++++++++-------------------------
 1 file changed, 15 insertions(+), 35 deletions(-)

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index eb266c594..3ea11897b 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -46,10 +46,6 @@ $button-radius: $global-radius !default;
 /// @type Number
 $button-hollow-border-width: 1px !default;
 
-/// Border width for hollow outline buttons
-/// @type Number
-$button-clear-border-width: 1px !default;
-
 /// Sizes for buttons.
 /// @type Map
 $button-sizes: (
@@ -75,10 +71,6 @@ $button-background-hover-lightness: -20% !default;
 /// @type Number
 $button-hollow-hover-lightness: -50% !default;
 
-/// Color lightness on hover for clear buttons.
-/// @type Number
-$button-clear-hover-lightness: -50% !default;
-
 // Internal: flip from margin-right to margin-left for defaults
 @if $global-text-direction == 'rtl' {
   $button-margin: 0 0 $global-margin $global-margin !default;
@@ -198,30 +190,6 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   }
 }
 
-/// Removes background fill on hover and focus for hollow buttons.
-@mixin button-clear {
-  &,
-  &:hover, &:focus {
-    background-color: transparent;
-  }
-}
-
-@mixin button-clear-style(
-  $color: $primary-color,
-  $hover-lightness: $button-clear-hover-lightness,
-  $border-width: $button-clear-border-width
-) {
-  $color-hover: scale-color($color, $lightness: $hover-lightness);
-
-  border: $border-width solid transparent;
-  color: $color;
-
-  &:hover, &:focus {
-    border-color: transparent;
-    color: $color-hover;
-  }
-}
-
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
 /// @param [Color] $background [$button-background] - Background color of the disabled button.
 /// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
@@ -350,12 +318,24 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     // Clear style
     @if $button-fill != clear {
       &.clear {
-        @include button-clear;
-        @include button-clear-style;
+        @include button-hollow;
+        @include button-hollow-style;
+
+        &, &:hover, &:focus {
+          &, &.disabled, &[disabled] {
+            border-color: transparent;
+          }
+        }
 
         @each $name, $color in $button-palette {
           &.#{$name} {
-            @include button-clear-style($color);
+            @include button-hollow-style($color);
+
+            &, &:hover, &:focus {
+              &, &.disabled, &[disabled] {
+                border-color: transparent;
+              }
+            }
           }
         }
       }
-- 
2.47.2