feat(carousel): new navigation focus style (#1242)

Orange-OpenSource · Jun 1, 2022 · b3db327 · b3db327
1 parent 726df16
commit b3db327
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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
@@ -108,6 +108,7 @@ Or, choose from any of the `.border-opacity` utilities:
 <span class="border border-0"></span>
 <span class="border border-1"></span>
 <span class="border border-2"></span>
+<span class="border border-3"></span>
 {{< /example >}}
 
 ## Radius