Commit
Author: Temani Afif [temani.afif@gmail.com]
Committer: GitHub [noreply@github.com] Tue, 09 Aug 2022 17:37:53 +0000
Hash: c0f0ed7063682812e4b0c380a275ce6a765472a7
Timestamp: Tue, 09 Aug 2022 17:37:53 +0000 (2 years ago)

+28 -98 +/-2 browse
Optimization for the mask edges (#258) 
Optimization for the mask edges (#258)

* Update index.html

* Update props.masks.corner-cuts.css

* Update props.masks.corner-cuts.js

* Update props.masks.corner-cuts.css

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