git.roojs.org Git - roojs1/blob - scss/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-left and .carousel-item-right 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-left and .active.carousel-item-right 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-left and .carousel-item-prev.carousel-item-right
  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 .carousel-item-next:not(.carousel-item-left),
  46 .active.carousel-item-right {
  47   transform: translateX(100%);
  48 }
  49
  50 .carousel-item-prev:not(.carousel-item-right),
  51 .active.carousel-item-left {
  52   transform: translateX(-100%);
  53 }
  54
  55
  56 //
  57 // Alternate transitions
  58 //
  59
  60 .carousel-fade {
  61   .carousel-item {
  62     opacity: 0;
  63     transition-property: opacity;
  64     transform: none;
  65   }
  66
  67   .carousel-item.active,
  68   .carousel-item-next.carousel-item-left,
  69   .carousel-item-prev.carousel-item-right {
  70     z-index: 1;
  71     opacity: 1;
  72   }
  73
  74   .active.carousel-item-left,
  75   .active.carousel-item-right {
  76     z-index: 0;
  77     opacity: 0;
  78     @include transition(0s $carousel-transition-duration opacity);
  79   }
  80 }
  81
  82
  83 //
  84 // Left/right controls for nav
  85 //
  86
  87 .carousel-control-prev,
  88 .carousel-control-next {
  89   position: absolute;
  90   top: 0;
  91   bottom: 0;
  92   z-index: 1;
  93   // Use flex for alignment (1-3)
  94   display: flex; // 1. allow flex styles
  95   align-items: center; // 2. vertically center contents
  96   justify-content: center; // 3. horizontally center contents
  97   width: $carousel-control-width;
  98   color: $carousel-control-color;
  99   text-align: center;
 100   opacity: $carousel-control-opacity;
 101   @include transition($carousel-control-transition);
 102
 103   // Hover/focus state
 104   @include hover-focus {
 105     color: $carousel-control-color;
 106     text-decoration: none;
 107     outline: 0;
 108     opacity: $carousel-control-hover-opacity;
 109   }
 110 }
 111 .carousel-control-prev {
 112   left: 0;
 113   @if $enable-gradients {
 114     background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
 115   }
 116 }
 117 .carousel-control-next {
 118   right: 0;
 119   @if $enable-gradients {
 120     background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
 121   }
 122 }
 123
 124 // Icons for within
 125 .carousel-control-prev-icon,
 126 .carousel-control-next-icon {
 127   display: inline-block;
 128   width: $carousel-control-icon-width;
 129   height: $carousel-control-icon-width;
 130   background: transparent no-repeat center center;
 131   background-size: 100% 100%;
 132 }
 133 .carousel-control-prev-icon {
 134   background-image: $carousel-control-prev-icon-bg;
 135 }
 136 .carousel-control-next-icon {
 137   background-image: $carousel-control-next-icon-bg;
 138 }
 139
 140
 141 // Optional indicator pips
 142 //
 143 // Add an ordered list with the following class and add a list item for each
 144 // slide your carousel holds.
 145
 146 .carousel-indicators {
 147   position: absolute;
 148   right: 0;
 149   bottom: 0;
 150   left: 0;
 151   z-index: 15;
 152   display: flex;
 153   justify-content: center;
 154   padding-left: 0; // override <ol> default
 155   // Use the .carousel-control's width as margin so we don't overlay those
 156   margin-right: $carousel-control-width;
 157   margin-left: $carousel-control-width;
 158   list-style: none;
 159
 160   li {
 161     box-sizing: content-box;
 162     flex: 0 1 auto;
 163     width: $carousel-indicator-width;
 164     height: $carousel-indicator-height;
 165     margin-right: $carousel-indicator-spacer;
 166     margin-left: $carousel-indicator-spacer;
 167     text-indent: -999px;
 168     cursor: pointer;
 169     background-color: $carousel-indicator-active-bg;
 170     background-clip: padding-box;
 171     // Use transparent borders to increase the hit area by 10px on top and bottom.
 172     border-top: $carousel-indicator-hit-area-height solid transparent;
 173     border-bottom: $carousel-indicator-hit-area-height solid transparent;
 174     opacity: .5;
 175     @include transition($carousel-indicator-transition);
 176   }
 177
 178   .active {
 179     opacity: 1;
 180   }
 181 }
 182
 183
 184 // Optional captions
 185 //
 186 //
 187
 188 .carousel-caption {
 189   position: absolute;
 190   right: ((100% - $carousel-caption-width) / 2);
 191   bottom: 20px;
 192   left: ((100% - $carousel-caption-width) / 2);
 193   z-index: 10;
 194   padding-top: 20px;
 195   padding-bottom: 20px;
 196   color: $carousel-caption-color;
 197   text-align: center;
 198 }