1 | // Notes on the classes:
|
---|
2 | //
|
---|
3 | // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
---|
4 | // even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
---|
5 | // we're preventing all actions instead
|
---|
6 | // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
|
---|
7 | // the active slide is heading.
|
---|
8 | // 3. .active.carousel-item is the current slide.
|
---|
9 | // 4. .active.carousel-item-start and .active.carousel-item-end is the current
|
---|
10 | // slide in its in-transition state. Only one of these occurs at a time.
|
---|
11 | // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
|
---|
12 | // is the upcoming slide in transition.
|
---|
13 |
|
---|
14 | .carousel {
|
---|
15 | position: relative;
|
---|
16 | }
|
---|
17 |
|
---|
18 | .carousel.pointer-event {
|
---|
19 | touch-action: pan-y;
|
---|
20 | }
|
---|
21 |
|
---|
22 | .carousel-inner {
|
---|
23 | position: relative;
|
---|
24 | width: 100%;
|
---|
25 | overflow: hidden;
|
---|
26 | @include clearfix();
|
---|
27 | }
|
---|
28 |
|
---|
29 | .carousel-item {
|
---|
30 | position: relative;
|
---|
31 | display: none;
|
---|
32 | float: left;
|
---|
33 | width: 100%;
|
---|
34 | margin-right: -100%;
|
---|
35 | backface-visibility: hidden;
|
---|
36 | @include transition($carousel-transition);
|
---|
37 | }
|
---|
38 |
|
---|
39 | .carousel-item.active,
|
---|
40 | .carousel-item-next,
|
---|
41 | .carousel-item-prev {
|
---|
42 | display: block;
|
---|
43 | }
|
---|
44 |
|
---|
45 | /* rtl:begin:ignore */
|
---|
46 | .carousel-item-next:not(.carousel-item-start),
|
---|
47 | .active.carousel-item-end {
|
---|
48 | transform: translateX(100%);
|
---|
49 | }
|
---|
50 |
|
---|
51 | .carousel-item-prev:not(.carousel-item-end),
|
---|
52 | .active.carousel-item-start {
|
---|
53 | transform: translateX(-100%);
|
---|
54 | }
|
---|
55 |
|
---|
56 | /* rtl:end:ignore */
|
---|
57 |
|
---|
58 |
|
---|
59 | //
|
---|
60 | // Alternate transitions
|
---|
61 | //
|
---|
62 |
|
---|
63 | .carousel-fade {
|
---|
64 | .carousel-item {
|
---|
65 | opacity: 0;
|
---|
66 | transition-property: opacity;
|
---|
67 | transform: none;
|
---|
68 | }
|
---|
69 |
|
---|
70 | .carousel-item.active,
|
---|
71 | .carousel-item-next.carousel-item-start,
|
---|
72 | .carousel-item-prev.carousel-item-end {
|
---|
73 | z-index: 1;
|
---|
74 | opacity: 1;
|
---|
75 | }
|
---|
76 |
|
---|
77 | .active.carousel-item-start,
|
---|
78 | .active.carousel-item-end {
|
---|
79 | z-index: 0;
|
---|
80 | opacity: 0;
|
---|
81 | @include transition(opacity 0s $carousel-transition-duration);
|
---|
82 | }
|
---|
83 | }
|
---|
84 |
|
---|
85 |
|
---|
86 | //
|
---|
87 | // Left/right controls for nav
|
---|
88 | //
|
---|
89 |
|
---|
90 | .carousel-control-prev,
|
---|
91 | .carousel-control-next {
|
---|
92 | position: absolute;
|
---|
93 | top: 0;
|
---|
94 | bottom: 0;
|
---|
95 | z-index: 1;
|
---|
96 | // Use flex for alignment (1-3)
|
---|
97 | display: flex; // 1. allow flex styles
|
---|
98 | align-items: center; // 2. vertically center contents
|
---|
99 | justify-content: center; // 3. horizontally center contents
|
---|
100 | width: $carousel-control-width;
|
---|
101 | padding: 0;
|
---|
102 | color: $carousel-control-color;
|
---|
103 | text-align: center;
|
---|
104 | background: none;
|
---|
105 | border: 0;
|
---|
106 | opacity: $carousel-control-opacity;
|
---|
107 | @include transition($carousel-control-transition);
|
---|
108 |
|
---|
109 | // Hover/focus state
|
---|
110 | &:hover,
|
---|
111 | &:focus {
|
---|
112 | color: $carousel-control-color;
|
---|
113 | text-decoration: none;
|
---|
114 | outline: 0;
|
---|
115 | opacity: $carousel-control-hover-opacity;
|
---|
116 | }
|
---|
117 | }
|
---|
118 | .carousel-control-prev {
|
---|
119 | left: 0;
|
---|
120 | background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
|
---|
121 | }
|
---|
122 | .carousel-control-next {
|
---|
123 | right: 0;
|
---|
124 | background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
|
---|
125 | }
|
---|
126 |
|
---|
127 | // Icons for within
|
---|
128 | .carousel-control-prev-icon,
|
---|
129 | .carousel-control-next-icon {
|
---|
130 | display: inline-block;
|
---|
131 | width: $carousel-control-icon-width;
|
---|
132 | height: $carousel-control-icon-width;
|
---|
133 | background-repeat: no-repeat;
|
---|
134 | background-position: 50%;
|
---|
135 | background-size: 100% 100%;
|
---|
136 | }
|
---|
137 |
|
---|
138 | /* rtl:options: {
|
---|
139 | "autoRename": true,
|
---|
140 | "stringMap":[ {
|
---|
141 | "name" : "prev-next",
|
---|
142 | "search" : "prev",
|
---|
143 | "replace" : "next"
|
---|
144 | } ]
|
---|
145 | } */
|
---|
146 | .carousel-control-prev-icon {
|
---|
147 | background-image: escape-svg($carousel-control-prev-icon-bg);
|
---|
148 | }
|
---|
149 | .carousel-control-next-icon {
|
---|
150 | background-image: escape-svg($carousel-control-next-icon-bg);
|
---|
151 | }
|
---|
152 |
|
---|
153 | // Optional indicator pips/controls
|
---|
154 | //
|
---|
155 | // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
|
---|
156 | // like a button) with data-bs-target for each slide your carousel holds.
|
---|
157 |
|
---|
158 | .carousel-indicators {
|
---|
159 | position: absolute;
|
---|
160 | right: 0;
|
---|
161 | bottom: 0;
|
---|
162 | left: 0;
|
---|
163 | z-index: 2;
|
---|
164 | display: flex;
|
---|
165 | justify-content: center;
|
---|
166 | padding: 0;
|
---|
167 | // Use the .carousel-control's width as margin so we don't overlay those
|
---|
168 | margin-right: $carousel-control-width;
|
---|
169 | margin-bottom: 1rem;
|
---|
170 | margin-left: $carousel-control-width;
|
---|
171 | list-style: none;
|
---|
172 |
|
---|
173 | [data-bs-target] {
|
---|
174 | box-sizing: content-box;
|
---|
175 | flex: 0 1 auto;
|
---|
176 | width: $carousel-indicator-width;
|
---|
177 | height: $carousel-indicator-height;
|
---|
178 | padding: 0;
|
---|
179 | margin-right: $carousel-indicator-spacer;
|
---|
180 | margin-left: $carousel-indicator-spacer;
|
---|
181 | text-indent: -999px;
|
---|
182 | cursor: pointer;
|
---|
183 | background-color: $carousel-indicator-active-bg;
|
---|
184 | background-clip: padding-box;
|
---|
185 | border: 0;
|
---|
186 | // Use transparent borders to increase the hit area by 10px on top and bottom.
|
---|
187 | border-top: $carousel-indicator-hit-area-height solid transparent;
|
---|
188 | border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
---|
189 | opacity: $carousel-indicator-opacity;
|
---|
190 | @include transition($carousel-indicator-transition);
|
---|
191 | }
|
---|
192 |
|
---|
193 | .active {
|
---|
194 | opacity: $carousel-indicator-active-opacity;
|
---|
195 | }
|
---|
196 | }
|
---|
197 |
|
---|
198 |
|
---|
199 | // Optional captions
|
---|
200 | //
|
---|
201 | //
|
---|
202 |
|
---|
203 | .carousel-caption {
|
---|
204 | position: absolute;
|
---|
205 | right: (100% - $carousel-caption-width) * .5;
|
---|
206 | bottom: $carousel-caption-spacer;
|
---|
207 | left: (100% - $carousel-caption-width) * .5;
|
---|
208 | padding-top: $carousel-caption-padding-y;
|
---|
209 | padding-bottom: $carousel-caption-padding-y;
|
---|
210 | color: $carousel-caption-color;
|
---|
211 | text-align: center;
|
---|
212 | }
|
---|
213 |
|
---|
214 | // Dark mode carousel
|
---|
215 |
|
---|
216 | .carousel-dark {
|
---|
217 | .carousel-control-prev-icon,
|
---|
218 | .carousel-control-next-icon {
|
---|
219 | filter: $carousel-dark-control-icon-filter;
|
---|
220 | }
|
---|
221 |
|
---|
222 | .carousel-indicators [data-bs-target] {
|
---|
223 | background-color: $carousel-dark-indicator-active-bg;
|
---|
224 | }
|
---|
225 |
|
---|
226 | .carousel-caption {
|
---|
227 | color: $carousel-dark-caption-color;
|
---|
228 | }
|
---|
229 | }
|
---|