$themeResetColors: () !default;
$themeResetColors: map-merge(
(
"primary": 'primary',
"secondary": 'secondary',
),
$themeResetColors
);
@each $name, $val in $themeResetColors {
.bg-#{$name} {
background-color: var(--#{$val}) !important;
}
.text-#{$name} {
color: var(--#{$val}) !important;
}
.badge-#{$name} {
background-color: var(--#{$val}) !important;
}
.badge-circle-#{$name} {
background-color: var(--#{$val}) !important;
}
.btn-#{$name} {
color: var(--#{$val}-btn-color);
background-color: var(--#{$val});
border-color: var(--#{$val}-border);
box-shadow: var(--#{$val}-btn-shadow);
transition: all 0.3s;
&:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active {
color: var(--#{$val}-btn-color-hover);
background-color: var(--#{$val}-hover);
border-color: var(--#{$val}-border-hover);
box-shadow: var(--#{$val}-btn-shadow-hover);
transition: all 0.3s;
}
&.disabled, &:disabled {
color: var(--#{$val}-btn-color);
background-color: var(--#{$val});
border-color: var(--#{$val}-border);
}
}
.btn-outline-#{$name} {
color: var(--#{$val});
border-color: var(--#{$val});
&:hover {
color: var(--#{$val}-btn-color);
background-color: var(--#{$val});
border-color: var(--#{$val});
}
}
}
.input-group-text {
background-color: var(--secondary) !important;
border-color: var(--secondary-border) !important;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label:before, .custom-control-input:checked ~ .custom-control-label:before {
color: var(--primary-btn-color) !important;
background-color: var(--primary) !important;
border-color: var(--primary-border) !important;
box-shadow: none;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
opacity: .6 !important;
}