Add transition and add box-shadow for navbar-toggler (#30038)

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 3118a2eb0a42d8dd607c777442e878314351eb08..d46a815d604306f7a298fa85f1e352c85155dd6e 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -121,10 +121,16 @@
   background-color: transparent; // remove default button style
   border: $border-width solid transparent; // remove default button style
   @include border-radius($navbar-toggler-border-radius);
+  @include transition($navbar-toggler-transition);
+
+  &:hover {
+    text-decoration: none;
+  }
 
-  &:hover,
   &:focus {
     text-decoration: none;
+    outline: 0;
+    box-shadow: 0 0 0 $navbar-toggler-focus-width;
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 95e3d0dfa8f017e3c2b54dfdd73ec8a2f54ee806..c72f21c91932f6aa42303530cda29f28d056a7b0 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -851,6 +851,8 @@ $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
 $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
+$navbar-toggler-focus-width:        $btn-focus-width !default;
+$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
 
 $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;