aboutsummaryrefslogtreecommitdiff
path: root/assets/css/bootstrap-3.3.2/carousel.less
diff options
context:
space:
mode:
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 {