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