Add shadow utilities

This commit is contained in:
Adam Wathan 2017-08-06 08:13:33 -04:00
parent e023065480
commit 7d8559b8fd
4 changed files with 27 additions and 0 deletions

View File

@ -8,6 +8,7 @@
@import "generators/border-widths";
@import "generators/constrain";
@import "generators/grid";
@import "generators/shadows";
@import "generators/sizing";
@import "generators/spacing-padding";
@import "generators/spacing-margin";

View File

@ -0,0 +1,16 @@
.define-shadow-utilities(@variants) {
.generate-utility-variants('shadow'; @variants; {
box-shadow: extract(@__variant-value, 2);
});
}
.define-shadow-utilities(@variants; none) {
.define-shadow-utilities(@variants);
}
.define-shadow-utilities(@variants; @screens) when not (@screens = none) {
.define-shadow-utilities(@variants);
.generate-responsive-utility-variants('shadow'; @variants; @screens; {
box-shadow: extract(@__variant-value, 2);
});
}

View File

@ -11,6 +11,7 @@
@import "utilities/images";
@import "utilities/misc";
@import "utilities/position";
@import "utilities/shadows";
@import "utilities/sizing";
@import "utilities/spacing";
@import "utilities/text";

View File

@ -0,0 +1,9 @@
@shadows:
'1' ~"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
'2' ~"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
'3' ~"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
'4' ~"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
'5' ~"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
;
.define-shadow-utilities(@shadows; @screens);