diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 7794a3064d..6e4fbe93ae 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -81,7 +81,7 @@ &:focus { // Boosted mod &[data-focus-visible-added] { - z-index: $focus-visible-zindex; + z-index: $focus-visible-zindex; // Make sure the focused accordion button is displayed over its next sibling outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width)); box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color); } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index bc2471d3a6..b2a4ecccc0 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -52,7 +52,7 @@ border-color: var(--#{$prefix}btn-hover-border-color); } - // Boosted mod + // Boosted mod: make sure the focused button is displayed over its next sibling &:focus[data-focus-visible-added] { z-index: $focus-visible-zindex; } diff --git a/scss/_nav.scss b/scss/_nav.scss index f30f386b7f..e467f0334a 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -34,13 +34,13 @@ border: 0; @include transition($nav-link-transition); - // Boosted mod: handle focus differently focus + // Boosted mod: handle focus differently &:hover { color: var(--#{$prefix}nav-link-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); } - // Boosted mod + // Boosted mod: make sure the focused nav link is displayed over its next sibling &:focus[data-focus-visible-added] { z-index: $focus-visible-zindex; } diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 0923973b6e..12f3a9522c 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -72,7 +72,7 @@ border-color: var(--#{$prefix}pagination-hover-border-color); } - // Boosted mod + // Boosted mod: make sure the focused page link is displayed over its next sibling &:focus[data-focus-visible-added] { z-index: $focus-visible-zindex; } diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index a632ffa001..f618d54869 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -60,7 +60,7 @@ } &:focus { - z-index: $focus-visible-zindex; + z-index: $focus-visible-zindex; // Boosted mod: make sure the focused input is displayed over its next sibling border-color: $form-check-input-focus-border; // Boosted mod: default outline box-shadow: $form-check-input-focus-box-shadow; @@ -261,7 +261,7 @@ &[data-focus-visible-added]:focus { + .btn, + .tag { - z-index: $focus-visible-zindex; + z-index: $focus-visible-zindex; // Make sure the focused button check is displayed over its next sibling @include focus-visible(); } } diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index ba47ff12f3..4970727937 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -9,7 +9,7 @@ --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon}; - display: flex; + display: inline-flex; font-size: $form-star-size; background-color: transparent; @@ -54,7 +54,7 @@ } > [data-focus-visible-added]:focus + label { - z-index: $focus-visible-zindex; + z-index: $focus-visible-zindex; // Make sure the focused star is displayed over its next sibling @include focus-visible(); outline-offset: -1px; box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color); diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 469618aaea..4d9a97794f 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -20,7 +20,7 @@ toc: true ### CSS and Sass variables -- Breaking A parameter from the `focus-visible()` mixin has been removed. You don't need the `z-index` parameter anymore. Please reflect these modifications inside your website. +- Breaking A parameter from the `focus-visible()` mixin has been removed. If you use the `focus-visible()` mixin in your scss files with a `z-index` as a parameter, please adapt your code. ## v5.3.3