Skip to content

Commit

Permalink
Start work on revamping carousel to use currentColor and utils to cha…
Browse files Browse the repository at this point in the history 
…nge text, control, and indicator colors
  • Loading branch information
@mdo
mdo committed Dec 28, 2018
1 parent 6a5a1b0 commit 19de417
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 20 deletions.
36 changes: 26 additions & 10 deletions scss/_carousel.scss
View file
Expand Up @@ -13,6 +13,7 @@

.carousel {
position: relative;
color: $carousel-color;
}

.carousel.pointer-event {
Expand Down Expand Up @@ -102,7 +103,7 @@

// Hover/focus state
@include hover-focus {
color: $carousel-control-color;
color: $carousel-control-color; // Prevent global anchor hover styles
text-decoration: none;
outline: 0;
opacity: $carousel-control-hover-opacity;
Expand All @@ -127,14 +128,15 @@
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background: transparent no-repeat center center;
background-size: 100% 100%;
fill: $carousel-control-icon-color;
// background: transparent no-repeat center center;
// background-size: 100% 100%;
}
.carousel-control-prev-icon {
background-image: $carousel-control-prev-icon-bg;
// background-image: $carousel-control-prev-icon-bg;
}
.carousel-control-next-icon {
background-image: $carousel-control-next-icon-bg;
// background-image: $carousel-control-next-icon-bg;
}


Expand All @@ -158,21 +160,35 @@
list-style: none;

li {
box-sizing: content-box;
position: relative;
// box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
// background-color: $carousel-indicator-active-bg;
// background-clip: padding-box;
border-bottom: $carousel-indicator-height solid;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
// border-top: $carousel-indicator-hit-area-height solid transparent;
// border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;
@include transition($carousel-indicator-transition);

&::after {
position: absolute;
top: -$carousel-indicator-hit-area-height;
right: -$carousel-indicator-hit-area-height / 2;
bottom: -$carousel-indicator-hit-area-height;
left: -$carousel-indicator-hit-area-height / 2;
display: block;
height: $carousel-indicator-hit-area-height * 3;
content: "";
background-color: rgba(255, 0, 0, .1);
}
}

.active {
Expand Down
20 changes: 11 additions & 9 deletions scss/_variables.scss
View file
Expand Up @@ -1028,31 +1028,33 @@ $breadcrumb-border-radius: $border-radius !default;

// Carousel

$carousel-control-color: $white !default;
$carousel-color: $white !default;

$carousel-control-color: inherit !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-hover-opacity: .9 !default;
$carousel-control-transition: opacity .15s ease !default;

$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-active-bg: $white !default;
$carousel-indicator-width: 2rem !default;
$carousel-indicator-height: .25rem !default;
$carousel-indicator-hit-area-height: .25rem !default;
$carousel-indicator-spacer: .25rem !default;
$carousel-indicator-active-bg: inherit !default;
$carousel-indicator-transition: opacity .6s ease !default;

$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-caption-color: inherit !default;

$carousel-control-icon-width: 20px !default;
$carousel-control-icon-width: 1.5rem !default;
$carousel-control-icon-color: currentColor !default;

$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;

$carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)


// Spinners

$spinner-width: 2rem !default;
Expand Down
47 changes: 46 additions & 1 deletion site/docs/4.2/components/carousel.md
View file
Expand Up @@ -32,7 +32,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
</div>
<div class="carousel-item">
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
Expand Down Expand Up @@ -221,6 +221,51 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
{% endcapture %}
{% include example.html content=example %}

### Changing colors

Change the color of a carousel's next and previous controls, indicators, and captions with a single `.text-*` utility on the `.carousel`. Need more control? Apply text utilities and custom styles more selectively.

{% capture example %}
<div id="carouselExampleColors" class="carousel slide text-dark" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleColors" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleColors" data-slide-to="1"></li>
<li data-target="#carouselExampleColors" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#999" background="#f5f5f5" text="First slide" %}
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#888" background="#f1f1f1" text="Second slide" %}
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#777" background="#eee" text="Third slide" %}
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleColors" role="button" data-slide="prev">
<svg class="carousel-control-prev-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/></svg>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleColors" role="button" data-slide="next">
<svg class="carousel-control-next-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/></svg>
<span class="sr-only">Next</span>
</a>
</div>
{% endcapture %}
{% include example.html content=example %}

## Usage

Expand Down

0 comments on commit 19de417

Please sign in to comment.