git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/carousel.less

   1 //
   2 // Carousel
   3 // --------------------------------------------------
   4
   5
   6 // Wrapper for the slide container and indicators
   7 .carousel {
   8   position: relative;
   9 }
  10
  11 .carousel-inner {
  12   position: relative;
  13   overflow: hidden;
  14   width: 100%;
  15
  16   > .item {
  17     display: none;
  18     position: relative;
  19     .transition(.6s ease-in-out left);
  20
  21     // Account for jankitude on images
  22     > img,
  23     > a > img {
  24       .img-responsive();
  25       line-height: 1;
  26     }
  27   }
  28
  29   > .active,
  30   > .next,
  31   > .prev { display: block; }
  32
  33   > .active {
  34     left: 0;
  35   }
  36
  37   > .next,
  38   > .prev {
  39     position: absolute;
  40     top: 0;
  41     width: 100%;
  42   }
  43
  44   > .next {
  45     left: 100%;
  46   }
  47   > .prev {
  48     left: -100%;
  49   }
  50   > .next.left,
  51   > .prev.right {
  52     left: 0;
  53   }
  54
  55   > .active.left {
  56     left: -100%;
  57   }
  58   > .active.right {
  59     left: 100%;
  60   }
  61
  62 }
  63
  64 // Left/right controls for nav
  65 // ---------------------------
  66
  67 .carousel-control {
  68   position: absolute;
  69   top: 0;
  70   left: 0;
  71   bottom: 0;
  72   width: 15%;
  73   .opacity(.5);
  74   font-size: 20px;
  75   color: @carousel-control-color;
  76   text-align: center;
  77   text-shadow: @carousel-text-shadow;
  78   // We can't have this transition here because webkit cancels the carousel
  79   // animation if you trip this while in the middle of another animation.
  80
  81   // Set gradients for backgrounds
  82   &.left {
  83     #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
  84     background-color: transparent;
  85   }
  86   &.right {
  87     left: auto;
  88     right: 0;
  89     #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
  90     background-color: transparent;
  91   }
  92
  93   // Hover/focus state
  94   &:hover,
  95   &:focus {
  96     color: @carousel-control-color;
  97     text-decoration: none;
  98     .opacity(.9);
  99   }
 100
 101   // Toggles
 102   .glyphicon,
 103   .icon-prev,
 104   .icon-next {
 105     position: absolute;
 106     top: 50%;
 107     left: 50%;
 108     z-index: 5;
 109     display: inline-block;
 110     width:  20px;
 111     height: 20px;
 112     margin-top: -10px;
 113     margin-left: -10px;
 114     font-family: serif;
 115   }
 116   // Non-glyphicon toggles
 117   .icon-prev {
 118     &:before {
 119       content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
 120     }
 121   }
 122   .icon-next {
 123     &:before {
 124       content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
 125     }
 126   }
 127 }
 128
 129 // Optional indicator pips
 130 // -----------------------------
 131 .carousel-indicators {
 132   position: absolute;
 133   bottom: 10px;
 134   left: 50%;
 135   z-index: 15;
 136   width: 120px;
 137   margin-left: -60px;
 138   padding-left: 0;
 139   list-style: none;
 140   text-align: center;
 141
 142   li {
 143     display: inline-block;
 144     width:  10px;
 145     height: 10px;
 146     margin: 1px;
 147     text-indent: -999px;
 148     border: 1px solid @carousel-indicator-border-color;
 149     border-radius: 10px;
 150     cursor: pointer;
 151   }
 152   .active {
 153     margin: 0;
 154     width:  12px;
 155     height: 12px;
 156     background-color: @carousel-indicator-active-bg;
 157   }
 158 }
 159
 160 // Optional captions
 161 // -----------------------------
 162 // Hidden by default for smaller viewports
 163 .carousel-caption {
 164   position: absolute;
 165   left: 15%;
 166   right: 15%;
 167   bottom: 20px;
 168   z-index: 10;
 169   padding-top: 20px;
 170   padding-bottom: 20px;
 171   color: @carousel-caption-color;
 172   text-align: center;
 173   text-shadow: @carousel-text-shadow;
 174   & .btn {
 175     text-shadow: none; // No shadow for button elements in carousel-caption
 176   }
 177 }
 178
 179
 180 // Scale up controls for tablets and up
 181 @media screen and (min-width: @screen-tablet) {
 182
 183   // Scale up the controls a smidge
 184   .carousel-control .glyphicon,
 185   .carousel-control .icon-prev,
 186   .carousel-control .icon-next {
 187     width: 30px;
 188     height: 30px;
 189     margin-top: -15px;
 190     margin-left: -15px;
 191     font-size: 30px;
 192   }
 193
 194   // Show and left align the captions
 195   .carousel-caption {
 196     left: 20%;
 197     right: 20%;
 198     padding-bottom: 30px;
 199   }
 200
 201   // Move up the indicators
 202   .carousel-indicators {
 203     bottom: 20px;
 204   }
 205 }