|  | 
| 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