From 8ddfdbb60b6ec3d7d497515baca54f0f8674e91b Mon Sep 17 00:00:00 2001
From: Catalin Zalog <c@zalog.ro>
Date: Sat, 4 Apr 2020 17:00:28 +0300
Subject: [PATCH 1/2] fix(css): checks for `$btn-box-shadow`

Fixes `box-shadow` property being invalid when that var in `none`.
---
 scss/mixins/_buttons.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 53a337ba0327..2f56374d6bed 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -31,7 +31,7 @@
     @include gradient-bg($hover-background);
     border-color: $hover-border;
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
+    @if $enable-shadows and $btn-box-shadow != none {
       box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
     } @else {
       box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);

From b2448721e990eda13f8bc51a1c60b0b6b376e359 Mon Sep 17 00:00:00 2001
From: Catalin Zalog <c@zalog.ro>
Date: Sat, 4 Apr 2020 17:08:35 +0300
Subject: [PATCH 2/2] perf(css): adds `box-shadow` where needed

`box-shadow` mixin already checks for property `none`.
---
 scss/mixins/_buttons.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 2f56374d6bed..4bb9feb8ae91 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -30,10 +30,10 @@
     color: $hover-color;
     @include gradient-bg($hover-background);
     border-color: $hover-border;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows and $btn-box-shadow != none {
-      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
     } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
     }
   }
@@ -48,10 +48,10 @@
     border-color: $active-border;
 
     &:focus {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+      @if $enable-shadows {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
       } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
         box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
       }
     }
@@ -96,10 +96,10 @@
     border-color: $active-border;
 
     &:focus {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+      @if $enable-shadows {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
       } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
         box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
       }
     }