mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Improved mixin ability with nested media query
This commit is contained in:
Hayden Bleasel
parent
bab63abee8
commit
4fa2d9e0ca
2 changed files with 60 additions and 64 deletions
82
dist/css/bootstrap.css
vendored
82
dist/css/bootstrap.css
vendored
|
|
@ -5610,6 +5610,47 @@ button.close {
|
||||||
.carousel-inner > .item > a > img {
|
.carousel-inner > .item > a > img {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
@media all and (-webkit-transform-3d) {
|
||||||
|
.carousel-inner > .item {
|
||||||
|
-webkit-transition: -webkit-transform .6s ease-in-out;
|
||||||
|
-o-transition: -o-transform .6s ease-in-out;
|
||||||
|
transition: transform .6s ease-in-out;
|
||||||
|
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
-ms-backface-visibility: hidden;
|
||||||
|
-o-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-perspective: 1000;
|
||||||
|
-ms-perspective: 1000;
|
||||||
|
-o-perspective: 1000;
|
||||||
|
perspective: 1000;
|
||||||
|
}
|
||||||
|
.carousel-inner > .item.next,
|
||||||
|
.carousel-inner > .item.active.right {
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translate3d(100%, 0, 0);
|
||||||
|
-ms-transform: translate3d(100%, 0, 0);
|
||||||
|
-o-transform: translate3d(100%, 0, 0);
|
||||||
|
transform: translate3d(100%, 0, 0);
|
||||||
|
}
|
||||||
|
.carousel-inner > .item.prev,
|
||||||
|
.carousel-inner > .item.active.left {
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||||||
|
-ms-transform: translate3d(-100%, 0, 0);
|
||||||
|
-o-transform: translate3d(-100%, 0, 0);
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
.carousel-inner > .item.next.left,
|
||||||
|
.carousel-inner > .item.prev.right,
|
||||||
|
.carousel-inner > .item.active {
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
.carousel-inner > .active,
|
.carousel-inner > .active,
|
||||||
.carousel-inner > .next,
|
.carousel-inner > .next,
|
||||||
.carousel-inner > .prev {
|
.carousel-inner > .prev {
|
||||||
|
|
@ -5776,47 +5817,6 @@ button.close {
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media all and (-webkit-transform-3d) {
|
|
||||||
.carousel .item {
|
|
||||||
-webkit-transition: -webkit-transform .6s ease-in-out;
|
|
||||||
-o-transition: -o-transform .6s ease-in-out;
|
|
||||||
transition: transform .6s ease-in-out;
|
|
||||||
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
-ms-backface-visibility: hidden;
|
|
||||||
-o-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
-webkit-perspective: 1000;
|
|
||||||
-ms-perspective: 1000;
|
|
||||||
-o-perspective: 1000;
|
|
||||||
perspective: 1000;
|
|
||||||
}
|
|
||||||
.carousel .item.next,
|
|
||||||
.carousel .item.active.right {
|
|
||||||
left: 0;
|
|
||||||
-webkit-transform: translate3d(100%, 0, 0);
|
|
||||||
-ms-transform: translate3d(100%, 0, 0);
|
|
||||||
-o-transform: translate3d(100%, 0, 0);
|
|
||||||
transform: translate3d(100%, 0, 0);
|
|
||||||
}
|
|
||||||
.carousel .item.prev,
|
|
||||||
.carousel .item.active.left {
|
|
||||||
left: 0;
|
|
||||||
-webkit-transform: translate3d(-100%, 0, 0);
|
|
||||||
-ms-transform: translate3d(-100%, 0, 0);
|
|
||||||
-o-transform: translate3d(-100%, 0, 0);
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
.carousel .item.next.left,
|
|
||||||
.carousel .item.prev.right,
|
|
||||||
.carousel .item.active {
|
|
||||||
left: 0;
|
|
||||||
-webkit-transform: translate3d(0, 0, 0);
|
|
||||||
-ms-transform: translate3d(0, 0, 0);
|
|
||||||
-o-transform: translate3d(0, 0, 0);
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.clearfix:before,
|
.clearfix:before,
|
||||||
.clearfix:after,
|
.clearfix:after,
|
||||||
.dl-horizontal dd:before,
|
.dl-horizontal dd:before,
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,25 @@
|
||||||
&:extend(.img-responsive);
|
&:extend(.img-responsive);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// WebKit CSS3 transforms for supported devices
|
||||||
|
@media all and (-webkit-transform-3d) {
|
||||||
|
.transition-transform(~'0.6s ease-in-out');
|
||||||
|
.backface-visibility(~'hidden');
|
||||||
|
.perspective(1000);
|
||||||
|
&.next, &.active.right {
|
||||||
|
.translate3d(100%, 0, 0);
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&.prev, &.active.left {
|
||||||
|
.translate3d(-100%, 0, 0);
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&.next.left, &.prev.right, &.active {
|
||||||
|
.translate3d(0, 0, 0);
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .active,
|
> .active,
|
||||||
|
|
@ -230,26 +249,3 @@
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// WebKit CSS3 transforms for supported devices
|
|
||||||
@media all and (-webkit-transform-3d) {
|
|
||||||
.carousel {
|
|
||||||
.item {
|
|
||||||
.transition-transform(~'0.6s ease-in-out');
|
|
||||||
.backface-visibility(~'hidden');
|
|
||||||
.perspective(1000);
|
|
||||||
&.next, &.active.right {
|
|
||||||
.translate3d(100%, 0, 0);
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
&.prev, &.active.left {
|
|
||||||
.translate3d(-100%, 0, 0);
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
&.next.left, &.prev.right, &.active {
|
|
||||||
.translate3d(0, 0, 0);
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue