Add nav link transition (#29988)

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 81eec4ed3fee6211e8be57d8a0aa0d215775eca7..e71f6839e22ea670a1db5a3df76170a5cf0a888f 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -15,6 +15,7 @@
   display: block;
   padding: $nav-link-padding-y $nav-link-padding-x;
   text-decoration: if($link-decoration == none, null, none);
+  @include transition($nav-link-transition);
 
   &:hover,
   &:focus {

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 638945eb22d721e6e47aa95408e437b52bf5c6fc..66f7357b0f04ae85814f59b81924cf0c546d95be 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -803,6 +803,7 @@ $zindex-tooltip:                    1070 !default;
 
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
+$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           $gray-600 !default;
 
 $nav-tabs-border-color:             $gray-300 !default;