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