mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 10:04:04 +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 cfa603321e
commit 64e1fd6673
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)
{ // 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
}
]

4
sass/_buttons.scss
View File

@ -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));
}

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);
}
@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;

4
sass/_togglebutton.scss
View File

@ -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