diff options
| author | Jonathan Barronville | 2014-06-07 19:13:28 -0400 | 
|---|---|---|
| committer | Jonathan Barronville | 2014-06-07 19:13:28 -0400 | 
| commit | b56e5c671ce89f1c8ddc67a4ac8d2f59de04ea85 (patch) | |
| tree | 80ce4d67ff46505dc1ec77b72daf7bed59abf8b4 /bower_components/bootstrap/less/carousel.less | |
| parent | 67ad58c27c4a2704532246d044e1ecbae2a11022 (diff) | |
| download | sellevate-b56e5c671ce89f1c8ddc67a4ac8d2f59de04ea85.tar.bz2 | |
Yo.
Diffstat (limited to 'bower_components/bootstrap/less/carousel.less')
| -rw-r--r-- | bower_components/bootstrap/less/carousel.less | 232 | 
1 files changed, 232 insertions, 0 deletions
| diff --git a/bower_components/bootstrap/less/carousel.less b/bower_components/bootstrap/less/carousel.less new file mode 100644 index 0000000..e3fb8a2 --- /dev/null +++ b/bower_components/bootstrap/less/carousel.less @@ -0,0 +1,232 @@ +// +// Carousel +// -------------------------------------------------- + + +// Wrapper for the slide container and indicators +.carousel { +  position: relative; +} + +.carousel-inner { +  position: relative; +  overflow: hidden; +  width: 100%; + +  > .item { +    display: none; +    position: relative; +    .transition(.6s ease-in-out left); + +    // Account for jankitude on images +    > img, +    > a > img { +      &:extend(.img-responsive); +      line-height: 1; +    } +  } + +  > .active, +  > .next, +  > .prev { display: block; } + +  > .active { +    left: 0; +  } + +  > .next, +  > .prev { +    position: absolute; +    top: 0; +    width: 100%; +  } + +  > .next { +    left: 100%; +  } +  > .prev { +    left: -100%; +  } +  > .next.left, +  > .prev.right { +    left: 0; +  } + +  > .active.left { +    left: -100%; +  } +  > .active.right { +    left: 100%; +  } + +} + +// Left/right controls for nav +// --------------------------- + +.carousel-control { +  position: absolute; +  top: 0; +  left: 0; +  bottom: 0; +  width: @carousel-control-width; +  .opacity(@carousel-control-opacity); +  font-size: @carousel-control-font-size; +  color: @carousel-control-color; +  text-align: center; +  text-shadow: @carousel-text-shadow; +  // We can't have this transition here because WebKit cancels the carousel +  // animation if you trip this while in the middle of another animation. + +  // Set gradients for backgrounds +  &.left { +    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); +  } +  &.right { +    left: auto; +    right: 0; +    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); +  } + +  // Hover/focus state +  &:hover, +  &:focus { +    outline: none; +    color: @carousel-control-color; +    text-decoration: none; +    .opacity(.9); +  } + +  // Toggles +  .icon-prev, +  .icon-next, +  .glyphicon-chevron-left, +  .glyphicon-chevron-right { +    position: absolute; +    top: 50%; +    z-index: 5; +    display: inline-block; +  } +  .icon-prev, +  .glyphicon-chevron-left { +    left: 50%; +  } +  .icon-next, +  .glyphicon-chevron-right { +    right: 50%; +  } +  .icon-prev, +  .icon-next { +    width:  20px; +    height: 20px; +    margin-top: -10px; +    margin-left: -10px; +    font-family: serif; +  } + +  .icon-prev { +    &:before { +      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) +    } +  } +  .icon-next { +    &:before { +      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) +    } +  } +} + +// Optional indicator pips +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + +.carousel-indicators { +  position: absolute; +  bottom: 10px; +  left: 50%; +  z-index: 15; +  width: 60%; +  margin-left: -30%; +  padding-left: 0; +  list-style: none; +  text-align: center; + +  li { +    display: inline-block; +    width:  10px; +    height: 10px; +    margin: 1px; +    text-indent: -999px; +    border: 1px solid @carousel-indicator-border-color; +    border-radius: 10px; +    cursor: pointer; + +    // IE8-9 hack for event handling +    // +    // Internet Explorer 8-9 does not support clicks on elements without a set +    // `background-color`. We cannot use `filter` since that's not viewed as a +    // background color by the browser. Thus, a hack is needed. +    // +    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we +    // set alpha transparency for the best results possible. +    background-color: #000 \9; // IE8 +    background-color: rgba(0,0,0,0); // IE9 +  } +  .active { +    margin: 0; +    width:  12px; +    height: 12px; +    background-color: @carousel-indicator-active-bg; +  } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports +.carousel-caption { +  position: absolute; +  left: 15%; +  right: 15%; +  bottom: 20px; +  z-index: 10; +  padding-top: 20px; +  padding-bottom: 20px; +  color: @carousel-caption-color; +  text-align: center; +  text-shadow: @carousel-text-shadow; +  & .btn { +    text-shadow: none; // No shadow for button elements in carousel-caption +  } +} + + +// Scale up controls for tablets and up +@media screen and (min-width: @screen-sm-min) { + +  // Scale up the controls a smidge +  .carousel-control { +    .glyphicon-chevron-left, +    .glyphicon-chevron-right, +    .icon-prev, +    .icon-next { +      width: 30px; +      height: 30px; +      margin-top: -15px; +      margin-left: -15px; +      font-size: 30px; +    } +  } + +  // Show and left align the captions +  .carousel-caption { +    left: 20%; +    right: 20%; +    padding-bottom: 30px; +  } + +  // Move up the indicators +  .carousel-indicators { +    bottom: 20px; +  } +} | 
