diff options
Diffstat (limited to 'assets/scss/bootstrap/_carousel.scss')
| -rwxr-xr-x | assets/scss/bootstrap/_carousel.scss | 126 |
1 files changed, 66 insertions, 60 deletions
diff --git a/assets/scss/bootstrap/_carousel.scss b/assets/scss/bootstrap/_carousel.scss index 72a5034..20ea04b 100755 --- a/assets/scss/bootstrap/_carousel.scss +++ b/assets/scss/bootstrap/_carousel.scss @@ -1,22 +1,39 @@ -// Wrapper for the slide container and indicators +// Notes on the classes: +// +// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) +// even when their scroll action started on a carousel, but for compatibility (with Firefox) +// we're preventing all actions instead +// 2. The .carousel-item-left and .carousel-item-right is used to indicate where +// the active slide is heading. +// 3. .active.carousel-item is the current slide. +// 4. .active.carousel-item-left and .active.carousel-item-right is the current +// slide in its in-transition state. Only one of these occurs at a time. +// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right +// is the upcoming slide in transition. + .carousel { position: relative; } +.carousel.pointer-event { + touch-action: pan-y; +} + .carousel-inner { position: relative; width: 100%; overflow: hidden; + @include clearfix(); } .carousel-item { position: relative; display: none; - align-items: center; + float: left; width: 100%; - @include transition($carousel-transition); + margin-right: -100%; backface-visibility: hidden; - perspective: 1000px; + @include transition($carousel-transition); } .carousel-item.active, @@ -25,37 +42,40 @@ display: block; } -.carousel-item-next, -.carousel-item-prev { - position: absolute; - top: 0; +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); } -// CSS3 transforms when supported by the browser -.carousel-item-next.carousel-item-left, -.carousel-item-prev.carousel-item-right { - transform: translateX(0); - - @supports (transform-style: preserve-3d) { - transform: translate3d(0, 0, 0); - } +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); } -.carousel-item-next, -.active.carousel-item-right { - transform: translateX(100%); - @supports (transform-style: preserve-3d) { - transform: translate3d(100%, 0, 0); +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; } -} -.carousel-item-prev, -.active.carousel-item-left { - transform: translateX(-100%); + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } - @supports (transform-style: preserve-3d) { - transform: translate3d(-100%, 0, 0); + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + @include transition(0s $carousel-transition-duration opacity); } } @@ -69,6 +89,7 @@ position: absolute; top: 0; bottom: 0; + z-index: 1; // Use flex for alignment (1-3) display: flex; // 1. allow flex styles align-items: center; // 2. vertically center contents @@ -77,27 +98,26 @@ color: $carousel-control-color; text-align: center; opacity: $carousel-control-opacity; - // We can't have a transition here because WebKit cancels the carousel - // animation if you trip this while in the middle of another animation. + @include transition($carousel-control-transition); // Hover/focus state @include hover-focus { color: $carousel-control-color; text-decoration: none; outline: 0; - opacity: .9; + opacity: $carousel-control-hover-opacity; } } .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } @@ -107,8 +127,7 @@ display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; - background: transparent no-repeat center center; - background-size: 100% 100%; + background: no-repeat 50% / 100% 100%; } .carousel-control-prev-icon { background-image: $carousel-control-prev-icon-bg; @@ -126,7 +145,7 @@ .carousel-indicators { position: absolute; right: 0; - bottom: 10px; + bottom: 0; left: 0; z-index: 15; display: flex; @@ -138,38 +157,25 @@ list-style: none; li { - position: relative; + box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; - background-color: rgba($carousel-indicator-active-bg, .5); - - // Use pseudo classes to increase the hit area by 10px on top and bottom. - &::before { - position: absolute; - top: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } - &::after { - position: absolute; - bottom: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } + cursor: pointer; + background-color: $carousel-indicator-active-bg; + background-clip: padding-box; + // Use transparent borders to increase the hit area by 10px on top and bottom. + border-top: $carousel-indicator-hit-area-height solid transparent; + border-bottom: $carousel-indicator-hit-area-height solid transparent; + opacity: .5; + @include transition($carousel-indicator-transition); } .active { - background-color: $carousel-indicator-active-bg; + opacity: 1; } } @@ -180,9 +186,9 @@ .carousel-caption { position: absolute; - right: ((100% - $carousel-caption-width) / 2); + right: (100% - $carousel-caption-width) / 2; bottom: 20px; - left: ((100% - $carousel-caption-width) / 2); + left: (100% - $carousel-caption-width) / 2; z-index: 10; padding-top: 20px; padding-bottom: 20px; |