Start renaming carousel classes
- Un-nests .carousel-item - Appends .carousel-item- to .left, .right, .next, and .prev - Chain .carousel-item to .active where approproriate
This commit is contained in:
parent
990a901e52
commit
ef818c0799
|
@ -7,76 +7,77 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
transition: .6s ease-in-out left;
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
transition: .6s ease-in-out left;
|
||||
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
@extend .img-fluid;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// CSS3 transforms when supported by the browser
|
||||
@include if-supports-3d-transforms() {
|
||||
transition: transform .6s ease-in-out;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
|
||||
&.next,
|
||||
&.active.right {
|
||||
left: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
&.prev,
|
||||
&.active.left {
|
||||
left: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
&.next.left,
|
||||
&.prev.right,
|
||||
&.active {
|
||||
left: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
@extend .img-fluid;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
> .active,
|
||||
> .next,
|
||||
> .prev {
|
||||
// CSS3 transforms when supported by the browser
|
||||
@include if-supports-3d-transforms() {
|
||||
transition: transform .6s ease-in-out;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
|
||||
&.carousel-item-next,
|
||||
&.active.carousel-item-right {
|
||||
left: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
&.carousel-item-prev,
|
||||
&.active.carousel-item-left {
|
||||
left: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
&.carousel-item-next.carousel-item-left,
|
||||
&.carousel-item-prev.carousel-item-right,
|
||||
&.active {
|
||||
left: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .active {
|
||||
.carousel-item.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .next,
|
||||
> .prev {
|
||||
> .carousel-item-next,
|
||||
> .carousel-item-prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .next {
|
||||
> .carousel-item-next {
|
||||
left: 100%;
|
||||
}
|
||||
> .prev {
|
||||
> .carousel-item-prev {
|
||||
left: -100%;
|
||||
}
|
||||
> .next.left,
|
||||
> .prev.right {
|
||||
> .carousel-item-next.carousel-item-left,
|
||||
> .carousel-item-prev.carousel-item-right {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .active.left {
|
||||
> .active.carousel-item-left {
|
||||
left: -100%;
|
||||
}
|
||||
> .active.right {
|
||||
> .active.carousel-item-right {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
@ -101,10 +102,11 @@
|
|||
// animation if you trip this while in the middle of another animation.
|
||||
|
||||
// Set gradients for backgrounds
|
||||
&.left {
|
||||
&.carousel-item-left {
|
||||
@include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
|
||||
}
|
||||
&.right {
|
||||
|
||||
&.carousel-item-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
|
||||
|
|
Loading…
Reference in New Issue