resources/scss/bootstrap/_carousel.scss

   1 //
   2 // Carousel
   3 // --------------------------------------------------
   4
   5 // Wrapper for the slide container and indicators
   6 .carousel {
   7   position: relative;
   8 }
   9
  10 .carousel-inner {
  11   position: relative;
  12   overflow: hidden;
  13   width: 100%;
  14
  15   > .item {
  16         display: none;
  17         position: relative;
  18         @include transition(.6s ease-in-out left);
  19
  20         // Account for jankitude on images
  21         > img,
  22         > a > img {
  23           @include img-responsive;
  24           line-height: 1;
  25         }
  26
  27         // WebKit CSS3 transforms for supported devices
  28         @media all and (transform-3d), (-webkit-transform-3d) {
  29           @include transition-transform(0.6s ease-in-out);
  30           @include backface-visibility(hidden);
  31           @include perspective(1000px);
  32
  33           &.next,
  34           &.active.right {
  35                 @include translate3d(100%, 0, 0);
  36                 left: 0;
  37           }
  38           &.prev,
  39           &.active.left {
  40                 @include translate3d(-100%, 0, 0);
  41                 left: 0;
  42           }
  43           &.next.left,
  44           &.prev.right,
  45           &.active {
  46                 @include translate3d(0, 0, 0);
  47                 left: 0;
  48           }
  49         }
  50   }
  51
  52   > .active,
  53   > .next,
  54   > .prev {
  55         display: block;
  56   }
  57
  58   > .active {
  59         left: 0;
  60   }
  61
  62   > .next,
  63   > .prev {
  64         position: absolute;
  65         top: 0;
  66         width: 100%;
  67   }
  68
  69   > .next {
  70         left: 100%;
  71   }
  72   > .prev {
  73         left: -100%;
  74   }
  75   > .next.left,
  76   > .prev.right {
  77         left: 0;
  78   }
  79
  80   > .active.left {
  81         left: -100%;
  82   }
  83   > .active.right {
  84         left: 100%;
  85   }
  86
  87 }
  88
  89 // Left/right controls for nav
  90 // ---------------------------
  91
  92 .carousel-control {
  93   position: absolute;
  94   top: 0;
  95   left: 0;
  96   bottom: 0;
  97   width: $carousel-control-width;
  98   @include opacity($carousel-control-opacity);
  99   font-size: $carousel-control-font-size;
 100   color: $carousel-control-color;
 101   text-align: center;
 102   text-shadow: $carousel-text-shadow;
 103   // We can't have this transition here because WebKit cancels the carousel
 104   // animation if you trip this while in the middle of another animation.
 105
 106   // Set gradients for backgrounds
 107   &.left {
 108         @include gradient-horizontal($start-color: rgba(0, 0, 0, .5), $end-color: rgba(0, 0, 0, .0001));
 109   }
 110   &.right {
 111         left: auto;
 112         right: 0;
 113         @include gradient-horizontal($start-color: rgba(0, 0, 0, .0001), $end-color: rgba(0, 0, 0, .5));
 114   }
 115
 116   // Hover/focus state
 117   &:hover,
 118   &:focus {
 119         outline: 0;
 120         color: $carousel-control-color;
 121         text-decoration: none;
 122         @include opacity(.9);
 123   }
 124
 125   // Toggles
 126   .icon-prev,
 127   .icon-next,
 128   .glyphicon-chevron-left,
 129   .glyphicon-chevron-right {
 130         position: absolute;
 131         top: 50%;
 132         margin-top: -10px;
 133         z-index: 5;
 134         display: inline-block;
 135   }
 136   .icon-prev,
 137   .glyphicon-chevron-left {
 138         left: 50%;
 139         margin-left: -10px;
 140   }
 141   .icon-next,
 142   .glyphicon-chevron-right {
 143         right: 50%;
 144         margin-right: -10px;
 145   }
 146   .icon-prev,
 147   .icon-next {
 148         width: 20px;
 149         height: 20px;
 150         line-height: 1;
 151         font-family: serif;
 152   }
 153
 154   .icon-prev {
 155         &:before {
 156           content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
 157         }
 158   }
 159   .icon-next {
 160         &:before {
 161           content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
 162         }
 163   }
 164 }
 165
 166 // Optional indicator pips
 167 //
 168 // Add an unordered list with the following class and add a list item for each
 169 // slide your carousel holds.
 170
 171 .carousel-indicators {
 172   position: absolute;
 173   bottom: 10px;
 174   left: 50%;
 175   z-index: 15;
 176   width: 60%;
 177   margin-left: -30%;
 178   padding-left: 0;
 179   list-style: none;
 180   text-align: center;
 181
 182   li {
 183         display: inline-block;
 184         width: 10px;
 185         height: 10px;
 186         margin: 1px;
 187         text-indent: -999px;
 188         border: 1px solid $carousel-indicator-border-color;
 189         border-radius: 10px;
 190         cursor: pointer;
 191
 192         // IE8-9 hack for event handling
 193         //
 194         // Internet Explorer 8-9 does not support clicks on elements without a set
 195         // `background-color`. We cannot use `filter` since that's not viewed as a
 196         // background color by the browser. Thus, a hack is needed.
 197         // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
 198         //
 199         // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
 200         // set alpha transparency for the best results possible.
 201         background-color: #000 \9; // IE8
 202         background-color: rgba(0, 0, 0, 0); // IE9
 203   }
 204   .active {
 205         margin: 0;
 206         width: 12px;
 207         height: 12px;
 208         background-color: $carousel-indicator-active-bg;
 209   }
 210 }
 211
 212 // Optional captions
 213 // -----------------------------
 214 // Hidden by default for smaller viewports
 215 .carousel-caption {
 216   position: absolute;
 217   left: 15%;
 218   right: 15%;
 219   bottom: 20px;
 220   z-index: 10;
 221   padding-top: 20px;
 222   padding-bottom: 20px;
 223   color: $carousel-caption-color;
 224   text-align: center;
 225   text-shadow: $carousel-text-shadow;
 226   & .btn {
 227         text-shadow: none; // No shadow for button elements in carousel-caption
 228   }
 229 }
 230
 231 // Scale up controls for tablets and up
 232 @media screen and (min-width: $screen-sm-min) {
 233
 234   // Scale up the controls a smidge
 235   .carousel-control {
 236         .glyphicon-chevron-left,
 237         .glyphicon-chevron-right,
 238         .icon-prev,
 239         .icon-next {
 240           width: 30px;
 241           height: 30px;
 242           margin-top: -15px;
 243           font-size: 30px;
 244         }
 245         .glyphicon-chevron-left,
 246         .icon-prev {
 247           margin-left: -15px;
 248         }
 249         .glyphicon-chevron-right,
 250         .icon-next {
 251           margin-right: -15px;
 252         }
 253   }
 254
 255   // Show and left align the captions
 256   .carousel-caption {
 257         left: 20%;
 258         right: 20%;
 259         padding-bottom: 30px;
 260   }
 261
 262   // Move up the indicators
 263   .carousel-indicators {
 264         bottom: 20px;
 265   }
 266 }