Topic: create custom scss for text, border, background color
Expected behavior Working fine with class like border, bg-colors, bg-opacity, text-colors, table-stripe, etc
Actual behavior Cannot set class "border", "border-primary", "bg-primary-50"
Resources (screenshots, code snippets etc.) cannot create snippet for this, but here is my scss code: // CORE FUNCTIONS @import './bootstrap-rtl-fix/functions'; @import './free/functions';
// CORE VARIABLES @import './custom/variables'; @import './free/variables'; @import './bootstrap-rtl-fix/variables'; @import './bootstrap-rtl-fix/maps';
// BOOTSTRAP CORE @import './bootstrap-rtl-fix/mixins'; @import './bootstrap-rtl-fix/utilities';
$all-colors: map-merge-multiple($reds, $blues, $light-blues, $greens, $yellows, $oranges, $grays, $blue-grays, $colors, $theme-colors);
$utilities: map-merge( $utilities, ( "color": map-merge( map-get($utilities, "color"), ( values: map-merge( map-get(map-get($utilities, "color"), "values"), ( $all-colors ), ), ), ), "background-color": map-merge( map-get($utilities, "background-color"), ( values: map-merge( map-get(map-get($utilities, "background-color"), "values"), ( $all-colors ), ), ), ), ) );
// Utilities @import './free/utilities'; @import './bootstrap-rtl-fix/utilities/api';
// MDB CORE @import './free/mixins'; @import './free/utilities';
There is no color like primary 50 in full palette.
Colors from the full palette can be found here: https://mdbootstrap.com/docs/standard/content-styles/colors/#section-full-palette
You can use bg-blue-50 or bg-light-blue-50. But we don't have any other predefined primary colors like primary 50.
IT_Santini pro premium priority commented a year ago
I'm sorry my example above is not really clear, I wan't to achieve is how to generate something like this: .border-red-100 .border-red-200 .border-red-300 etc.. .border-green-100 .border-green-200 .border-green-300 etc... also generate button colors set such as: .btn-red-100 .btn-red-200 .btn-red-300 etc.. .btn-green-100 .btn-green-200 .btn-green-300 etc... and also table colors set such as: .table-red-100 .table-red-200 .table-red-300 etc.. .table-green-100 .table-green-200 .table-green-300 etc...
Try this:
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
"background-color": map-merge(
map-get($utilities, "background-color"),
(
values: map-merge(
map-get(map-get($utilities, "background-color"), "values"),
(
$all-colors
),
),
),
),
"border-color": map-merge(
map-get($utilities, "border-color"),
(
values: map-merge(
map-get(map-get($utilities, "border-color"), "values"),
(
$all-colors
),
),
),
),
),
);
@each $color, $value in $all-colors {
@include table-variant($color, $value);
}
@each $color, $value in $all-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
Dylan DeMarco pro premium priority commented 9 months ago
Hi @Grzegorz I tried including the code above into my styles.scss but it still doesn't seem to make the end results available with classes such as "bg-red-50". Redefining primary seems to work but misses some cases like buttons in data tables. Should I start a new support thread or would you mind providing a complete example here of how styles.scss should look to make this code work^
Grzegorz Bujański staff commented 9 months ago
You can continue this in this thread as it addresses the same issue as I understand it. What does your code look like now?
What if I want to generate background theme colors with opacity? for example: - .bg-primary-10 (opacity 10%) - .bg-primary-25 (opacity 25%) - .bg-primary-50 (opacity 50%) - .bg-primary-75 (opacity 75%)
Grzegorz Bujański staff commented a year ago
You don't have to. You can use the opacity class. For example bg-primary opacity-10, bg-primary opacity-75 etc.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.2
- Device: Laptop
- Browser: Chrome
- OS: Win 11
- Provided sample code: No
- Provided link: No