Commit
Author: Temani Afif [temani.afif@gmail.com]
Committer: GitHub [noreply@github.com] Tue, 09 Aug 2022 19:42:23 +0000
Hash: 31c4b89f7ddb67eb5e62dd690d999b8200a829fa
Timestamp: Tue, 09 Aug 2022 19:42:23 +0000 (2 years ago)

+45 -57 +/-2 browse
Optimizing the Drips edges + minor updates (#259) 
Optimizing the Drips edges + minor updates (#259)

* Update props.masks.edges.css

* Update props.masks.edges.js
1diff --git a/src/props.masks.edges.css b/src/props.masks.edges.css
2index 8c6dfde..08ca248 100644
3--- a/src/props.masks.edges.css
4+++ b/src/props.masks.edges.css
5 @@ -1,25 +1,25 @@
6 :where(html) {
7 --mask-edge-scoop-bottom: radial-gradient(20px at 50% 100%,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%;
8 --mask-edge-scoop-top: radial-gradient(20px at 50% 0,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%;
9- --mask-edge-scoop-vertical: radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% calc(50% - 20px)/ calc(1.9 * 20px) 100%;
10+ --mask-edge-scoop-vertical: radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% calc(50% - 20px) / calc(1.9 * 20px) 100%;
11 --mask-edge-scoop-left: radial-gradient(20px at 0 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px);
12- --mask-edge-scoop-right: radial-gradient(20px at 100% 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px);
13- --mask-edge-scoop-horizontal: radial-gradient(20px at 20px 50%,#0000 97%,#000) calc(50% - 20px)/ 100% calc(1.9 * 20px);
14+ --mask-edge-scoop-right: radial-gradient(20px at 100% 50%,#0000 97%,#000) 50% / 100% calc(1.9 * 20px);
15+ --mask-edge-scoop-horizontal: radial-gradient(20px at 20px 50%,#0000 97%,#000) calc(50% - 20px) / 100% calc(1.9 * 20px);
16 --mask-edge-scalloped:
17 radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
18- linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
19+ linear-gradient(#000 0 0) 50% / calc(100% - 20px) calc(100% - 20px) no-repeat
20 ;
21 --mask-edge-scalloped-bottom:
22 linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
23- radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom/calc(1.9 * 20px) 20px repeat-x
24+ radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom / calc(1.9 * 20px) 20px repeat-x
25 ;
26 --mask-edge-scalloped-top:
27 linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
28 radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px repeat-x
29 ;
30 --mask-edge-scalloped-vertical:
31- linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
32- radial-gradient(circle farthest-side,#000 97%,#0000) center / calc(1.9 * 20px) calc(2 * 20px) repeat space
33+ linear-gradient(#000 0 0) 50% / 100% calc(100% - 2 * 20px) no-repeat,
34+ radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
35 ;
36 --mask-edge-scalloped-left:
37 linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
38 @@ -30,42 +30,36 @@
39 radial-gradient(circle farthest-side at left,#000 97%,#0000) right / 20px calc(1.9 * 20px) repeat-y
40 ;
41 --mask-edge-scalloped-horizontal:
42- linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
43- radial-gradient(circle farthest-side,#000 97%,#0000) 0 / calc(2 * 20px) calc(1.9 * 20px) space repeat
44+ linear-gradient(#000 0 0) 50% / calc(100% - 2 * 20px) 100% no-repeat,
45+ radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
46 ;
47 --mask-edge-drip-bottom:
48- linear-gradient(#000 0 0) top / 100% calc(100% - 2 * 20px) no-repeat,
49- radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
50- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99%/calc(2 * 2 * 20px) calc(2 * 20px) repeat-x
51+ radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
52+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
53 ;
54 --mask-edge-drip-top:
55- linear-gradient(#000 0 0) bottom/100% calc(100% - 2 * 20px) no-repeat,
56- radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
57- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x
58+ radial-gradient(20px at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 100% repeat-x,
59+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x
60 ;
61 --mask-edge-drip-vertical:
62- linear-gradient(#000 0 0) center / 100% calc(100% - 4 * 20px) no-repeat,
63- radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
64- radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
65- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x,
66- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99%/calc(4 * 20px) calc(2 * 20px) repeat-x
67+ radial-gradient(20px at top ,#0000 97%,#000) 50% 20px / calc(2 * 20px) 51% repeat-x,
68+ radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 51% repeat-x,
69+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x,
70+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
71 ;
72 --mask-edge-drip-left:
73- linear-gradient(#000 0 0) right / calc(100% - 2 * 20px) 100% no-repeat,
74- radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
75- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
76+ radial-gradient(20px at left,#0000 97%,#000) 20px 50% / 100% calc(2 * 20px) repeat-y,
77+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
78 ;
79 --mask-edge-drip-right:
80- linear-gradient(#000 0 0) left / calc(100% - 2 * 20px) 100% no-repeat,
81- radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
82- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
83+ radial-gradient(20px at right,#0000 97%,#000) calc(100% - 20px) 50% / 100% calc(2 * 20px) repeat-y,
84+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
85 ;
86 --mask-edge-drip-horizontal:
87- linear-gradient(#000 0 0) center / calc(100% - 4 * 20px) 100% no-repeat,
88- radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
89- radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
90- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y,
91- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
92+ radial-gradient(20px at left ,#0000 97%,#000) 20px 50% / 51% calc(2 * 20px) repeat-y,
93+ radial-gradient(20px at right,#0000 97%,#000) calc(100% - 20px) 50% / 51% calc(2 * 20px) repeat-y,
94+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y,
95+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
96 ;
97 --mask-edge-zig-zag-top: conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%;
98 --mask-edge-zig-zag-bottom: conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%;
99 diff --git a/src/props.masks.edges.js b/src/props.masks.edges.js
100index 170e56c..aedd5bb 100644
101--- a/src/props.masks.edges.js
102+++ b/src/props.masks.edges.js
103 @@ -20,8 +20,8 @@ export default {
104 radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px repeat-x
105 `,
106 '--mask-edge-scalloped-vertical': `
107- linear-gradient(#000 0 0) center / 100% calc(100% - 2 * 20px) no-repeat,
108- radial-gradient(circle farthest-side,#000 97%,#0000) center / calc(1.9 * 20px) calc(2 * 20px) repeat space
109+ linear-gradient(#000 0 0) 50% / 100% calc(100% - 2 * 20px) no-repeat,
110+ radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
111 `,
112 '--mask-edge-scalloped-left': `
113 linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
114 @@ -32,42 +32,36 @@ export default {
115 radial-gradient(circle farthest-side at left,#000 97%,#0000) right / 20px calc(1.9 * 20px) repeat-y
116 `,
117 '--mask-edge-scalloped-horizontal': `
118- linear-gradient(#000 0 0) center / calc(100% - 2 * 20px) 100% no-repeat,
119- radial-gradient(circle farthest-side,#000 97%,#0000) 0 / calc(2 * 20px) calc(1.9 * 20px) space repeat
120+ linear-gradient(#000 0 0) 50% / calc(100% - 2 * 20px) 100% no-repeat,
121+ radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
122 `,
123 '--mask-edge-drip-bottom': `
124- linear-gradient(#000 0 0) top / 100% calc(100% - 2 * 20px) no-repeat,
125- radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
126- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99%/calc(2 * 2 * 20px) calc(2 * 20px) repeat-x
127+ radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
128+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
129 `,
130 '--mask-edge-drip-top': `
131- linear-gradient(#000 0 0) bottom/100% calc(100% - 2 * 20px) no-repeat,
132- radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
133- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x
134+ radial-gradient(20px at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 100% repeat-x,
135+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x
136 `,
137 '--mask-edge-drip-vertical': `
138- linear-gradient(#000 0 0) center / 100% calc(100% - 4 * 20px) no-repeat,
139- radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 20px repeat-x,
140- radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - 20px)/calc(2 * 20px) 20px repeat-x,
141- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1%/calc(4 * 20px) calc(2 * 20px) repeat-x,
142- radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99%/calc(4 * 20px) calc(2 * 20px) repeat-x
143+ radial-gradient(20px at top ,#0000 97%,#000) 50% 20px / calc(2 * 20px) 51% repeat-x,
144+ radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 51% repeat-x,
145+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x,
146+ radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
147 `,
148 '--mask-edge-drip-left': `
149- linear-gradient(#000 0 0) right / calc(100% - 2 * 20px) 100% no-repeat,
150- radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
151- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
152+ radial-gradient(20px at left,#0000 97%,#000) 20px 50% / 100% calc(2 * 20px) repeat-y,
153+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
154 `,
155 '--mask-edge-drip-right': `
156- linear-gradient(#000 0 0) left / calc(100% - 2 * 20px) 100% no-repeat,
157- radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
158- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
159+ radial-gradient(20px at right,#0000 97%,#000) calc(100% - 20px) 50% / 100% calc(2 * 20px) repeat-y,
160+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
161 `,
162 '--mask-edge-drip-horizontal': `
163- linear-gradient(#000 0 0) center / calc(100% - 4 * 20px) 100% no-repeat,
164- radial-gradient(circle farthest-side at left,#0000 97%,#000) 20px 50%/20px calc(2 * 20px) repeat-y,
165- radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - 20px) 50%/20px calc(2 * 20px) repeat-y,
166- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px)/calc(2 * 20px) calc(4 * 20px) repeat-y,
167- radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px)/calc(2 * 20px) calc(4 * 20px) repeat-y
168+ radial-gradient(20px at left ,#0000 97%,#000) 20px 50% / 51% calc(2 * 20px) repeat-y,
169+ radial-gradient(20px at right,#0000 97%,#000) calc(100% - 20px) 50% / 51% calc(2 * 20px) repeat-y,
170+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y,
171+ radial-gradient(20px at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
172 `,
173 '--mask-edge-zig-zag-top': 'conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%',
174 '--mask-edge-zig-zag-bottom': 'conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%',