mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 15:16:51 +02:00
Code Issues Releases Wiki Activity

Start renaming carousel classes

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

44
scss/_carousel.scss
View File

@@ -7,8 +7,9 @@
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
}
> .carousel-item { .carousel-item {
position: relative; position: relative;
display: none; display: none;
transition: .6s ease-in-out left; transition: .6s ease-in-out left;
@@ -26,18 +27,18 @@
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000px; perspective: 1000px;
&.next, &.carousel-item-next,
&.active.right { &.active.carousel-item-right {
left: 0; left: 0;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
&.prev, &.carousel-item-prev,
&.active.left { &.active.carousel-item-left {
left: 0; left: 0;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
&.next.left, &.carousel-item-next.carousel-item-left,
&.prev.right, &.carousel-item-prev.carousel-item-right,
&.active { &.active {
left: 0; left: 0;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
@@ -45,38 +46,38 @@
} }
} }
> .active, .carousel-item.active,
> .next, .carousel-item-next,
> .prev { .carousel-item-prev {
display: block; display: block;
} }
> .active { .carousel-item.active {
left: 0; left: 0;
} }
> .next, > .carousel-item-next,
> .prev { > .carousel-item-prev {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
} }
> .next { > .carousel-item-next {
left: 100%; left: 100%;
} }
> .prev { > .carousel-item-prev {
left: -100%; left: -100%;
} }
> .next.left, > .carousel-item-next.carousel-item-left,
> .prev.right { > .carousel-item-prev.carousel-item-right {
left: 0; left: 0;
} }
> .active.left { > .active.carousel-item-left {
left: -100%; left: -100%;
} }
> .active.right { > .active.carousel-item-right {
left: 100%; left: 100%;
} }
} }
@@ -101,10 +102,11 @@
// animation if you trip this while in the middle of another animation. // animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds // 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)); @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
} }
&.right {
&.carousel-item-right {
right: 0; right: 0;
left: auto; left: auto;
@include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));