tools/side_chain_tool/web/node_modules/bootstrap/scss/_carousel.scss

   1 // Notes on the classes:
   2 //
   3 // 1. The .carousel-item-left and .carousel-item-right is used to indicate where
   4 //    the active slide is heading.
   5 // 2. .active.carousel-item is the current slide.
   6 // 3. .active.carousel-item-left and .active.carousel-item-right is the current
   7 //    slide in its in-transition state. Only one of these occurs at a time.
   8 // 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
   9 //    is the upcoming slide in transition.
  10
  11 .carousel {
  12   position: relative;
  13 }
  14
  15 .carousel-inner {
  16   position: relative;
  17   width: 100%;
  18   overflow: hidden;
  19 }
  20
  21 .carousel-item {
  22   position: relative;
  23   display: none;
  24   align-items: center;
  25   width: 100%;
  26   backface-visibility: hidden;
  27   perspective: 1000px;
  28 }
  29
  30 .carousel-item.active,
  31 .carousel-item-next,
  32 .carousel-item-prev {
  33   display: block;
  34   @include transition($carousel-transition);
  35 }
  36
  37 .carousel-item-next,
  38 .carousel-item-prev {
  39   position: absolute;
  40   top: 0;
  41 }
  42
  43 .carousel-item-next.carousel-item-left,
  44 .carousel-item-prev.carousel-item-right {
  45   transform: translateX(0);
  46
  47   @supports (transform-style: preserve-3d) {
  48     transform: translate3d(0, 0, 0);
  49   }
  50 }
  51
  52 .carousel-item-next,
  53 .active.carousel-item-right {
  54   transform: translateX(100%);
  55
  56   @supports (transform-style: preserve-3d) {
  57     transform: translate3d(100%, 0, 0);
  58   }
  59 }
  60
  61 .carousel-item-prev,
  62 .active.carousel-item-left {
  63   transform: translateX(-100%);
  64
  65   @supports (transform-style: preserve-3d) {
  66     transform: translate3d(-100%, 0, 0);
  67   }
  68 }
  69
  70
  71 //
  72 // Alternate transitions
  73 //
  74
  75 .carousel-fade {
  76   .carousel-item {
  77     opacity: 0;
  78     transition-duration: .6s;
  79     transition-property: opacity;
  80   }
  81
  82   .carousel-item.active,
  83   .carousel-item-next.carousel-item-left,
  84   .carousel-item-prev.carousel-item-right {
  85     opacity: 1;
  86   }
  87
  88   .active.carousel-item-left,
  89   .active.carousel-item-right {
  90     opacity: 0;
  91   }
  92
  93   .carousel-item-next,
  94   .carousel-item-prev,
  95   .carousel-item.active,
  96   .active.carousel-item-left,
  97   .active.carousel-item-prev {
  98     transform: translateX(0);
  99
 100     @supports (transform-style: preserve-3d) {
 101       transform: translate3d(0, 0, 0);
 102     }
 103   }
 104 }
 105
 106
 107 //
 108 // Left/right controls for nav
 109 //
 110
 111 .carousel-control-prev,
 112 .carousel-control-next {
 113   position: absolute;
 114   top: 0;
 115   bottom: 0;
 116   // Use flex for alignment (1-3)
 117   display: flex; // 1. allow flex styles
 118   align-items: center; // 2. vertically center contents
 119   justify-content: center; // 3. horizontally center contents
 120   width: $carousel-control-width;
 121   color: $carousel-control-color;
 122   text-align: center;
 123   opacity: $carousel-control-opacity;
 124   // We can't have a transition here because WebKit cancels the carousel
 125   // animation if you trip this while in the middle of another animation.
 126
 127   // Hover/focus state
 128   @include hover-focus {
 129     color: $carousel-control-color;
 130     text-decoration: none;
 131     outline: 0;
 132     opacity: .9;
 133   }
 134 }
 135 .carousel-control-prev {
 136   left: 0;
 137   @if $enable-gradients {
 138     background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
 139   }
 140 }
 141 .carousel-control-next {
 142   right: 0;
 143   @if $enable-gradients {
 144     background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
 145   }
 146 }
 147
 148 // Icons for within
 149 .carousel-control-prev-icon,
 150 .carousel-control-next-icon {
 151   display: inline-block;
 152   width: $carousel-control-icon-width;
 153   height: $carousel-control-icon-width;
 154   background: transparent no-repeat center center;
 155   background-size: 100% 100%;
 156 }
 157 .carousel-control-prev-icon {
 158   background-image: $carousel-control-prev-icon-bg;
 159 }
 160 .carousel-control-next-icon {
 161   background-image: $carousel-control-next-icon-bg;
 162 }
 163
 164
 165 // Optional indicator pips
 166 //
 167 // Add an ordered list with the following class and add a list item for each
 168 // slide your carousel holds.
 169
 170 .carousel-indicators {
 171   position: absolute;
 172   right: 0;
 173   bottom: 10px;
 174   left: 0;
 175   z-index: 15;
 176   display: flex;
 177   justify-content: center;
 178   padding-left: 0; // override <ol> default
 179   // Use the .carousel-control's width as margin so we don't overlay those
 180   margin-right: $carousel-control-width;
 181   margin-left: $carousel-control-width;
 182   list-style: none;
 183
 184   li {
 185     position: relative;
 186     flex: 0 1 auto;
 187     width: $carousel-indicator-width;
 188     height: $carousel-indicator-height;
 189     margin-right: $carousel-indicator-spacer;
 190     margin-left: $carousel-indicator-spacer;
 191     text-indent: -999px;
 192     cursor: pointer;
 193     background-color: rgba($carousel-indicator-active-bg, .5);
 194
 195     // Use pseudo classes to increase the hit area by 10px on top and bottom.
 196     &::before {
 197       position: absolute;
 198       top: -10px;
 199       left: 0;
 200       display: inline-block;
 201       width: 100%;
 202       height: 10px;
 203       content: "";
 204     }
 205     &::after {
 206       position: absolute;
 207       bottom: -10px;
 208       left: 0;
 209       display: inline-block;
 210       width: 100%;
 211       height: 10px;
 212       content: "";
 213     }
 214   }
 215
 216   .active {
 217     background-color: $carousel-indicator-active-bg;
 218   }
 219 }
 220
 221
 222 // Optional captions
 223 //
 224 //
 225
 226 .carousel-caption {
 227   position: absolute;
 228   right: ((100% - $carousel-caption-width) / 2);
 229   bottom: 20px;
 230   left: ((100% - $carousel-caption-width) / 2);
 231   z-index: 10;
 232   padding-top: 20px;
 233   padding-bottom: 20px;
 234   color: $carousel-caption-color;
 235   text-align: center;
 236 }