kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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:
Mark Otto 2016-11-25 23:34:16 -08:00
parent 990a901e52
commit ef818c0799
1 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
scss/_carousel.scss
View File

@ -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));