|
96 | 96 | align-items: center; // 2. vertically center contents |
97 | 97 | justify-content: center; // 3. horizontally center contents |
98 | 98 | width: $carousel-control-width; |
| 99 | + padding: 0; |
99 | 100 | color: $carousel-control-color; |
100 | 101 | text-align: center; |
| 102 | + background: none; |
| 103 | + border: 0; |
101 | 104 | opacity: $carousel-control-opacity; |
102 | 105 | @include transition($carousel-control-transition); |
103 | 106 |
|
|
153 | 156 | background-image: escape-svg($carousel-control-next-icon-bg); |
154 | 157 | } |
155 | 158 |
|
156 | | -// Optional indicator pips |
| 159 | +// Optional indicator pips/controls |
157 | 160 | // |
158 | | -// Add an ordered list with the following class and add a list item for each |
159 | | -// slide your carousel holds. |
| 161 | +// Add a container (such as a list) with the following class and add an item (ideally a focusable control, |
| 162 | +// like a button) with data-bs-target for each slide your carousel holds. |
160 | 163 |
|
161 | 164 | .carousel-indicators { |
162 | 165 | position: absolute; |
|
166 | 169 | z-index: 2; |
167 | 170 | display: flex; |
168 | 171 | justify-content: center; |
169 | | - padding-left: 0; // override <ol> default |
| 172 | + padding: 0; |
170 | 173 | // Use the .carousel-control's width as margin so we don't overlay those |
171 | 174 | margin-right: $carousel-control-width; |
| 175 | + margin-bottom: 1rem; |
172 | 176 | margin-left: $carousel-control-width; |
173 | 177 | list-style: none; |
174 | 178 |
|
175 | | - li { |
| 179 | + button { |
176 | 180 | box-sizing: content-box; |
177 | 181 | flex: 0 1 auto; |
178 | 182 | width: $carousel-indicator-width; |
179 | 183 | height: $carousel-indicator-height; |
| 184 | + padding: 0; |
180 | 185 | margin-right: $carousel-indicator-spacer; |
181 | 186 | margin-left: $carousel-indicator-spacer; |
182 | 187 | text-indent: -999px; |
183 | 188 | cursor: pointer; |
184 | 189 | background-color: $carousel-indicator-active-bg; |
185 | 190 | background-clip: padding-box; |
| 191 | + border: 0; |
186 | 192 | // Use transparent borders to increase the hit area by 10px on top and bottom. |
187 | 193 | border-top: $carousel-indicator-hit-area-height solid transparent; |
188 | 194 | border-bottom: $carousel-indicator-hit-area-height solid transparent; |
|
218 | 224 | filter: $carousel-dark-control-icon-filter; |
219 | 225 | } |
220 | 226 |
|
221 | | - .carousel-indicators li { |
| 227 | + .carousel-indicators button { |
222 | 228 | background-color: $carousel-dark-indicator-active-bg; |
223 | 229 | } |
224 | 230 |
|
|
0 commit comments