create custom scss for text, border, background color

Topic: create custom scss for text, border, background color

IT_Santini priority asked 1 year ago

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 @import './free/utilities'; @import './bootstrap-rtl-fix/utilities/api';

// MDB CORE @import './free/mixins'; @import './free/utilities';

Add comment

Grzegorz Bujański staff answered 1 year ago

0 0 Best answer

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 priority commented 1 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...

Add comment

IT_Santini priority answered 1 year ago

0 0 Best answer

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 1 year ago

You don't have to. You can use the opacity class. For example bg-primary opacity-10, bg-primary opacity-75 etc.

Add comment

Grzegorz Bujański staff answered 1 year ago

1 0 Best answer

<pre class="prettyprint"><code>$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);
  }
}
</code></pre>

Please insert min. 20 characters.

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 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?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

IT_Santini

82Support score
23Questions 4Answers 12Snippets