Commit
Author: Temani Afif [temani.afif@gmail.com]
Committer: GitHub [noreply@github.com] Wed, 10 Aug 2022 22:55:47 +0000
Hash: 9e58125792739b01ebec8888b7067a237551df0a
Timestamp: Wed, 10 Aug 2022 22:55:47 +0000 (2 years ago)

+24 -24 +/-2 browse
Optimizing the Scalloped edges (#262) 
Optimizing the Scalloped edges (#262)

* 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 08ca248..0386782 100644
3--- a/src/props.masks.edges.css
4+++ b/src/props.masks.edges.css
5 @@ -10,28 +10,28 @@
6 linear-gradient(#000 0 0) 50% / calc(100% - 20px) calc(100% - 20px) no-repeat
7 ;
8 --mask-edge-scalloped-bottom:
9- linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
10- radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom / calc(1.9 * 20px) 20px repeat-x
11+ linear-gradient(to top,#0000 20px,#000 0),
12+ radial-gradient(20px at top,#000 97%,#0000) bottom / calc(1.9 * 20px) 20px
13 ;
14 --mask-edge-scalloped-top:
15- linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
16- radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px repeat-x
17+ linear-gradient(to bottom,#0000 20px,#000 0),
18+ radial-gradient(20px at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px
19 ;
20 --mask-edge-scalloped-vertical:
21- linear-gradient(#000 0 0) 50% / 100% calc(100% - 2 * 20px) no-repeat,
22- radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
23+ linear-gradient(0deg,#0000 calc(2 * 20px),#000 0) 0 20px,
24+ radial-gradient(20px,#000 97%,#0000) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
25 ;
26 --mask-edge-scalloped-left:
27- linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
28- radial-gradient(circle farthest-side at right,#000 97%,#0000) left / 20px calc(1.9 * 20px) repeat-y
29+ linear-gradient(to right,#0000 20px,#000 0),
30+ radial-gradient(20px at right,#000 97%,#0000) left / 20px calc(1.9 * 20px)
31 ;
32 --mask-edge-scalloped-right:
33- linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
34- radial-gradient(circle farthest-side at left,#000 97%,#0000) right / 20px calc(1.9 * 20px) repeat-y
35+ linear-gradient(to left,#0000 20px,#000 0),
36+ radial-gradient(20px at left,#000 97%,#0000) right / 20px calc(1.9 * 20px)
37 ;
38 --mask-edge-scalloped-horizontal:
39- linear-gradient(#000 0 0) 50% / calc(100% - 2 * 20px) 100% no-repeat,
40- radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
41+ linear-gradient(-90deg,#0000 calc(2 * 20px),#000 0) 20px,
42+ radial-gradient(20px,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
43 ;
44 --mask-edge-drip-bottom:
45 radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
46 diff --git a/src/props.masks.edges.js b/src/props.masks.edges.js
47index aedd5bb..60e6c15 100644
48--- a/src/props.masks.edges.js
49+++ b/src/props.masks.edges.js
50 @@ -12,28 +12,28 @@ export default {
51 linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
52 `,
53 '--mask-edge-scalloped-bottom': `
54- linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat,
55- radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom/calc(1.9 * 20px) 20px repeat-x
56+ linear-gradient(to top,#0000 20px,#000 0),
57+ radial-gradient(20px at top,#000 97%,#0000) bottom / calc(1.9 * 20px) 20px
58 `,
59 '--mask-edge-scalloped-top': `
60- linear-gradient(#000 0 0) bottom/100% calc(100% - 20px) no-repeat,
61- radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px repeat-x
62+ linear-gradient(to bottom,#0000 20px,#000 0),
63+ radial-gradient(20px at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px
64 `,
65 '--mask-edge-scalloped-vertical': `
66- linear-gradient(#000 0 0) 50% / 100% calc(100% - 2 * 20px) no-repeat,
67- radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
68+ linear-gradient(0deg,#0000 calc(2 * 20px),#000 0) 0 20px,
69+ radial-gradient(20px,#000 97%,#0000) 50% / calc(1.9 * 20px) calc(2 * 20px) repeat space
70 `,
71 '--mask-edge-scalloped-left': `
72- linear-gradient(#000 0 0) right / calc(100% - 20px) 100% no-repeat,
73- radial-gradient(circle farthest-side at right,#000 97%,#0000) left / 20px calc(1.9 * 20px) repeat-y
74+ linear-gradient(to right,#0000 20px,#000 0),
75+ radial-gradient(20px at right,#000 97%,#0000) left / 20px calc(1.9 * 20px)
76 `,
77 '--mask-edge-scalloped-right': `
78- linear-gradient(#000 0 0) left / calc(100% - 20px) 100% no-repeat,
79- radial-gradient(circle farthest-side at left,#000 97%,#0000) right / 20px calc(1.9 * 20px) repeat-y
80+ linear-gradient(to left,#0000 20px,#000 0),
81+ radial-gradient(20px at left,#000 97%,#0000) right / 20px calc(1.9 * 20px)
82 `,
83 '--mask-edge-scalloped-horizontal': `
84- linear-gradient(#000 0 0) 50% / calc(100% - 2 * 20px) 100% no-repeat,
85- radial-gradient(circle farthest-side,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
86+ linear-gradient(-90deg,#0000 calc(2 * 20px),#000 0) 20px,
87+ radial-gradient(20px,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
88 `,
89 '--mask-edge-drip-bottom': `
90 radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,