Estoy tratando de personalizar la clase 'badge' en Bootstrap 4. Lo que estoy tratando de conseguir es mostrar todos los badge con un borde (algo así como cuando ponen .btn-outline-*). Actualmente estoy tratando de hacer esto sobrescribiendo el mixin que trae Bootstrap en un archivo a parte:
@mixin badge-variant($bg) {
color: $bg;
background-color: transparent;
border: 1px solid $bg;
&[href] {
@include hover-focus {
background-color: $bg;
}
}
}
@import "node_modules/bootstrap/scss/bootstrap";
Por qué esto no funciona? y que podría hacer para personalizar el mixin sin editar el archivo original? Gracias
Lo que hiciste está bien, solo que tenés que cambiarlos de lugar. Primero incluís Bootstrap y luego definís el nuevo mixin:
// Esto primero
@import "node_modules/bootstrap/scss/bootstrap";
// Esto después
@mixin badge-variant($bg) {
color: $bg;
background-color: transparent;
border: 1px solid $bg;
&[href] {
@include hover-focus {
background-color: $bg;
}
}
}
Saludos
Mil gracias Gordon!!!