Skip to content

Instantly share code, notes, and snippets.

@akmil

akmil/button theming using config-map.scss

Last active January 31, 2020 14:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save akmil/d036474c6de60cf5141692ad471306ae to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save akmil/d036474c6de60cf5141692ad471306ae to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. akmil revised this gist Jan 31, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion button theming using config-map.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -44,12 +44,13 @@ $color-default: map-deep-get($themes-names, "primary", "color");
    /* generate &.theme-primary{...} and &.theme-dark{...} */
    @include wrappedTheme($themes-names);

    /*override*/
    &.theme-#{$darkName} {
    border: 5px solid $color-default;
    color: $white;
    }

    /* can override specific theme --modifier */
    /* can override/extend specific theme --modifier */
    &.theme-#{$primaryName}--modifier {
    @include print(map-deep-get($themes-names, $primaryName));
    /* will add all from: $themes-names[$primaryName]
  2. akmil revised this gist Jan 31, 2020. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion button theming using config-map.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,13 @@ $color-default: map-deep-get($themes-names, "primary", "color");

    /* can override specific theme --modifier */
    &.theme-#{$primaryName}--modifier {
    @include print(map-deep-get($themes-names, $primaryName));
    @include print(map-deep-get($themes-names, $primaryName));
    /* will add all from: $themes-names[$primaryName]
    /---
    background: $white,
    color: $dark-grey,
    font-size: 18px,
    */
    font-size: 22px;
    }

  3. akmil revised this gist Jan 31, 2020. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions button theming using config-map.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -48,6 +48,12 @@ $color-default: map-deep-get($themes-names, "primary", "color");
    border: 5px solid $color-default;
    color: $white;
    }

    /* can override specific theme --modifier */
    &.theme-#{$primaryName}--modifier {
    @include print(map-deep-get($themes-names, $primaryName));
    font-size: 22px;
    }


    color: $color-default;
  4. akmil renamed this gist Jan 31, 2020. 1 changed file with 0 additions and 0 deletions.
    0 button theming using config-map → button theming using config-map.scss
    View file
    File renamed without changes.
  5. akmil created this gist Jan 31, 2020.
    54 changes: 54 additions & 0 deletions button theming using config-map
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    $themes-names: (
    primary: (
    background: $white,
    color: $dark-grey,
    font-size: 18px,
    ),
    dark: (
    background: $dark,
    font-size: 10px,
    )
    );
    $primaryName: "primary";
    $darkName: "dark";

    @function map-deep-get($map, $keys...) {
    @each $key in $keys {
    $map: map-get($map, $key);
    }
    @return $map;
    }

    @mixin print($declarations) {
    @each $property, $value in $declarations {
    #{$property}: $value
    }
    }

    @mixin wrappedTheme($declarations) {
    @each $theme, $value in $declarations {
    $selector: "&.theme-#{$theme}";
    #{$selector} {
    @include print(map-deep-get($themes-names, $theme));
    }
    }
    }



    $color-default: map-deep-get($themes-names, "primary", "color");

    .button-themed {
    @extend %button;

    /* generate &.theme-primary{...} and &.theme-dark{...} */
    @include wrappedTheme($themes-names);

    &.theme-#{$darkName} {
    border: 5px solid $color-default;
    color: $white;
    }


    color: $color-default;
    }