feat(carousel)[WIP]: fake disabled state

Orange-OpenSource · Dec 17, 2020 · ef91b08 · ef91b08
1 parent 5d4b74d
commit ef91b08
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -127,7 +127,7 @@
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
-  background: rgba($carousel-indicator-active-bg, .5) escape-svg($carousel-control-prev-icon-bg) no-repeat subtract(50%, $spacer / 10) 50% / #{$carousel-control-icon-size $carousel-control-icon-size}; // Boosted mod
+  background: rgba($carousel-indicator-active-bg, .5) escape-svg($carousel-control-icon-bg) no-repeat subtract(50%, $spacer / 10) 50% / #{$carousel-control-icon-size $carousel-control-icon-size}; // Boosted mod
   @include border-radius(50%, 50%);
 }
 
@@ -151,7 +151,7 @@
 .carousel-control-next:hover .carousel-control-next-icon,
 .carousel-control-next:focus .carousel-control-next-icon {
   background-color: $carousel-indicator-active-bg;
-  filter: $carousel-dark-control-icon-filter;
+  filter: $carousel-control-icon-filter;
 }
 
 .carousel-control-prev:active .carousel-control-prev-icon,
@@ -160,6 +160,14 @@
   filter: none;
 }
 
+//// Fake disabled state
+.carousel.done .carousel-control-next {
+  pointer-events: none;
+
+  .carousel-control-next-icon {
+    background-image: escape-svg($carousel-control-icon-disabled-bg);
+  }
+}
 // End mod
 
 // Optional indicator pips

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1385,16 +1385,18 @@ $carousel-caption-padding-x:         $spacer !default; // Boosted mod
 $carousel-caption-spacer:            $spacer * 3 !default;
 
 $carousel-control-icon-width:        2.5rem !default;
-$carousel-control-icon-size:         1.5rem !default; // Boosted mod
-$carousel-control-icon-active-bg:    $component-active-bg !default; // Boosted mod
-
-$carousel-control-prev-icon-bg:      $chevron-icon !default;
+// Boosted mod
+$carousel-control-icon-size:         1.5rem !default;
+$carousel-control-icon-active-bg:    $component-active-bg !default;
+$carousel-control-icon-bg:           $chevron-icon !default;
+$carousel-control-icon-disabled-bg:  $chevron-icon-disabled !default;
+$carousel-control-icon-filter:       $invert-filter !default;
+// End mod
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration $transition-timing !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
 // Boosted mod: no dark carousel
-$carousel-dark-control-icon-filter:  invert(1) !default;
 
 
 // Spinners