From 72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Sat, 8 Mar 2014 22:02:34 -0800 Subject: updated css/js libraries * bootstrap 3.1.1 * jquery 2.1.0 * less 1.7.0 mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc. --- css/bootstrap/carousel.less | 239 +++++++++++++++++++++++++++++++------------- 1 file changed, 170 insertions(+), 69 deletions(-) (limited to 'css/bootstrap/carousel.less') diff --git a/css/bootstrap/carousel.less b/css/bootstrap/carousel.less index 33f98ac..e3fb8a2 100644 --- a/css/bootstrap/carousel.less +++ b/css/bootstrap/carousel.less @@ -3,62 +3,59 @@ // -------------------------------------------------- +// 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; .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 { + &:extend(.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%; } @@ -69,63 +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; + .opacity(@carousel-control-opacity); + font-size: @carousel-control-font-size; + color: @carousel-control-color; text-align: center; - background: @grayDarker; - border: 3px solid @white; - .border-radius(23px); - .opacity(50); - - // we can't have this transition here - // because webkit cancels the carousel - // animation if you trip this while - // in the middle of another animation - // ;_; - // .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 { + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); + } &.right { left: auto; - right: 15px; + right: 0; + #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; - .opacity(90); + .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. -// Caption for text below images -// ----------------------------- +.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: 15px; - background: @grayDark; - background: rgba(0,0,0,.75); -} -.carousel-caption h4, -.carousel-caption p { - color: @white; - line-height: @baseLineHeight; -} -.carousel-caption h4 { - margin: 0 0 5px; + 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 p { - margin-bottom: 0; + + +// 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; + } } -- cgit v1.2.3-18-g5258