Warning, /iDDS/monitor/data/scss/bootstrap/_carousel.scss is written in an unsupported language. File is not indexed.
0001 // Notes on the classes:
0002 //
0003 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
0004 // even when their scroll action started on a carousel, but for compatibility (with Firefox)
0005 // we're preventing all actions instead
0006 // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
0007 // the active slide is heading.
0008 // 3. .active.carousel-item is the current slide.
0009 // 4. .active.carousel-item-start and .active.carousel-item-end is the current
0010 // slide in its in-transition state. Only one of these occurs at a time.
0011 // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
0012 // is the upcoming slide in transition.
0013
0014 .carousel {
0015 position: relative;
0016 }
0017
0018 .carousel.pointer-event {
0019 touch-action: pan-y;
0020 }
0021
0022 .carousel-inner {
0023 position: relative;
0024 width: 100%;
0025 overflow: hidden;
0026 @include clearfix();
0027 }
0028
0029 .carousel-item {
0030 position: relative;
0031 display: none;
0032 float: left;
0033 width: 100%;
0034 margin-right: -100%;
0035 backface-visibility: hidden;
0036 @include transition($carousel-transition);
0037 }
0038
0039 .carousel-item.active,
0040 .carousel-item-next,
0041 .carousel-item-prev {
0042 display: block;
0043 }
0044
0045 /* rtl:begin:ignore */
0046 .carousel-item-next:not(.carousel-item-start),
0047 .active.carousel-item-end {
0048 transform: translateX(100%);
0049 }
0050
0051 .carousel-item-prev:not(.carousel-item-end),
0052 .active.carousel-item-start {
0053 transform: translateX(-100%);
0054 }
0055
0056 /* rtl:end:ignore */
0057
0058
0059 //
0060 // Alternate transitions
0061 //
0062
0063 .carousel-fade {
0064 .carousel-item {
0065 opacity: 0;
0066 transition-property: opacity;
0067 transform: none;
0068 }
0069
0070 .carousel-item.active,
0071 .carousel-item-next.carousel-item-start,
0072 .carousel-item-prev.carousel-item-end {
0073 z-index: 1;
0074 opacity: 1;
0075 }
0076
0077 .active.carousel-item-start,
0078 .active.carousel-item-end {
0079 z-index: 0;
0080 opacity: 0;
0081 @include transition(opacity 0s $carousel-transition-duration);
0082 }
0083 }
0084
0085
0086 //
0087 // Left/right controls for nav
0088 //
0089
0090 .carousel-control-prev,
0091 .carousel-control-next {
0092 position: absolute;
0093 top: 0;
0094 bottom: 0;
0095 z-index: 1;
0096 // Use flex for alignment (1-3)
0097 display: flex; // 1. allow flex styles
0098 align-items: center; // 2. vertically center contents
0099 justify-content: center; // 3. horizontally center contents
0100 width: $carousel-control-width;
0101 color: $carousel-control-color;
0102 text-align: center;
0103 opacity: $carousel-control-opacity;
0104 @include transition($carousel-control-transition);
0105
0106 // Hover/focus state
0107 &:hover,
0108 &:focus {
0109 color: $carousel-control-color;
0110 text-decoration: none;
0111 outline: 0;
0112 opacity: $carousel-control-hover-opacity;
0113 }
0114 }
0115 .carousel-control-prev {
0116 left: 0;
0117 background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
0118 }
0119 .carousel-control-next {
0120 right: 0;
0121 background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
0122 }
0123
0124 // Icons for within
0125 .carousel-control-prev-icon,
0126 .carousel-control-next-icon {
0127 display: inline-block;
0128 width: $carousel-control-icon-width;
0129 height: $carousel-control-icon-width;
0130 background-repeat: no-repeat;
0131 background-position: 50%;
0132 background-size: 100% 100%;
0133 }
0134
0135 /* rtl:options: {
0136 "autoRename": true,
0137 "stringMap":[ {
0138 "name" : "prev-next",
0139 "search" : "prev",
0140 "replace" : "next"
0141 } ]
0142 } */
0143 .carousel-control-prev-icon {
0144 background-image: escape-svg($carousel-control-prev-icon-bg);
0145 }
0146 .carousel-control-next-icon {
0147 background-image: escape-svg($carousel-control-next-icon-bg);
0148 }
0149
0150 // Optional indicator pips
0151 //
0152 // Add an ordered list with the following class and add a list item for each
0153 // slide your carousel holds.
0154
0155 .carousel-indicators {
0156 position: absolute;
0157 right: 0;
0158 bottom: 0;
0159 left: 0;
0160 z-index: 2;
0161 display: flex;
0162 justify-content: center;
0163 padding-left: 0; // override <ol> default
0164 // Use the .carousel-control's width as margin so we don't overlay those
0165 margin-right: $carousel-control-width;
0166 margin-left: $carousel-control-width;
0167 list-style: none;
0168
0169 li {
0170 box-sizing: content-box;
0171 flex: 0 1 auto;
0172 width: $carousel-indicator-width;
0173 height: $carousel-indicator-height;
0174 margin-right: $carousel-indicator-spacer;
0175 margin-left: $carousel-indicator-spacer;
0176 text-indent: -999px;
0177 cursor: pointer;
0178 background-color: $carousel-indicator-active-bg;
0179 background-clip: padding-box;
0180 // Use transparent borders to increase the hit area by 10px on top and bottom.
0181 border-top: $carousel-indicator-hit-area-height solid transparent;
0182 border-bottom: $carousel-indicator-hit-area-height solid transparent;
0183 opacity: $carousel-indicator-opacity;
0184 @include transition($carousel-indicator-transition);
0185 }
0186
0187 .active {
0188 opacity: $carousel-indicator-active-opacity;
0189 }
0190 }
0191
0192
0193 // Optional captions
0194 //
0195 //
0196
0197 .carousel-caption {
0198 position: absolute;
0199 right: (100% - $carousel-caption-width) / 2;
0200 bottom: $carousel-caption-spacer;
0201 left: (100% - $carousel-caption-width) / 2;
0202 padding-top: $carousel-caption-padding-y;
0203 padding-bottom: $carousel-caption-padding-y;
0204 color: $carousel-caption-color;
0205 text-align: center;
0206 }
0207
0208 // Dark mode carousel
0209
0210 .carousel-dark {
0211 .carousel-control-prev-icon,
0212 .carousel-control-next-icon {
0213 filter: $carousel-dark-control-icon-filter;
0214 }
0215
0216 .carousel-indicators li {
0217 background-color: $carousel-dark-indicator-active-bg;
0218 }
0219
0220 .carousel-caption {
0221 color: $carousel-dark-caption-color;
0222 }
0223 }