From 7df67e3be00200b90d8d42a4e079c9aed6f96d43 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Tue, 3 Nov 2015 12:28:56 -0600 Subject: [PATCH] replaced bg color generic-variations with mixin --- Gruntfile.js | 9 ++++++++- sass/_buttons.scss | 4 +--- sass/_mixins-shared.scss | 13 +++++++++++-- sass/_togglebutton.scss | 4 +--- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 88b6c9cf..edba40e1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -29,10 +29,17 @@ module.exports = function(grunt) { }, // button variations mixin replacement(s) - { // Multi-line replacement -https://regex101.com/r/qD9qB8/2 + { // Multi-line replacement - https://regex101.com/r/qD9qB8/2 pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg, replacement: '@include button-variations(unquote($1), $2, $3%);\n', order: 20 + }, + + // background-color generic-variations + { // Multi-line replacement - https://regex101.com/r/cW6pH8/2 + pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg, + replacement: '@include bg-color-variations(unquote($1), $2, $3);\n', + order: 21 } ] diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 35218041..91a35658 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -30,9 +30,7 @@ // BTN .active effect @include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%); // BTN flat hover effect - .generic-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, { - background-color: rgba($material-color, (20/100)); - }); + @include bg-color-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, (20/100)); } diff --git a/sass/_mixins-shared.scss b/sass/_mixins-shared.scss index b919fd02..a01fcf43 100644 --- a/sass/_mixins-shared.scss +++ b/sass/_mixins-shared.scss @@ -19,6 +19,10 @@ background-color: contrast($material-color, darken($material-color, $material-param-1), lighten($material-color, $material-param-1), $contrast-factor); } +@mixin bg-color-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1) { + background-color: rgba($material-color, $material-param-1); +} + // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given @mixin call-variations-content-mixin($mixin-name, $material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1) { @if $mixin-name == variations-content { @@ -29,6 +33,8 @@ @include text-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1); } @else if $mixin-name == button-variations-content { @include button-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1); + } @else if $mixin-name == bg-color-variations-content { + @include bg-color-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1); } @else { @error "Unknown mixin: #{$mixin-name}" } @@ -48,7 +54,11 @@ } @mixin button-variations($extra, $default, $material-param-1) { - @include generic-variations($extra, $default, "variations-content", $material-param-1); + @include generic-variations($extra, $default, "button-variations-content", $material-param-1); +} + +@mixin bg-color-variations($extra, $default, $material-param-1) { + @include generic-variations($extra, $default, "bg-color-variations-content", $material-param-1); } // @@ -133,7 +143,6 @@ @include generic-variations-colors($mixin-name, $extra, $default, $contrast-factor, $material-param-1) } - @mixin generic-variations-color($mixin-name, $extra, $default, $contrast-factor, $material-color-name, $material-color-number, $material-param-1) { & -material-#{$material-color-name}#{unquote($material-color-number)}#{$extra} { $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default; diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss index e9d1ac56..fa02d777 100644 --- a/sass/_togglebutton.scss +++ b/sass/_togglebutton.scss @@ -55,9 +55,7 @@ } // Switch bg on - .generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, { - background-color: rgba($material-color, (50/100)); - }); + @include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100)); // Handle on @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary); // Ripple on