aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_carousel.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_carousel.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_carousel.scss236
1 files changed, 236 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/scss/_carousel.scss b/vendor/twbs/bootstrap/scss/_carousel.scss
new file mode 100644
index 000000000..91c23e5fc
--- /dev/null
+++ b/vendor/twbs/bootstrap/scss/_carousel.scss
@@ -0,0 +1,236 @@
+// Notes on the classes:
+//
+// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+// the active slide is heading.
+// 2. .active.carousel-item is the current slide.
+// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+// slide in its in-transition state. Only one of these occurs at a time.
+// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// is the upcoming slide in transition.
+
+.carousel {
+ position: relative;
+}
+
+.carousel-inner {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+}
+
+.carousel-item {
+ position: relative;
+ display: none;
+ align-items: center;
+ width: 100%;
+ backface-visibility: hidden;
+ perspective: 1000px;
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+ display: block;
+ @include transition($carousel-transition);
+}
+
+.carousel-item-next,
+.carousel-item-prev {
+ position: absolute;
+ top: 0;
+}
+
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+ transform: translateX(0);
+
+ @supports (transform-style: preserve-3d) {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.carousel-item-next,
+.active.carousel-item-right {
+ transform: translateX(100%);
+
+ @supports (transform-style: preserve-3d) {
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.carousel-item-prev,
+.active.carousel-item-left {
+ transform: translateX(-100%);
+
+ @supports (transform-style: preserve-3d) {
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+ .carousel-item {
+ opacity: 0;
+ transition-duration: .6s;
+ transition-property: opacity;
+ }
+
+ .carousel-item.active,
+ .carousel-item-next.carousel-item-left,
+ .carousel-item-prev.carousel-item-right {
+ opacity: 1;
+ }
+
+ .active.carousel-item-left,
+ .active.carousel-item-right {
+ opacity: 0;
+ }
+
+ .carousel-item-next,
+ .carousel-item-prev,
+ .carousel-item.active,
+ .active.carousel-item-left,
+ .active.carousel-item-prev {
+ transform: translateX(0);
+
+ @supports (transform-style: preserve-3d) {
+ transform: translate3d(0, 0, 0);
+ }
+ }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ // Use flex for alignment (1-3)
+ display: flex; // 1. allow flex styles
+ align-items: center; // 2. vertically center contents
+ justify-content: center; // 3. horizontally center contents
+ width: $carousel-control-width;
+ color: $carousel-control-color;
+ text-align: center;
+ opacity: $carousel-control-opacity;
+ // We can't have a transition here because WebKit cancels the carousel
+ // animation if you trip this while in the middle of another animation.
+
+ // Hover/focus state
+ @include hover-focus {
+ color: $carousel-control-color;
+ text-decoration: none;
+ outline: 0;
+ opacity: .9;
+ }
+}
+.carousel-control-prev {
+ left: 0;
+ @if $enable-gradients {
+ background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
+ }
+}
+.carousel-control-next {
+ right: 0;
+ @if $enable-gradients {
+ background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
+ }
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+ display: inline-block;
+ width: $carousel-control-icon-width;
+ height: $carousel-control-icon-width;
+ background: transparent no-repeat center center;
+ background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+ background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+ background-image: $carousel-control-next-icon-bg;
+}
+
+
+// Optional indicator pips
+//
+// Add an ordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+ position: absolute;
+ right: 0;
+ bottom: 10px;
+ left: 0;
+ z-index: 15;
+ display: flex;
+ justify-content: center;
+ padding-left: 0; // override <ol> default
+ // Use the .carousel-control's width as margin so we don't overlay those
+ margin-right: $carousel-control-width;
+ margin-left: $carousel-control-width;
+ list-style: none;
+
+ li {
+ position: relative;
+ flex: 0 1 auto;
+ width: $carousel-indicator-width;
+ height: $carousel-indicator-height;
+ margin-right: $carousel-indicator-spacer;
+ margin-left: $carousel-indicator-spacer;
+ text-indent: -999px;
+ cursor: pointer;
+ background-color: rgba($carousel-indicator-active-bg, .5);
+
+ // Use pseudo classes to increase the hit area by 10px on top and bottom.
+ &::before {
+ position: absolute;
+ top: -10px;
+ left: 0;
+ display: inline-block;
+ width: 100%;
+ height: 10px;
+ content: "";
+ }
+ &::after {
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ display: inline-block;
+ width: 100%;
+ height: 10px;
+ content: "";
+ }
+ }
+
+ .active {
+ background-color: $carousel-indicator-active-bg;
+ }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+ position: absolute;
+ right: ((100% - $carousel-caption-width) / 2);
+ bottom: 20px;
+ left: ((100% - $carousel-caption-width) / 2);
+ z-index: 10;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ color: $carousel-caption-color;
+ text-align: center;
+}