web-dev-qa-db-fra.com

Comment définir la couleur du texte du bouton personnalisé dans Bootstrap 4 et Sass?

Je voudrais créer un nouveau style de bouton dans Bootstrap 4 avec une couleur de texte blanche (#fff). Mixin button-variant définit automatiquement la couleur du texte en fonction de la couleur d'arrière-plan. Comment puis-je utiliser ce mixin et définir la couleur en même temps, sans modifier _buttons.scss?

custom.scss

.my_button {
  @include button-variant(HOW TO SET TEXT COLOR TO WHITE?);
}

_ buttons.scss

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }
twitter-bootstrapsassbootstrap-4scss-mixins
7
dunkubok

Ceci est similaire à: Comment créer un nouvel ensemble de styles de couleurs dans Bootstrap 4 avec sass

Vous devez utiliser @include pour le bouton personnalisé, définissez le color:, et passez les paramètres de mixage appropriés ...

.btn-custom {
    @include button-variant(pink, red, red, #444, #333, red);
    color: #fff;
}

https://www.codeply.com/go/EHwnjvUXac

Connexes: Extension Bootstrap 4 et SASS

7
Zim