thanks for the SASS theme.. everything is working like a charm! it's a great piece of work!
Problem/Motivation
The issue is very much PEBKAC here... I don't seem to be able to find documentation about the best way of doing this : I want to override values that are defined in the /node_modules/bootstrap/scss/mixins/_utilities.scss file of my Barrio SASS theme.
this is the code :
} @else {
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
My objective is to change the default background colour of the navbar:
<nav class="navbar navbar-dark bg-primary navbar-expand-lg" id="navbar-main">
ā¦
</nav>
Here is the CSS :
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
I'd like to know the best practice to replace --bs-primary-rgb and --bs-bg-opacity with my own variables --mybs-primary-rgb and --mybs-bg-opacity
I don't see how this can be done either by overriding the scss file or using the API...
Can someone please explain this or point me in the direction of the right documentation?