feat(buttons): enhance focus with box-shadow alongside outline-offset

Orange-OpenSource · May 27, 2020 · a66c567 · a66c567
1 parent 68bc83b
commit a66c567
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 19 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -28,8 +28,13 @@
 
   &:focus,
   &.focus {
-    outline-offset: $btn-border-width; // Boosted mod
-    box-shadow: $btn-focus-box-shadow;
+    // Boosted mod
+    outline-offset: $btn-border-width;
+
+    &[data-focus-visible-added] {
+      box-shadow: $btn-focus-box-shadow;
+    }
+    // End mod
   }
 
   &:active,

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -309,7 +309,7 @@ sup { top: -.5em; }
 // Links
 
 a {
-  display: inline-block; // Boosted mod: To make `outline` wrap multiple lines
+  display: inline-block; // Boosted mod: to make `outline` wrap multiple lines
   color: $link-color;
   text-decoration: $link-decoration;
   // Boosted mod

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -613,8 +613,8 @@ $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-bold !default;
 $btn-box-shadow:              null !default;
-$btn-focus-width:             null !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-focus-width:             $border-width !default;
+$btn-focus-box-shadow:        0 0 0 $btn-focus-width $white !default;
 $btn-disabled-opacity:        1 !default;
 $btn-active-box-shadow:       null !default;
 

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -34,12 +34,7 @@
     @include gradient-bg($hover-background);
     border-color: $hover-border;
     outline-color: $hover-border; // Boosted mod
-    @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);
-    }
+    // Boosted mod: buttons share the same `box-shadow` on `:focus`
   }
 
   &:active,
@@ -52,14 +47,7 @@
     border-color: $active-border;
     outline-color: $active-border; // Boosted mod
 
-    &:focus {
-      @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);
-      }
-    }
+    // Boosted mod: buttons share the same `box-shadow` on `:focus`
   }
 
   &:disabled,