diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_carousel.scss')
| -rw-r--r-- | assets/stylesheets/bootstrap/_carousel.scss | 121 |
1 files changed, 52 insertions, 69 deletions
diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index f700678..c5a7fdf 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -1,8 +1,3 @@ -// -// Carousel -// -------------------------------------------------- - - // Wrapper for the slide container and indicators .carousel { position: relative; @@ -10,42 +5,42 @@ .carousel-inner { position: relative; - overflow: hidden; width: 100%; + overflow: hidden; - > .item { - display: none; + > .carousel-item { position: relative; - @include transition(.6s ease-in-out left); + display: none; + transition: .6s ease-in-out left; // Account for jankitude on images > img, > a > img { - @include img-responsive; + @extend .img-responsive; line-height: 1; } // WebKit CSS3 transforms for supported devices @media all and (transform-3d), (-webkit-transform-3d) { - @include transition-transform(0.6s ease-in-out); - @include backface-visibility(hidden); - @include perspective(1000px); + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; &.next, &.active.right { - @include translate3d(100%, 0, 0); left: 0; + transform: translate3d(100%, 0, 0); } &.prev, &.active.left { - @include translate3d(-100%, 0, 0); left: 0; + transform: translate3d(-100%, 0, 0); } &.next.left, &.prev.right, &.active { - @include translate3d(0, 0, 0); left: 0; + transform: translate3d(0, 0, 0); } } } @@ -84,23 +79,24 @@ > .active.right { left: 100%; } - } + +// // Left/right controls for nav -// --------------------------- +// .carousel-control { position: absolute; top: 0; - left: 0; bottom: 0; + left: 0; width: $carousel-control-width; - @include opacity($carousel-control-opacity); font-size: $carousel-control-font-size; color: $carousel-control-color; text-align: center; text-shadow: $carousel-text-shadow; + opacity: $carousel-control-opacity; // We can't have this transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. @@ -109,62 +105,54 @@ @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); } &.right { - left: auto; right: 0; + left: auto; @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); } // Hover/focus state - &:hover, - &:focus { - outline: 0; + @include hover-focus { color: $carousel-control-color; text-decoration: none; - @include opacity(.9); + outline: 0; + opacity: .9; } // Toggles .icon-prev, - .icon-next, - .glyphicon-chevron-left, - .glyphicon-chevron-right { + .icon-next { position: absolute; top: 50%; - margin-top: -10px; z-index: 5; display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } - .icon-prev, - .glyphicon-chevron-left { + .icon-prev { left: 50%; margin-left: -10px; } - .icon-next, - .glyphicon-chevron-right { + .icon-next { right: 50%; margin-right: -10px; } - .icon-prev, - .icon-next { - width: 20px; - height: 20px; - line-height: 1; - font-family: serif; - } - .icon-prev { &:before { - content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) } } .icon-next { &:before { - content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + 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 @@ -176,68 +164,65 @@ left: 50%; z-index: 15; width: 60%; - margin-left: -30%; padding-left: 0; - list-style: none; + margin-left: -30%; text-align: center; + list-style: none; li { display: inline-block; - width: 10px; + 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 + // IE9 hack for event handling // - // Internet Explorer 8-9 does not support clicks on elements without a set + // 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. - // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer - // - // 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 + border: 1px solid $carousel-indicator-border-color; + border-radius: 10px; } .active { - margin: 0; - width: 12px; + width: 12px; height: 12px; + margin: 0; background-color: $carousel-indicator-active-bg; } } + // Optional captions -// ----------------------------- -// Hidden by default for smaller viewports +// +// Hidden by default for smaller viewports. + .carousel-caption { position: absolute; - left: 15%; right: 15%; bottom: 20px; + left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: $carousel-caption-color; text-align: center; text-shadow: $carousel-text-shadow; - & .btn { + + .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) { +// +// Responsive variations +// +@include media-breakpoint-up(sm) { // Scale up the controls a smidge .carousel-control { - .glyphicon-chevron-left, - .glyphicon-chevron-right, .icon-prev, .icon-next { width: 30px; @@ -245,11 +230,9 @@ margin-top: -15px; font-size: 30px; } - .glyphicon-chevron-left, .icon-prev { margin-left: -15px; } - .glyphicon-chevron-right, .icon-next { margin-right: -15px; } @@ -257,8 +240,8 @@ // Show and left align the captions .carousel-caption { - left: 20%; right: 20%; + left: 20%; padding-bottom: 30px; } |