diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss')
| -rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss | 234 |
1 files changed, 175 insertions, 59 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss index 4c2d53c..d8f2364 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss @@ -1,58 +1,61 @@ -// CAROUSEL -// -------- +// +// Carousel +// -------------------------------------------------- + +// Wrapper for the slide container and indicators .carousel { position: relative; - margin-bottom: $baseLineHeight; - line-height: 1; } .carousel-inner { + position: relative; overflow: hidden; width: 100%; - position: relative; -} - -.carousel { - .item { + > .item { display: none; position: relative; @include transition(.6s ease-in-out left); - } - // Account for jankitude on images - .item > img { - display: block; - line-height: 1; + // Account for jankitude on images + > img, + > a > img { + @include img-responsive(); + line-height: 1; + } } - .active, .next, .prev { display: block; } + > .active, + > .next, + > .prev { display: block; } - .active { + > .active { left: 0; } - .next, .prev { + > .next, + > .prev { position: absolute; top: 0; width: 100%; } - .next { + > .next { left: 100%; } - .prev { + > .prev { left: -100%; } - .next.left, .prev.right { + > .next.left, + > .prev.right { left: 0; } - .active.left { + > .active.left { left: -100%; } - .active.right { + > .active.right { left: 100%; } @@ -63,54 +66,167 @@ .carousel-control { position: absolute; - top: 40%; - left: 15px; - width: 40px; - height: 40px; - margin-top: -20px; - font-size: 60px; - font-weight: 100; - line-height: 30px; - color: $white; + top: 0; + left: 0; + bottom: 0; + width: $carousel-control-width; + @include opacity($carousel-control-opacity); + font-size: $carousel-control-font-size; + color: $carousel-control-color; text-align: center; - background: $grayDarker; - border: 3px solid $white; - @include border-radius(23px); - @include opacity(0.5); - - // we can't have this transition here - // because webkit cancels the carousel - // animation if you trip this while - // in the middle of another animation - // ;_; - // @include transition(opacity .2s linear); - - // Reposition the right one + 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 { + @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); + } &.right { left: auto; - right: 15px; + right: 0; + @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); } - // Hover state - &:hover { - color: $white; + // Hover/focus state + &:hover, + &:focus { + outline: none; + color: $carousel-control-color; text-decoration: none; - @include opacity(0.9); + @include 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) + } } } -// Caption for text below images -// ----------------------------- +// 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: 0; - right: 0; - bottom: 0; - padding: 10px 15px 5px; - background: $grayDark; - background: rgba(0,0,0,.75); + 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 + } } -.carousel-caption h4, .carousel-caption p { - color: $white; + + +// 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; + } } |