From 4ef547f4bb3d48a2ee17ccdb9c913e1f4f9c7fe3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 4 Dec 2016 23:19:54 -0800 Subject: [PATCH] drop the .carousel-control base class --- docs/components/carousel.md | 8 ++++---- docs/examples/carousel/index.html | 4 ++-- docs/migration.md | 2 +- scss/_carousel.scss | 3 ++- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 6bcd8f796c..8dd819fba1 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -59,11 +59,11 @@ Adding in the previous and next controls: <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> - <a class="carousel-control carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -92,11 +92,11 @@ You can also add the indicators to the carousel, alongside the controls, too. <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> - <a class="carousel-control carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 3f906960ff..edab899190 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -75,11 +75,11 @@ </div> </div> </div> - <a class="carousel-control carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control carousel-control-next" href="#myCarousel" role="button" data-slide="next"> + <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> diff --git a/docs/migration.md b/docs/migration.md index 212de6dfe5..c1b6435caa 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -187,7 +187,7 @@ Dropped entirely for the new card component. - All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`. - For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`. - `.item` is also now `.carousel-item`. - - For prev/next controls, `.right` and `.left` modifiers are now `.carousel-control-left` and `.carousel-control-left`. + - For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-left` and `.carousel-control-left`, meaning they no longer require a specific base class. - Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed. - Removed image overrides for images in carousel items, deferring to utilities. - Tweaked the Carousel example to include the new markup and styles. diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 6b330db68c..8a077f0833 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -56,7 +56,8 @@ // Left/right controls for nav // -.carousel-control { +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; -- GitLab