Commit
Author: Temani Afif [temani.afif@gmail.com]
Committer: GitHub [noreply@github.com] Mon, 22 Aug 2022 17:25:11 +0000
Hash: 5d810a92b1147df3f346103186e46798ac27796f
Timestamp: Mon, 22 Aug 2022 17:25:11 +0000 (2 years ago)

+4 -4 +/-2 browse
A tiny update to the scooped edges (#269) 
A tiny update to the scooped edges (#269)

* 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 0386782..c7e1a8c 100644
3--- a/src/props.masks.edges.css
4+++ b/src/props.masks.edges.css
5 @@ -1,10 +1,10 @@
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% -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-horizontal: radial-gradient(20px at 20px 50%,#0000 97%,#000) -20px / 100% calc(1.9 * 20px);
15 --mask-edge-scalloped:
16 radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
17 linear-gradient(#000 0 0) 50% / calc(100% - 20px) calc(100% - 20px) no-repeat
18 diff --git a/src/props.masks.edges.js b/src/props.masks.edges.js
19index 60e6c15..a429520 100644
20--- a/src/props.masks.edges.js
21+++ b/src/props.masks.edges.js
22 @@ -3,10 +3,10 @@
23 export default {
24 '--mask-edge-scoop-bottom': 'radial-gradient(20px at 50% 100%,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%',
25 '--mask-edge-scoop-top': 'radial-gradient(20px at 50% 0,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%',
26- '--mask-edge-scoop-vertical': 'radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% calc(50% - 20px)/ calc(1.9 * 20px) 100%',
27+ '--mask-edge-scoop-vertical': 'radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% -20px/ calc(1.9 * 20px) 100%',
28 '--mask-edge-scoop-left': 'radial-gradient(20px at 0 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px)',
29 '--mask-edge-scoop-right': 'radial-gradient(20px at 100% 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px)',
30- '--mask-edge-scoop-horizontal': 'radial-gradient(20px at 20px 50%,#0000 97%,#000) calc(50% - 20px)/ 100% calc(1.9 * 20px)',
31+ '--mask-edge-scoop-horizontal': 'radial-gradient(20px at 20px 50%,#0000 97%,#000) -20px/ 100% calc(1.9 * 20px)',
32 '--mask-edge-scalloped': `
33 radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
34 linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat