Bootstrap 4 carousel-control-color conditional colors - SVG

Question

Im trying to get a different color for the rendered SVG icon using to control the carousel.

I changed the default color for the arrows as follows:

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

This makes the arrows green as I intended to. But now I have a card with a primary background color and I want the arrows to have a white color inside this particular div. Because you can imagine, $primary color on $primary background is not really readable.

I attemped to try a conditional logic to set the value of the variable but it doesn't override the value as I thought it would be.

.widget {
    &.widget-support-slider {
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            @if $carousel-control-color == $primary{
                    $carousel-control-color: white;
                    color: $carousel-control-color;
                }

        }
    }
}

Corrosponding HTML

<div class="card widget-card bg-primary text-light widget-support-slider mt-3">
<div class="card-header py-2">
    <span class="text-primary">Lorem</span> ipsum dolor sit
    <div class="carousel-controls">
    <a class="carousel-control-prev" href="#support-slider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Vor</span>
    </a>
    <a class="carousel-control-next" href="#support-slider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Zurück</span>
    </a>
    </div>
</div>
<div class="card-body p-0">
    ...
</div><!-- /.card-body -->

I've also tried to change the color or fill property, but none of these change the arrow colors. Is there a built-in function in the bootstrap sass that I have overlooked?

Cheers.

Bootstrap v4.1

I actually found something that worked [here](https://stackoverflow.com/questions/49391266/change-bootstrap-4-carousel-control-colors#49391884). But there must be a more elegant solution. Maintaining this with like 20 or more different carousels and backgrounds is probably hell. :( — Willi, May 13 '18 at 13:04

score 0 · Answer 1 · answered May 13 '18 at 23:29

After testing alot of things, I finally came across a somewhat 'okish' solution for me. In regard to maintance its acceptable. Suggestions are highly appreciated though.

Im now using a mixin, that spits out both arrow classes.

@mixin carousel-control-fill($color) {
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23#{$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");
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23#{$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");
    }
}

// setting a color variable without the #
$carousel-control-color-inverse: fff;

&.widget-support-slider {
    // using it
    @include carousel-control-fill($carousel-control-color-inverse);
}

One downside is because it wants an escaped #, I have to use a variable without the #. Which is not as DRY as I wanted it to be.

Bootstrap 4 carousel-control-color conditional colors - SVG

1 Answers1