fixed bg-box-shadow variations

This commit is contained in:
Kevin Ross 2015-11-04 14:34:47 -06:00
parent e6027d6568
commit 2942399fd5
4 changed files with 29 additions and 12 deletions

View File

@ -42,8 +42,14 @@ module.exports = function(grunt) {
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
}
},
// bg-box-shadow generic-variations
{ // Multi-line replacement - https://regex101.com/r/jW8kR1/1
pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
replacement: '@include bg-box-shadow-variations(unquote($1), $2);\n',
order: 22
}
]
}
}

View File

@ -1,3 +1,11 @@
@mixin btn-shadow(){
@extend .shadow-z-1;
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@extend .shadow-z-1-hover;
}
}
.btn {
position: relative;
padding: 8px 30px;
@ -127,11 +135,3 @@
.btn-group-flat {
box-shadow: none !important;
}
@mixin btn-shadow(){
@extend .shadow-z-1;
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@extend .shadow-z-1-hover;
}
}

View File

@ -54,6 +54,17 @@
background-color: rgba(map-get($args, material-color), map-get($args, material-param-1));
}
// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
@mixin bg-box-shadow-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-box-shadow-variations-content", null);
}
@mixin bg-box-shadow-variations-content($args){
$material-color: map-get($args, material-color);
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
}
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
@mixin call-variations-content-mixin($args) {
$mixin-name: map-get($args, mixin-name);
@ -67,6 +78,8 @@
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@include bg-box-shadow-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}

View File

@ -59,7 +59,5 @@
// Handle on
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
// Ripple on
.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
});
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
}