Our team's application utilizes Bootstrap SASS for styling, but we have made certain customizations to the framework. The Bootstrap files are included in our project through a build process, making direct modifications impossible.
When it comes to dropdown toggle elements, Bootstrap adds a small caret by default, which I want to remove. However, this is implemented using an @include directive (as shown below).
.dropdown-toggle {
// Automatically generate the caret
@include caret;
}
Is there a way for me to override this behavior in our local SASS files so that the caret is either removed or never displayed?
UPDATE: I managed to implement a solution that may not be perfect, but it gets the job done.
.dropdown-toggle::after {
border: none !important;
}
Below is the code for the caret mixin:
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-right {
border-top: $caret-width solid transparent;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-left {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@if $direction == down {
@include caret-down;
} @else if $direction == up {
@include caret-up;
} @else if $direction == right {
@include caret-right;
}
}
@if $direction == left {
&::after {
display: none;
}
&::before {
display: inline-block;
width: 0;
height: 0;
margin-right: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@include caret-left;
}
}
&:empty::after {
margin-left: 0;
}
}
}