Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme): multiple values for nb-(except-)for-theme #1218

Merged
merged 2 commits into from
Feb 8, 2019

Conversation

marchrius
Copy link
Contributor

Please read and mark the following check list before creating a pull request:

Short description of what this resolves:

Added mixins for both nb-for-theme and nb-except-for-theme to work with multiple theme names with same content style

Added mixins for both `nb-for-theme` and `nb-except-for-theme` to work with multiple theme with same style
@nnixaa
Copy link
Collaborator

nnixaa commented Feb 8, 2019

Hey @marchrius, looks good to me. Could you describe your use cases for this feature?

@marchrius
Copy link
Contributor Author

marchrius commented Feb 8, 2019

Hey @marchrius, looks good to me. Could you describe your use cases for this feature?

An example could be in the ngx-admin progect header.scss (see file reference)
https://github.com/akveo/ngx-admin/blob/d8e70922a92650a5490fdc7720ed115aeed55211/src/app/%40theme/components/header/header.component.scss#L62

Instead of duplicate the entire block to be used with multiple theme I can declare a list of themes that use the specific style declared once.

Eg.

  @include nb-for-theme(corporate) {
    $menu-action-separator-color: #3f4550;

    nb-action {
      @include nb-ltr(border-left-color, $menu-action-separator-color);
      @include nb-rtl(border-right-color, $menu-action-separator-color);
    }

    .header-container .logo {
      @include nb-ltr(border, none);
      @include nb-rtl(border, none);
    }

    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
      color: nb-theme(color-white);
      background: transparent;
    }
  }

  @include nb-for-theme(mytheme) {
    $menu-action-separator-color: #3f4550;

    nb-action {
      @include nb-ltr(border-left-color, $menu-action-separator-color);
      @include nb-rtl(border-right-color, $menu-action-separator-color);
    }

    .header-container .logo {
      @include nb-ltr(border, none);
      @include nb-rtl(border, none);
    }

    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
      color: nb-theme(color-white);
      background: transparent;
    }
  }

Can be replaced by

  @include nb-for-themes(corporate, mytheme) {
    $menu-action-separator-color: #3f4550;

    nb-action {
      @include nb-ltr(border-left-color, $menu-action-separator-color);
      @include nb-rtl(border-right-color, $menu-action-separator-color);
    }

    .header-container .logo {
      @include nb-ltr(border, none);
      @include nb-rtl(border, none);
    }

    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
      color: nb-theme(color-white);
      background: transparent;
    }
  }

@nnixaa nnixaa merged commit 6c9e11c into akveo:master Feb 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants