aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_carousel.scss
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2019-05-10 14:21:36 +0200
committerMario Vavti <mario@mariovavti.com>2019-05-10 14:21:36 +0200
commit9866053f0ce44721c11990c9f9407e7428757c99 (patch)
tree6e414efa36c3bda00205918cecb9122f951427e3 /vendor/twbs/bootstrap/scss/_carousel.scss
parent89a2c1a09c896ac3a23df26a1783f5c682188a56 (diff)
downloadvolse-hubzilla-9866053f0ce44721c11990c9f9407e7428757c99.tar.gz
volse-hubzilla-9866053f0ce44721c11990c9f9407e7428757c99.tar.bz2
volse-hubzilla-9866053f0ce44721c11990c9f9407e7428757c99.zip
update bootstrap to version 4.3.1
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_carousel.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_carousel.scss113
1 files changed, 37 insertions, 76 deletions
diff --git a/vendor/twbs/bootstrap/scss/_carousel.scss b/vendor/twbs/bootstrap/scss/_carousel.scss
index 91c23e5fc..20ea04baf 100644
--- a/vendor/twbs/bootstrap/scss/_carousel.scss
+++ b/vendor/twbs/bootstrap/scss/_carousel.scss
@@ -1,70 +1,55 @@
// Notes on the classes:
//
-// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+// even when their scroll action started on a carousel, but for compatibility (with Firefox)
+// we're preventing all actions instead
+// 2. 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
+// 3. .active.carousel-item is the current slide.
+// 4. .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
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// is the upcoming slide in transition.
.carousel {
position: relative;
}
+.carousel.pointer-event {
+ touch-action: pan-y;
+}
+
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
+ @include clearfix();
}
.carousel-item {
position: relative;
display: none;
- align-items: center;
+ float: left;
width: 100%;
+ margin-right: -100%;
backface-visibility: hidden;
- perspective: 1000px;
+ @include transition($carousel-transition);
}
.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,
+.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
transform: translateX(100%);
-
- @supports (transform-style: preserve-3d) {
- transform: translate3d(100%, 0, 0);
- }
}
-.carousel-item-prev,
+.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
transform: translateX(-100%);
-
- @supports (transform-style: preserve-3d) {
- transform: translate3d(-100%, 0, 0);
- }
}
@@ -75,31 +60,22 @@
.carousel-fade {
.carousel-item {
opacity: 0;
- transition-duration: .6s;
transition-property: opacity;
+ transform: none;
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
+ z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
+ z-index: 0;
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);
- }
+ @include transition(0s $carousel-transition-duration opacity);
}
}
@@ -113,6 +89,7 @@
position: absolute;
top: 0;
bottom: 0;
+ z-index: 1;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
@@ -121,15 +98,14 @@
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.
+ @include transition($carousel-control-transition);
// Hover/focus state
@include hover-focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
- opacity: .9;
+ opacity: $carousel-control-hover-opacity;
}
}
.carousel-control-prev {
@@ -151,8 +127,7 @@
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
- background: transparent no-repeat center center;
- background-size: 100% 100%;
+ background: no-repeat 50% / 100% 100%;
}
.carousel-control-prev-icon {
background-image: $carousel-control-prev-icon-bg;
@@ -170,7 +145,7 @@
.carousel-indicators {
position: absolute;
right: 0;
- bottom: 10px;
+ bottom: 0;
left: 0;
z-index: 15;
display: flex;
@@ -182,7 +157,7 @@
list-style: none;
li {
- position: relative;
+ box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
@@ -190,31 +165,17 @@
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: "";
- }
+ background-color: $carousel-indicator-active-bg;
+ background-clip: padding-box;
+ // Use transparent borders to increase the hit area by 10px on top and bottom.
+ border-top: $carousel-indicator-hit-area-height solid transparent;
+ border-bottom: $carousel-indicator-hit-area-height solid transparent;
+ opacity: .5;
+ @include transition($carousel-indicator-transition);
}
.active {
- background-color: $carousel-indicator-active-bg;
+ opacity: 1;
}
}
@@ -225,9 +186,9 @@
.carousel-caption {
position: absolute;
- right: ((100% - $carousel-caption-width) / 2);
+ right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
- left: ((100% - $carousel-caption-width) / 2);
+ left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;