simplify clear button method

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index eb266c59475c0895e71c24a97d8b7cec34b6eec9..3ea11897b157718dd809dfc1de0fb2673357e40d 100644 (file)
--- 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;
+              }
+            }
           }
         }
       }