mdb 8 custom skins not working

Topic: mdb 8 custom skins not working

Andrew pro asked 5 years ago

Expected behavior Custom styling that has been used in previous versions should still work. Actual behavior The files _custom-skin.scss, _custom-styles.scss, _custom-variables.scss are now ignored and there is nothing to indicate how to migrate custom skins to version 8. The entire MDB that I paid for is currently useless, leaving me no way to move to Angular 8. It was bad enough figuring out how to migrate my heavily customized style the last time you changed it. Now you have changed it in a way that seems to have no way to apply the rules in the _custom-* files that you have removed without any warning.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @Andrew

The custom skins shouldn't be placed in _custom-skins.scss file, because only MDB jQuery uses this file.

In Angular, we're defining custom skins in global styles.scss stylesheet, as it is described in our docs.

Please add your custom skin code to styles.scss, and add there necessary imports:

@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';

Please take a look at the below code - that's my styles.scss file where I'm defining custom skin which is working fine with MDB Angular 8:

$skins: () !default;
$skins: map-merge((
  "custom": (
    "skin-primary-color": #fff,
    "skin-navbar": #fff,
    "skin-footer-color": #fff,
    "skin-accent": #fff,
    "skin-flat": #fff,
    "skin-sidenav-item": #fff,
    "skin-sidenav-item-hover": #fff,
    "skin-gradient-start": #fff,
    "skin-gradient-end": #fff,
    "skin-mask-slight": #fff,
    "skin-mask-light": #fff,
    "skin-mask-strong": #fff,
    "skin-sn-child": #fff,
    "skin-btn-primary": #fff,
    "skin-btn-secondary": #fff,
    "skin-btn-default": #fff,
    "skin-text": #fff
  )
), $skins);

/* You can add global styles to this file, and also import other style files */
@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';

Best Regards,

Damian

Add comment

Andrew pro answered 5 years ago

0 0 Best answer

How do I handle the changes in the _custom_styles.scss?

Here is one example (of many) that worked when you provided the slots for custom_styles that no longer work because of the new 'modularity'.

.solid-toast {
  @extend .md-toast;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19) !important;
  opacity: 1 !important;
}

Damian Gemza staff commented 5 years ago

Move every change from _custom-styles.scss file to global styles.scss stylesheet. From there, those styles should work.

Could you please provide me with the reproduction steps - how can I be able to reproduce this problem? For example, with those toasts? Show me every code which is needed - ts, html, scss.

Best Regards,

Damian

Andrew pro commented 5 years ago

I tried moving them to the styles.scss, but that doesn't work because the .md-toast is no longer defined at the global level (.md-toast is unknown element). It only exists in the alert module now. I don't see a way to add custom styles to these items that are now only in the individual modules.

Arkadiusz Idzikowski staff commented 5 years ago

I'm afraid that this approach will no longer be correct in the MDB 8. We needed to remove component styles from the global scope in order to reduce the bundle size.

Andrew pro commented 5 years ago

Are you saying that, without warning, you have removed the ability to add custom styling to your components?

Arkadiusz Idzikowski staff commented 5 years ago

Customization of the components is still possible, but there will be problem with this specific approach (using sass extend on one of our classes). You can still add custom class to the toast and we recently provided a better way for specifying opacity (in the toast configuration options).

Please take a look at our notification docs (opacity section and API tab at the top of the page):

https://mdbootstrap.com/docs/angular/advanced/notifications/

Andrew pro commented 5 years ago

I get that this is how it is now, but I am not happy. I have to rework my entire style structure. I haven't even had time to determine how bad this is going to be yet. Then I have to re-document/re-train the branding department so they will understand how to configure the various build targets. I imagine that sort of thing doesn't affect the 99% of your customers that roll out a single site per codebase, but for those of us that support multiple customers with branded sites, this was a terrible decision to drop in without any warning/deprecation notice. Shame on you.

Mitch pro commented 5 years ago

Agreed with Andrew, this added a lot of frustration for me as well.

Schermbecker commented 5 years ago

Same here - frustrating, that all custom styles and custom variables obvioulsy do not work anymore. On the one hand we have to keep on track with MDB versions, on the other hand we first have to bring custom styles to version 8. At the moment I do not know how to implement our custom styles - when putting variables and styles to styles.scss compiler throws errors.

Arkadiusz Idzikowski staff commented 5 years ago

@Schermbecker

Which styles do you need to customize and what are the exact problems?

Hahn pro commented 5 years ago

I didnt figure out how to replace the changes made in _custom_variables.scss. My problem is mainly the primary color. I found no solution for now.

Andrew pro commented 5 years ago

I've considered refactoring the mdb codebase back to a workable form, but that would quickly become a nightmare with future versions. I have been considering switching to Angular Material w/ Angular Flex-Layout. I don't suppose anyone has any insights into that approach?

Add comment

ais answered 5 years ago