diff options
| author | Mark Otto <[email protected]> | 2014-12-03 18:15:37 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-12-03 18:15:37 -0800 |
| commit | bad40d5c4ac47efdadcf524455cf3e12f5bec82b (patch) | |
| tree | e60fdd0bf19b98380619d4e3c6029a760d64697c /less/_carousel.less | |
| parent | 6bd84210ffe766b18fd3cd11a5da4f5ee0d43ecc (diff) | |
| parent | bafd0b057eceae261da82e52ad78c65f08ddd166 (diff) | |
| download | bootstrap-bad40d5c4ac47efdadcf524455cf3e12f5bec82b.tar.xz bootstrap-bad40d5c4ac47efdadcf524455cf3e12f5bec82b.zip | |
Merge pull request #1 from twbs/scss
Move to Sass
Diffstat (limited to 'less/_carousel.less')
| -rw-r--r-- | less/_carousel.less | 250 |
1 files changed, 0 insertions, 250 deletions
diff --git a/less/_carousel.less b/less/_carousel.less deleted file mode 100644 index b190c0050..000000000 --- a/less/_carousel.less +++ /dev/null @@ -1,250 +0,0 @@ -// -// 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; - } - - // WebKit CSS3 transforms for supported devices - @media all and (transform-3d), (-webkit-transform-3d) { - transition: transform .6s ease-in-out; - backface-visibility: hidden; - perspective: 1000; - - &.next, - &.active.right { - transform: translate3d(100%, 0, 0); - left: 0; - } - &.prev, - &.active.left { - transform: translate3d(-100%, 0, 0); - left: 0; - } - &.next.left, - &.prev.right, - &.active { - transform: translate3d(0, 0, 0); - left: 0; - } - } - } - - > .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: 0; - color: @carousel-control-color; - text-decoration: none; - opacity: .9; - } - - // Toggles - .icon-prev, - .icon-next { - position: absolute; - top: 50%; - z-index: 5; - display: inline-block; - width: 20px; - height: 20px; - margin-top: -10px; - font-family: serif; - line-height: 1; - } - .icon-prev { - left: 50%; - margin-left: -10px; - } - .icon-next { - right: 50%; - margin-right: -10px; - } - .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; - - // IE9 hack for event handling - // - // Internet Explorer 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. - 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-sm({ - // Scale up the controls a smidge - .carousel-control { - .icon-prev, - .icon-next { - width: 30px; - height: 30px; - margin-top: -15px; - font-size: 30px; - } - .icon-prev { - margin-left: -15px; - } - .icon-next { - margin-right: -15px; - } - } - - // Show and left align the captions - .carousel-caption { - left: 20%; - right: 20%; - padding-bottom: 30px; - } - - // Move up the indicators - .carousel-indicators { - bottom: 20px; - } -}); |
