Приложение моей команды использует bootstrap sass для некоторых стилей, но с некоторыми настройками.Файлы начальной загрузки добавляются в наш проект в процессе сборки, поэтому я не могу изменить их напрямую.
Для выпадающих элементов-переключателей, начальной загрузки добавляется небольшая каретка, которую я хотел бы удалить.Но это делается через @include (показано ниже).
.dropdown-toggle {
// Generate the caret automatically
@include caret;
}
Как бы я переписал это в наших локальных файлах sass, чтобы удалить / никогда не отображать каретку?
РЕДАКТИРОВАТЬ: Вот исправлениеЯ закончил тем, что использовал.Не идеально, но это работает.
.dropdown-toggle::after {
border: none !important;
}
Вот миксин карета:
@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;
}
}
}