rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-09 01:53:53 +02:00
Code Issues Actions 10 Packages Releases Activity

redo css more

Browse Source 
- fix naming of left/right controls
- drop the absolute positioning of things and rely on only 3d transforms
- remove img styles and require classes to avoid inline-block line-height stuff
This commit is contained in:
Mark Otto 2016-12-04 19:52:49 -08:00
parent 23664d3a90
commit ba329cfd6a
1 changed files with 20 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
scss/_carousel.scss
View File

@ -12,37 +12,13 @@
.carousel-item { .carousel-item {
position: relative; position: relative;
display: none; display: none;
transition: .6s ease-in-out left; width: 100%;
// Account for jankitude on images
> img,
> a > img {
@extend .img-fluid;
line-height: 1;
}
// CSS3 transforms when supported by the browser // CSS3 transforms when supported by the browser
@include if-supports-3d-transforms() { @include if-supports-3d-transforms() {
transition: transform .6s ease-in-out; transition: transform .6s ease-in-out;
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000px; 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);
}
} }
} }
@ -52,33 +28,28 @@
display: block; display: block;
} }
.carousel-item.active { .carousel-item-next,
left: 0; .carousel-item-prev {
}
> .carousel-item-next,
> .carousel-item-prev {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%;
} }
> .carousel-item-next { // CSS3 transforms when supported by the browser
left: 100%; @include if-supports-3d-transforms() {
} .carousel-item-next.carousel-item-left,
> .carousel-item-prev { .carousel-item-prev.carousel-item-right {
left: -100%; transform: translate3d(0, 0, 0);
} }
> .carousel-item-next.carousel-item-left,
> .carousel-item-prev.carousel-item-right {
left: 0;
}
> .active.carousel-item-left { .carousel-item-next,
left: -100%; .active.carousel-item-right {
} transform: translate3d(100%, 0, 0);
> .active.carousel-item-right { }
left: 100%;
.carousel-item-prev,
.active.carousel-item-left {
transform: translate3d(-100%, 0, 0);
}
} }
@ -101,11 +72,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
&.carousel-item-left { &.carousel-control-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));
} }
&.carousel-item-right { &.carousel-control-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));