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

Improved mixin ability with nested media query

This commit is contained in:
Hayden Bleasel 2014-04-23 20:36:49 +10:00
parent bab63abee8
commit 4fa2d9e0ca
2 changed files with 60 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
dist/css/bootstrap.css vendored
View File

@ -5610,6 +5610,47 @@ button.close {
.carousel-inner > .item > a > img {
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 > .next,
.carousel-inner > .prev {
@ -5776,47 +5817,6 @@ button.close {
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:after,
.dl-horizontal dd:before,

42
less/carousel.less
View File

@ -24,6 +24,25 @@
&:extend(.img-responsive);
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,
@ -230,26 +249,3 @@
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;
}
}
}
}