mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add shadow utilities
This commit is contained in:
parent
e023065480
commit
7d8559b8fd
@ -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";
|
||||
|
||||
16
src/generators/shadows.less
Normal file
16
src/generators/shadows.less
Normal 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);
|
||||
});
|
||||
}
|
||||
@ -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";
|
||||
|
||||
9
src/utilities/shadows.less
Normal file
9
src/utilities/shadows.less
Normal 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);
|
||||
Loading…
x
Reference in New Issue
Block a user