aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_carousel.scss
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2021-06-07 12:56:27 +0200
committerMario <mario@mariovavti.com>2021-06-07 12:56:27 +0200
commitf3b4308cb59bf4b21ff186f8479c82239446d139 (patch)
tree0dcbdcffcfe0dd678958cbcc34f41cb1c470c69b /vendor/twbs/bootstrap/scss/_carousel.scss
parent67322c12643ced03bec0be70667f8b1c45de752f (diff)
downloadvolse-hubzilla-f3b4308cb59bf4b21ff186f8479c82239446d139.tar.gz
volse-hubzilla-f3b4308cb59bf4b21ff186f8479c82239446d139.tar.bz2
volse-hubzilla-f3b4308cb59bf4b21ff186f8479c82239446d139.zip
upgrade to bootstrap 5.0.1 and first batch of fixes
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_carousel.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_carousel.scss98
1 files changed, 65 insertions, 33 deletions
diff --git a/vendor/twbs/bootstrap/scss/_carousel.scss b/vendor/twbs/bootstrap/scss/_carousel.scss
index db30bed8b..d389c3042 100644
--- a/vendor/twbs/bootstrap/scss/_carousel.scss
+++ b/vendor/twbs/bootstrap/scss/_carousel.scss
@@ -3,12 +3,12 @@
// 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
+// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
// the active slide is heading.
// 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
+// 4. .active.carousel-item-start and .active.carousel-item-end is the current
// slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition.
.carousel {
@@ -42,16 +42,19 @@
display: block;
}
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
+/* rtl:begin:ignore */
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
transform: translateX(100%);
}
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
transform: translateX(-100%);
}
+/* rtl:end:ignore */
+
//
// Alternate transitions
@@ -65,14 +68,14 @@
}
.carousel-item.active,
- .carousel-item-next.carousel-item-left,
- .carousel-item-prev.carousel-item-right {
+ .carousel-item-next.carousel-item-start,
+ .carousel-item-prev.carousel-item-end {
z-index: 1;
opacity: 1;
}
- .active.carousel-item-left,
- .active.carousel-item-right {
+ .active.carousel-item-start,
+ .active.carousel-item-end {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
@@ -95,13 +98,17 @@
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
+ padding: 0;
color: $carousel-control-color;
text-align: center;
+ background: none;
+ border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
// Hover/focus state
- @include hover-focus() {
+ &:hover,
+ &:focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
@@ -110,15 +117,11 @@
}
.carousel-control-prev {
left: 0;
- @if $enable-gradients {
- background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
- }
+ background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
}
.carousel-control-next {
right: 0;
- @if $enable-gradients {
- background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
- }
+ background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
}
// Icons for within
@@ -127,8 +130,19 @@
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
- background: 50% / 100% 100% no-repeat;
-}
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: 100% 100%;
+}
+
+/* rtl:options: {
+ "autoRename": true,
+ "stringMap":[ {
+ "name" : "prev-next",
+ "search" : "prev",
+ "replace" : "next"
+ } ]
+} */
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg);
}
@@ -136,46 +150,48 @@
background-image: escape-svg($carousel-control-next-icon-bg);
}
-
-// Optional indicator pips
+// Optional indicator pips/controls
//
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
+// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
+// like a button) with data-bs-target for each slide your carousel holds.
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
- z-index: 15;
+ z-index: 2;
display: flex;
justify-content: center;
- padding-left: 0; // override <ol> default
+ padding: 0;
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width;
+ margin-bottom: 1rem;
margin-left: $carousel-control-width;
list-style: none;
- li {
+ [data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
+ padding: 0;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
+ border: 0;
// 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;
+ opacity: $carousel-indicator-opacity;
@include transition($carousel-indicator-transition);
}
.active {
- opacity: 1;
+ opacity: $carousel-indicator-active-opacity;
}
}
@@ -187,11 +203,27 @@
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) / 2;
- bottom: 20px;
+ bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) / 2;
- z-index: 10;
- padding-top: 20px;
- padding-bottom: 20px;
+ padding-top: $carousel-caption-padding-y;
+ padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;
text-align: center;
}
+
+// Dark mode carousel
+
+.carousel-dark {
+ .carousel-control-prev-icon,
+ .carousel-control-next-icon {
+ filter: $carousel-dark-control-icon-filter;
+ }
+
+ .carousel-indicators [data-bs-target] {
+ background-color: $carousel-dark-indicator-active-bg;
+ }
+
+ .carousel-caption {
+ color: $carousel-dark-caption-color;
+ }
+}