mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 19:39:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed bg-box-shadow variations

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Gruntfile.js
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, 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', replacement: '@include bg-color-variations(unquote($1), $2, $3);\n',
order: 21 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
}
] ]
} }
} }

16
sass/_buttons.scss
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 { .btn {
position: relative; position: relative;
padding: 8px 30px; padding: 8px 30px;
@ -127,11 +135,3 @@
.btn-group-flat { .btn-group-flat {
box-shadow: none !important; 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;
}
}

13
sass/_mixins-shared.scss
View File

@ -54,6 +54,17 @@
background-color: rgba(map-get($args, material-color), map-get($args, material-param-1)); 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 // 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 call-variations-content-mixin($args) {
$mixin-name: map-get($args, mixin-name); $mixin-name: map-get($args, mixin-name);
@ -67,6 +78,8 @@
@include button-variations-content($args); @include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content { } @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args); @include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@include bg-box-shadow-variations-content($args);
} @else { } @else {
@error "Unknown mixin: #{$mixin-name}" @error "Unknown mixin: #{$mixin-name}"
} }

4
sass/_togglebutton.scss
View File

@ -59,7 +59,5 @@
// 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
.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, { @include bg-box-shadow-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));
});
} }