1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
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 |
|
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 |
|
57 |
|
58 |
|
59 |
|
60 |
|
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 |
|
88 |
|
89 |
|
90 | .carousel-control-prev,
|
91 | .carousel-control-next {
|
92 | position: absolute;
|
93 | top: 0;
|
94 | bottom: 0;
|
95 | z-index: 1;
|
96 |
|
97 | display: flex;
|
98 | align-items: center;
|
99 | justify-content: center;
|
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 |
|
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 |
|
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 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
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 |
|
154 |
|
155 |
|
156 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 | }
|