CODEWITHSUNDEEP
twitter-bootstrapsassbootstrap-4
Classified
Classified

Reputation: 560

Using gradients with the scss color map - is it possible?

I am using Bootstrap 4, and I was wondering while theming my application whether it was possible to use gradients in the $theme-colors map.

Example of usage

$theme-colors: ( 
    "brand-gradient": background: -moz-linear-gradient(-45deg, #fff 0%, #000 100%);
);

so that if I want a button to be gradient i could do

<button class="btn btn-brand-gradient">Test</button>

And then aswell as adding the gradient, also using fallbacks for old browsers like you normally would.

Just a curiosity question.

Upvotes: 1

Views: 1092

Answers (1)

Cody MacPixelface
Cody MacPixelface

Reputation: 1386

Unfortunately, you can't. At least not like this.

The btn class uses the values from $theme-colors like so:

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

This would normally let you use the class btn-brand-gradient as you suggest, if you added the class to $theme-colors.

If you take a look at the mixin button-variant() you'll see that it uses another mixin called gradient-bg() for the button background and border.

In this mixin, the background is set like this:

background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;

The $color argument in a CSS linear-gradient must be a valid color value, and a linear-gradient is not in this case.

Upvotes: 2

Related Questions