In my application, I am utilizing Bootstrap 4 with sass. While Bootstrap offers a custom input checkbox for the primary theme color, it does not provide one for other theme colors.
I have come across methods to generate classes using sass like @each and @mixin, but I found them to be unclear. Therefore, as shown in the code below, I manually created each class and color.
.custom-checkbox-primary{
.custom-control-input:checked ~ .custom-control-label::before {
color: $primary;
border-color: $primary;
background-color: $primary;
}
}
.custom-checkbox-secondary{
.custom-control-input:checked ~ .custom-control-label::before {
color: $secondary;
border-color: $secondary;
background-color: $secondary;
}
}
.custom-checkbox-danger{
.custom-control-input:checked ~ .custom-control-label::before {
color: $danger;
border-color: $danger;
background-color: $danger;
}
}
My goal is to have sass dynamically generate these 'custom-checkbox-{{theme-color}}' classes for me.