diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 78e3c378d6..3eeb934b37 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -104,6 +104,7 @@ text-align: center; background: none; border: 0; + outline: 0; // Boosted mod opacity: $carousel-control-opacity; @include transition($carousel-control-transition); @@ -124,9 +125,19 @@ } &:active { - --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; // Boosted mod + --#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg}; color: $carousel-control-color; } + + &:focus { + &[data-focus-visible-added] { + & > span { + outline: map-get($border-widths, 3) solid $brand-orange; + outline-offset: $outline-offset; + box-shadow: 0 0 0 $outline-offset $white; + } + } + } // End mod } @@ -208,12 +219,24 @@ &:hover, &:focus { background-color: color-contrast($carousel-indicator-active-bg); - transform: scale($carousel-indicator-hover-scale); + } + &:hover { + transform: scale($carousel-indicator-hover-scale); &::before { transform: translate3d(-50%, -50%, 0) scale($carousel-indicator-active-scale); } } + + &:focus { + &[data-focus-visible-added] { + outline: map-get($border-widths, 3) solid $brand-orange; + outline-offset: $outline-offset; + box-shadow: 0 0 0 $outline-offset $white; + transform: none; + } + } + } .active { diff --git a/scss/_variables.scss b/scss/_variables.scss index cb3dbb11fb..24f0b5e922 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -563,7 +563,8 @@ $container-padding-x: $grid-gutter-width !default; $border-width: .125rem !default; $border-widths: ( 1: $border-width * .5, - 2: $border-width + 2: $border-width, + 3: $border-width * 1.5 ) !default; $border-style: solid !default; diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md index c86d7d3d6e..45f37d02fc 100644 --- a/site/content/docs/5.1/utilities/borders.md +++ b/site/content/docs/5.1/utilities/borders.md @@ -108,6 +108,7 @@ Or, choose from any of the `.border-opacity` utilities: + {{< /example >}} ## Radius