I have a file called _buttons.scss:
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
}
In my override file 'buttons.scss', I want to remove the color property and add my custom font family and font weight:
.btn {
font-family: $custom-font-family;
font-weight: $custom-font-weight;
}
However, when I use the .btn class on an <a> element, it still inherits the color from Bootstrap's .btn class instead of the defined color for the <a> element.
For example, in the HTML:
<a href="#" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">Attachment <span class="badge" data-bind="text: Documents().length">1</span></a>
How can I prevent this?
UPDATE: The compiled css will look like:
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
}
.btn {
font-family: "Segoe UI", "Segoe UI Light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
}
Therefore, the .btn class will still use the #212529 color from Bootstrap.