diff --git a/scss/_nav.scss b/scss/_nav.scss
index 8660a4dbc..9004a247c 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -26,6 +26,11 @@
text-decoration: if($link-hover-decoration == underline, none, null);
}
+ &:focus {
+ outline: 0;
+ box-shadow: $nav-focus-box-shadow;
+ }
+
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 221d9573d..a87a60dbc 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -718,11 +718,11 @@ $input-btn-font-family: null !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
-$input-btn-focus-width: .25rem !default;
-$input-btn-focus-color-opacity: .25 !default;
-$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-blur: 0 !default;
-$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
@@ -874,7 +874,7 @@ $form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
-$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
@@ -1059,6 +1059,7 @@ $nav-link-color: $link-color !default;
$nav-link-hover-color: $link-hover-color !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-focus-box-shadow: $focus-ring-box-shadow !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
@@ -1190,7 +1191,7 @@ $pagination-border-color: $gray-300 !default;
$pagination-focus-color: $link-hover-color !default;
$pagination-focus-bg: $gray-200 !default;
-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
@@ -1570,8 +1571,9 @@ $btn-close-height: $btn-close-width !default;
$btn-close-padding-x: .25em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $black !default;
-$btn-close-bg: url("data:image/svg+xml,") !default;
$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
+$btn-close-bg: url("data:image/svg+xml,") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
$btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default;
$btn-close-focus-opacity: 1 !default;