diff options
Diffstat (limited to '')
-rw-r--r-- | assets/css/bootstrap-3.3.2/carousel.less (renamed from assets/css/lib/bootstrap/_carousel.scss) | 58 |
1 files changed, 42 insertions, 16 deletions
diff --git a/assets/css/lib/bootstrap/_carousel.scss b/assets/css/bootstrap-3.3.2/carousel.less index e9e2f7c..4bbe946 100644 --- a/assets/css/lib/bootstrap/_carousel.scss +++ b/assets/css/bootstrap-3.3.2/carousel.less @@ -16,14 +16,38 @@ > .item { display: none; position: relative; - @include transition(.6s ease-in-out left); + .transition(.6s ease-in-out left); // Account for jankitude on images > img, > a > img { - @include img-responsive(); + &:extend(.img-responsive); line-height: 1; } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-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, @@ -71,32 +95,32 @@ top: 0; left: 0; bottom: 0; - width: $carousel-control-width; - @include opacity($carousel-control-opacity); - font-size: $carousel-control-font-size; - color: $carousel-control-color; + width: @carousel-control-width; + .opacity(@carousel-control-opacity); + font-size: @carousel-control-font-size; + color: @carousel-control-color; text-align: center; - text-shadow: $carousel-text-shadow; + text-shadow: @carousel-text-shadow; // We can't have this transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds &.left { - @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); } &.right { left: auto; right: 0; - @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); } // Hover/focus state &:hover, &:focus { outline: 0; - color: $carousel-control-color; + color: @carousel-control-color; text-decoration: none; - @include opacity(.9); + .opacity(.9); } // Toggles @@ -124,6 +148,7 @@ width: 20px; height: 20px; margin-top: -10px; + line-height: 1; font-family: serif; } @@ -162,7 +187,7 @@ height: 10px; margin: 1px; text-indent: -999px; - border: 1px solid $carousel-indicator-border-color; + border: 1px solid @carousel-indicator-border-color; border-radius: 10px; cursor: pointer; @@ -171,6 +196,7 @@ // Internet Explorer 8-9 does not support clicks on elements without a set // `background-color`. We cannot use `filter` since that's not viewed as a // background color by the browser. Thus, a hack is needed. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer // // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we // set alpha transparency for the best results possible. @@ -181,7 +207,7 @@ margin: 0; width: 12px; height: 12px; - background-color: $carousel-indicator-active-bg; + background-color: @carousel-indicator-active-bg; } } @@ -196,9 +222,9 @@ z-index: 10; padding-top: 20px; padding-bottom: 20px; - color: $carousel-caption-color; + color: @carousel-caption-color; text-align: center; - text-shadow: $carousel-text-shadow; + text-shadow: @carousel-text-shadow; & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } @@ -206,7 +232,7 @@ // Scale up controls for tablets and up -@media screen and (min-width: $screen-sm-min) { +@media screen and (min-width: @screen-sm-min) { // Scale up the controls a smidge .carousel-control { |