resources/tools/dash/app/pal/static/sass/bootstrap/_carousel.scss

   1 // Notes on the classes:
   2 //
   3 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
   4 //    even when their scroll action started on a carousel, but for compatibility (with Firefox)
   5 //    we're preventing all actions instead
   6 // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
   7 //    the active slide is heading.
   8 // 3. .active.carousel-item is the current slide.
   9 // 4. .active.carousel-item-start and .active.carousel-item-end is the current
  10 //    slide in its in-transition state. Only one of these occurs at a time.
  11 // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
  12 //    is the upcoming slide in transition.
  13
  14 .carousel {
  15   position: relative;
  16 }
  17
  18 .carousel.pointer-event {
  19   touch-action: pan-y;
  20 }
  21
  22 .carousel-inner {
  23   position: relative;
  24   width: 100%;
  25   overflow: hidden;
  26   @include clearfix();
  27 }
  28
  29 .carousel-item {
  30   position: relative;
  31   display: none;
  32   float: left;
  33   width: 100%;
  34   margin-right: -100%;
  35   backface-visibility: hidden;
  36   @include transition($carousel-transition);
  37 }
  38
  39 .carousel-item.active,
  40 .carousel-item-next,
  41 .carousel-item-prev {
  42   display: block;
  43 }
  44
  45 /* rtl:begin:ignore */
  46 .carousel-item-next:not(.carousel-item-start),
  47 .active.carousel-item-end {
  48   transform: translateX(100%);
  49 }
  50
  51 .carousel-item-prev:not(.carousel-item-end),
  52 .active.carousel-item-start {
  53   transform: translateX(-100%);
  54 }
  55
  56 /* rtl:end:ignore */
  57
  58
  59 //
  60 // Alternate transitions
  61 //
  62
  63 .carousel-fade {
  64   .carousel-item {
  65     opacity: 0;
  66     transition-property: opacity;
  67     transform: none;
  68   }
  69
  70   .carousel-item.active,
  71   .carousel-item-next.carousel-item-start,
  72   .carousel-item-prev.carousel-item-end {
  73     z-index: 1;
  74     opacity: 1;
  75   }
  76
  77   .active.carousel-item-start,
  78   .active.carousel-item-end {
  79     z-index: 0;
  80     opacity: 0;
  81     @include transition(opacity 0s $carousel-transition-duration);
  82   }
  83 }
  84
  85
  86 //
  87 // Left/right controls for nav
  88 //
  89
  90 .carousel-control-prev,
  91 .carousel-control-next {
  92   position: absolute;
  93   top: 0;
  94   bottom: 0;
  95   z-index: 1;
  96   // Use flex for alignment (1-3)
  97   display: flex; // 1. allow flex styles
  98   align-items: center; // 2. vertically center contents
  99   justify-content: center; // 3. horizontally center contents
 100   width: $carousel-control-width;
 101   padding: 0;
 102   color: $carousel-control-color;
 103   text-align: center;
 104   background: none;
 105   border: 0;
 106   opacity: $carousel-control-opacity;
 107   @include transition($carousel-control-transition);
 108
 109   // Hover/focus state
 110   &:hover,
 111   &:focus {
 112     color: $carousel-control-color;
 113     text-decoration: none;
 114     outline: 0;
 115     opacity: $carousel-control-hover-opacity;
 116   }
 117 }
 118 .carousel-control-prev {
 119   left: 0;
 120   background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
 121 }
 122 .carousel-control-next {
 123   right: 0;
 124   background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
 125 }
 126
 127 // Icons for within
 128 .carousel-control-prev-icon,
 129 .carousel-control-next-icon {
 130   display: inline-block;
 131   width: $carousel-control-icon-width;
 132   height: $carousel-control-icon-width;
 133   background-repeat: no-repeat;
 134   background-position: 50%;
 135   background-size: 100% 100%;
 136 }
 137
 138 /* rtl:options: {
 139   "autoRename": true,
 140   "stringMap":[ {
 141     "name"    : "prev-next",
 142     "search"  : "prev",
 143     "replace" : "next"
 144   } ]
 145 } */
 146 .carousel-control-prev-icon {
 147   background-image: escape-svg($carousel-control-prev-icon-bg);
 148 }
 149 .carousel-control-next-icon {
 150   background-image: escape-svg($carousel-control-next-icon-bg);
 151 }
 152
 153 // Optional indicator pips/controls
 154 //
 155 // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
 156 // like a button) with data-bs-target for each slide your carousel holds.
 157
 158 .carousel-indicators {
 159   position: absolute;
 160   right: 0;
 161   bottom: 0;
 162   left: 0;
 163   z-index: 2;
 164   display: flex;
 165   justify-content: center;
 166   padding: 0;
 167   // Use the .carousel-control's width as margin so we don't overlay those
 168   margin-right: $carousel-control-width;
 169   margin-bottom: 1rem;
 170   margin-left: $carousel-control-width;
 171   list-style: none;
 172
 173   [data-bs-target] {
 174     box-sizing: content-box;
 175     flex: 0 1 auto;
 176     width: $carousel-indicator-width;
 177     height: $carousel-indicator-height;
 178     padding: 0;
 179     margin-right: $carousel-indicator-spacer;
 180     margin-left: $carousel-indicator-spacer;
 181     text-indent: -999px;
 182     cursor: pointer;
 183     background-color: $carousel-indicator-active-bg;
 184     background-clip: padding-box;
 185     border: 0;
 186     // Use transparent borders to increase the hit area by 10px on top and bottom.
 187     border-top: $carousel-indicator-hit-area-height solid transparent;
 188     border-bottom: $carousel-indicator-hit-area-height solid transparent;
 189     opacity: $carousel-indicator-opacity;
 190     @include transition($carousel-indicator-transition);
 191   }
 192
 193   .active {
 194     opacity: $carousel-indicator-active-opacity;
 195   }
 196 }
 197
 198
 199 // Optional captions
 200 //
 201 //
 202
 203 .carousel-caption {
 204   position: absolute;
 205   right: (100% - $carousel-caption-width) * .5;
 206   bottom: $carousel-caption-spacer;
 207   left: (100% - $carousel-caption-width) * .5;
 208   padding-top: $carousel-caption-padding-y;
 209   padding-bottom: $carousel-caption-padding-y;
 210   color: $carousel-caption-color;
 211   text-align: center;
 212 }
 213
 214 // Dark mode carousel
 215
 216 .carousel-dark {
 217   .carousel-control-prev-icon,
 218   .carousel-control-next-icon {
 219     filter: $carousel-dark-control-icon-filter;
 220   }
 221
 222   .carousel-indicators [data-bs-target] {
 223     background-color: $carousel-dark-indicator-active-bg;
 224   }
 225
 226   .carousel-caption {
 227     color: $carousel-dark-caption-color;
 228   }
 229 }