mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

replaced bg color generic-variations with mixin

Browse Source
This commit is contained in:
Kevin Ross 2015-11-03 12:28:56 -06:00
parent ee22bdaef6
commit 7df67e3be0
4 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Gruntfile.js
View File

@ -29,10 +29,17 @@ module.exports = function(grunt) {
}, },
// button variations mixin replacement(s) // 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, 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', replacement: '@include button-variations(unquote($1), $2, $3%);\n',
order: 20 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
} }
] ]

4
sass/_buttons.scss
View File

@ -30,9 +30,7 @@
// BTN .active effect // BTN .active effect
@include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%); @include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%);
// BTN flat hover effect // BTN flat hover effect
.generic-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, { @include bg-color-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, (20/100));
background-color: rgba($material-color, (20/100));
});
} }

13
sass/_mixins-shared.scss
View File

@ -19,6 +19,10 @@
background-color: contrast($material-color, darken($material-color, $material-param-1), lighten($material-color, $material-param-1), $contrast-factor); 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 // 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) { @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 { @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); @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 { } @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); @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 { } @else {
@error "Unknown mixin: #{$mixin-name}" @error "Unknown mixin: #{$mixin-name}"
} }
@ -48,7 +54,11 @@
} }
@mixin button-variations($extra, $default, $material-param-1) { @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) @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) { @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-#{$material-color-name}#{unquote($material-color-number)}#{$extra} {
$material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default; $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;

4
sass/_togglebutton.scss
View File

@ -55,9 +55,7 @@
} }
// Switch bg on // Switch bg on
.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, { @include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
background-color: rgba($material-color, (50/100));
});
// Handle on // Handle on
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary); @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
// Ripple on // Ripple on