[BUGFIX] Make carousel controls visible on focus

benjaminkott · Jun 1, 2023 · e60c1dc · e60c1dc
1 parent 5ffa09c
commit e60c1dc
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 26 deletions.
diff --git a/Resources/Public/Css/bootstrap5-rte.css b/Resources/Public/Css/bootstrap5-rte.css
@@ -15768,7 +15768,8 @@ textarea.form-control.error {
   }
 }
 
-.carousel:hover .carousel-indicators,
+.carousel:focus-within .carousel-indicators,
+.carousel:focus-within .carousel-control, .carousel:hover .carousel-indicators,
 .carousel:hover .carousel-control {
   opacity: 1;
 }
@@ -15779,8 +15780,8 @@ textarea.form-control.error {
   transform: translate(0, -50%);
   width: auto;
   height: auto;
-  color: #2a9d8f;
-  padding: 1em;
+  color: #212121;
+  padding: 1rem;
   background-color: #ffffff;
   transition: all 0.4s ease-in-out 0s;
 }
@@ -15792,13 +15793,24 @@ textarea.form-control.error {
 }
 
 .carousel .carousel-control-icon:before {
+  opacity: .25;
   transform: rotate(45deg);
   content: '';
-  width: .5em;
-  height: .5em;
+  width: .5rem;
+  height: .5rem;
   display: block;
-  border-top: 1px solid #2a9d8f;
-  border-right: 1px solid #2a9d8f;
+  border-top: 1px solid currentColor;
+  border-right: 1px solid currentColor;
+}
+
+.carousel .carousel-control:focus .carousel-control-icon,
+.carousel .carousel-control:hover .carousel-control-icon {
+  color: #2a9d8f;
+}
+
+.carousel .carousel-control:focus .carousel-control-icon:before,
+.carousel .carousel-control:hover .carousel-control-icon:before {
+  opacity: 1;
 }
 
 .carousel .carousel-control-prev .carousel-control-icon {
@@ -15817,11 +15829,11 @@ textarea.form-control.error {
   transform: rotate(45deg);
 }
 
-.carousel:hover .carousel-control-prev .carousel-control-icon {
+.carousel:focus-within .carousel-control-prev .carousel-control-icon, .carousel:hover .carousel-control-prev .carousel-control-icon {
   left: 0;
 }
 
-.carousel:hover .carousel-control-next .carousel-control-icon {
+.carousel:focus-within .carousel-control-next .carousel-control-icon, .carousel:hover .carousel-control-next .carousel-control-icon {
   right: 0;
 }
 

diff --git a/Resources/Public/Css/bootstrap5-rte.min.css b/Resources/Public/Css/bootstrap5-rte.min.css
diff --git a/Resources/Public/Css/bootstrap5-theme.css b/Resources/Public/Css/bootstrap5-theme.css
@@ -15768,7 +15768,8 @@ textarea.form-control.error {
   }
 }
 
-.carousel:hover .carousel-indicators,
+.carousel:focus-within .carousel-indicators,
+.carousel:focus-within .carousel-control, .carousel:hover .carousel-indicators,
 .carousel:hover .carousel-control {
   opacity: 1;
 }
@@ -15779,8 +15780,8 @@ textarea.form-control.error {
   transform: translate(0, -50%);
   width: auto;
   height: auto;
-  color: #2a9d8f;
-  padding: 1em;
+  color: #212121;
+  padding: 1rem;
   background-color: #ffffff;
   transition: all 0.4s ease-in-out 0s;
 }
@@ -15792,13 +15793,24 @@ textarea.form-control.error {
 }
 
 .carousel .carousel-control-icon:before {
+  opacity: .25;
   transform: rotate(45deg);
   content: '';
-  width: .5em;
-  height: .5em;
+  width: .5rem;
+  height: .5rem;
   display: block;
-  border-top: 1px solid #2a9d8f;
-  border-right: 1px solid #2a9d8f;
+  border-top: 1px solid currentColor;
+  border-right: 1px solid currentColor;
+}
+
+.carousel .carousel-control:focus .carousel-control-icon,
+.carousel .carousel-control:hover .carousel-control-icon {
+  color: #2a9d8f;
+}
+
+.carousel .carousel-control:focus .carousel-control-icon:before,
+.carousel .carousel-control:hover .carousel-control-icon:before {
+  opacity: 1;
 }
 
 .carousel .carousel-control-prev .carousel-control-icon {
@@ -15817,11 +15829,11 @@ textarea.form-control.error {
   transform: rotate(45deg);
 }
 
-.carousel:hover .carousel-control-prev .carousel-control-icon {
+.carousel:focus-within .carousel-control-prev .carousel-control-icon, .carousel:hover .carousel-control-prev .carousel-control-icon {
   left: 0;
 }
 
-.carousel:hover .carousel-control-next .carousel-control-icon {
+.carousel:focus-within .carousel-control-next .carousel-control-icon, .carousel:hover .carousel-control-next .carousel-control-icon {
   right: 0;
 }
 

diff --git a/Resources/Public/Css/bootstrap5-theme.min.css b/Resources/Public/Css/bootstrap5-theme.min.css
diff --git a/Resources/Public/Scss/components/_carousel.scss b/Resources/Public/Scss/components/_carousel.scss
@@ -244,6 +244,7 @@ $carousel-item-layouts: map-merge(
         z-index: 1;
         opacity: 0;
     }
+    &:focus-within,
     &:hover {
         .carousel-indicators,
         .carousel-control {
@@ -256,18 +257,28 @@ $carousel-item-layouts: map-merge(
         transform: translate(0, -50%);
         width: auto;
         height: auto;
-        color: $primary;
-        padding: 1em;
+        color: $body-color;
+        padding: 1rem;
         background-color: $carousel-control-color;
         @include transition(all .4s ease-in-out 0s);
         &:before {
+            opacity: .25;
             transform: rotate(45deg);
             content: '';
-            width: .5em;
-            height: .5em;
+            width: .5rem;
+            height: .5rem;
             display: block;
-            border-top: 1px solid $primary;
-            border-right: 1px solid $primary;
+            border-top: 1px solid currentColor;
+            border-right: 1px solid currentColor;
+        }
+    }
+    .carousel-control:focus,
+    .carousel-control:hover {
+        .carousel-control-icon {
+            color: $primary;
+            &:before {
+                opacity: 1;
+            }
         }
     }
     .carousel-control-prev .carousel-control-icon {
@@ -282,6 +293,7 @@ $carousel-item-layouts: map-merge(
             transform: rotate(45deg);
         }
     }
+    &:focus-within,
     &:hover {
         .carousel-control-prev .carousel-control-icon {
             left: 0;