Commit
Author: Temani Afif [temani.afif@gmail.com]
Committer: GitHub [noreply@github.com] Fri, 12 Aug 2022 14:30:45 +0000
Hash: 37f6257e0a938e696e8a3dd8f056fc46b3f5668a
Timestamp: Fri, 12 Aug 2022 14:30:45 +0000 (2 years ago)

+30 -30 +/-2 browse
Better syntax for the corner cuts (#265) 
Better syntax for the corner cuts (#265)

* Update props.masks.corner-cuts.css

* Update props.masks.corner-cuts.js
1diff --git a/src/props.masks.corner-cuts.css b/src/props.masks.corner-cuts.css
2index b75e8b0..b47d315 100644
3--- a/src/props.masks.corner-cuts.css
4+++ b/src/props.masks.corner-cuts.css
5 @@ -2,25 +2,25 @@
6 --mask-corner-cut-circles-1: radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem;
7 --mask-corner-cut-circles-2: radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem;
8 --mask-corner-cut-circles-3: radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem;
9- --mask-corner-cut-squares-1: conic-gradient(at 1rem 1rem,#000 75%,#0000 0) 0 0/calc(100% - 1rem) calc(100% - 1rem);
10- --mask-corner-cut-squares-2: conic-gradient(at 2rem 2rem,#000 75%,#0000 0) 0 0/calc(100% - 2rem) calc(100% - 2rem);
11- --mask-corner-cut-squares-3: conic-gradient(at 4rem 4rem,#000 75%,#0000 0) 0 0/calc(100% - 4rem) calc(100% - 4rem);
12+ --mask-corner-cut-squares-1: conic-gradient(at calc(2*1rem) calc(2*1rem),#000 75%,#0000 0) -1rem -1rem;
13+ --mask-corner-cut-squares-2: conic-gradient(at calc(2*2rem) calc(2*2rem),#000 75%,#0000 0) -2rem -2rem;
14+ --mask-corner-cut-squares-3: conic-gradient(at calc(2*4rem) calc(2*4rem),#000 75%,#0000 0) -4rem -4rem;
15 --mask-corner-cut-angles-1:
16- conic-gradient(from -45deg at 1rem 1rem,#0000 90deg,#000 0)
17- calc(-1*1rem) 0/100% 51% repeat-x,
18- conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 90deg,#000 0)
19- calc(-1*1rem) 100%/100% 51% repeat-x
20+ conic-gradient(from -45deg at 1rem 1rem,#0000 25%,#000 0)
21+ -1rem 0 /100% 51% repeat-x,
22+ conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 25%,#000 0)
23+ -1rem 100%/100% 51% repeat-x
24 ;
25 --mask-corner-cut-angles-2:
26- conic-gradient(from -45deg at 2rem 2rem,#0000 90deg,#000 0)
27- calc(-1*2rem) 0/100% 51% repeat-x,
28- conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 90deg,#000 0)
29- calc(-1*2rem) 100%/100% 51% repeat-x
30+ conic-gradient(from -45deg at 2rem 2rem,#0000 25%,#000 0)
31+ -2rem 0 /100% 51% repeat-x,
32+ conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 25%,#000 0)
33+ -2rem 100%/100% 51% repeat-x
34 ;
35 --mask-corner-cut-angles-3:
36- conic-gradient(from -45deg at 4rem 4rem,#0000 90deg,#000 0)
37- calc(-1*4rem) 0/100% 51% repeat-x,
38- conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 90deg,#000 0)
39- calc(-1*4rem) 100%/100% 51% repeat-x
40+ conic-gradient(from -45deg at 4rem 4rem,#0000 25%,#000 0)
41+ -4rem 0 /100% 51% repeat-x,
42+ conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 25%,#000 0)
43+ -4rem 100%/100% 51% repeat-x
44 ;
45 }
46 diff --git a/src/props.masks.corner-cuts.js b/src/props.masks.corner-cuts.js
47index 4aa8deb..5c4466f 100644
48--- a/src/props.masks.corner-cuts.js
49+++ b/src/props.masks.corner-cuts.js
50 @@ -3,25 +3,25 @@ export default {
51 '--mask-corner-cut-circles-1': 'radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem',
52 '--mask-corner-cut-circles-2': 'radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem',
53 '--mask-corner-cut-circles-3': 'radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem',
54- '--mask-corner-cut-squares-1': 'conic-gradient(at 1rem 1rem,#000 75%,#0000 0) 0 0/calc(100% - 1rem) calc(100% - 1rem)',
55- '--mask-corner-cut-squares-2': 'conic-gradient(at 2rem 2rem,#000 75%,#0000 0) 0 0/calc(100% - 2rem) calc(100% - 2rem)',
56- '--mask-corner-cut-squares-3': 'conic-gradient(at 4rem 4rem,#000 75%,#0000 0) 0 0/calc(100% - 4rem) calc(100% - 4rem)',
57+ '--mask-corner-cut-squares-1': 'conic-gradient(at calc(2*1rem) calc(2*1rem),#000 75%,#0000 0) -1rem -1rem',
58+ '--mask-corner-cut-squares-2': 'conic-gradient(at calc(2*2rem) calc(2*2rem),#000 75%,#0000 0) -2rem -2rem',
59+ '--mask-corner-cut-squares-3': 'conic-gradient(at calc(2*4rem) calc(2*4rem),#000 75%,#0000 0) -4rem -4rem',
60 '--mask-corner-cut-angles-1': `
61- conic-gradient(from -45deg at 1rem 1rem,#0000 90deg,#000 0)
62- calc(-1*1rem) 0/100% 51% repeat-x,
63- conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 90deg,#000 0)
64- calc(-1*1rem) 100%/100% 51% repeat-x
65+ conic-gradient(from -45deg at 1rem 1rem,#0000 25%,#000 0)
66+ -1rem 0 /100% 51% repeat-x,
67+ conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 25%,#000 0)
68+ -1rem 100%/100% 51% repeat-x
69 `,
70 '--mask-corner-cut-angles-2': `
71- conic-gradient(from -45deg at 2rem 2rem,#0000 90deg,#000 0)
72- calc(-1*2rem) 0/100% 51% repeat-x,
73- conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 90deg,#000 0)
74- calc(-1*2rem) 100%/100% 51% repeat-x
75+ conic-gradient(from -45deg at 2rem 2rem,#0000 25%,#000 0)
76+ -2rem 0 /100% 51% repeat-x,
77+ conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 25%,#000 0)
78+ -2rem 100%/100% 51% repeat-x
79 `,
80 '--mask-corner-cut-angles-3': `
81- conic-gradient(from -45deg at 4rem 4rem,#0000 90deg,#000 0)
82- calc(-1*4rem) 0/100% 51% repeat-x,
83- conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 90deg,#000 0)
84- calc(-1*4rem) 100%/100% 51% repeat-x
85+ conic-gradient(from -45deg at 4rem 4rem,#0000 25%,#000 0)
86+ -4rem 0 /100% 51% repeat-x,
87+ conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 25%,#000 0)
88+ -4rem 100%/100% 51% repeat-x
89 `,
90 }