Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Better syntax for the corner cuts #265

Merged
merged 2 commits into from
Aug 12, 2022
Merged

Better syntax for the corner cuts #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9ffe43
Update props.masks.corner-cuts.css
Afif13 Aug 12, 2022
9ca7ed5
Update props.masks.corner-cuts.js
Afif13 Aug 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 15 additions & 15 deletions src/props.masks.corner-cuts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
--mask-corner-cut-circles-1: radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem;
--mask-corner-cut-circles-2: radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem;
--mask-corner-cut-circles-3: radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem;
--mask-corner-cut-squares-1: conic-gradient(at 1rem 1rem,#000 75%,#0000 0) 0 0/calc(100% - 1rem) calc(100% - 1rem);
--mask-corner-cut-squares-2: conic-gradient(at 2rem 2rem,#000 75%,#0000 0) 0 0/calc(100% - 2rem) calc(100% - 2rem);
--mask-corner-cut-squares-3: conic-gradient(at 4rem 4rem,#000 75%,#0000 0) 0 0/calc(100% - 4rem) calc(100% - 4rem);
--mask-corner-cut-squares-1: conic-gradient(at calc(2*1rem) calc(2*1rem),#000 75%,#0000 0) -1rem -1rem;
--mask-corner-cut-squares-2: conic-gradient(at calc(2*2rem) calc(2*2rem),#000 75%,#0000 0) -2rem -2rem;
--mask-corner-cut-squares-3: conic-gradient(at calc(2*4rem) calc(2*4rem),#000 75%,#0000 0) -4rem -4rem;
--mask-corner-cut-angles-1:
conic-gradient(from -45deg at 1rem 1rem,#0000 90deg,#000 0)
calc(-1*1rem) 0/100% 51% repeat-x,
conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 90deg,#000 0)
calc(-1*1rem) 100%/100% 51% repeat-x
conic-gradient(from -45deg at 1rem 1rem,#0000 25%,#000 0)
-1rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 25%,#000 0)
-1rem 100%/100% 51% repeat-x
;
--mask-corner-cut-angles-2:
conic-gradient(from -45deg at 2rem 2rem,#0000 90deg,#000 0)
calc(-1*2rem) 0/100% 51% repeat-x,
conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 90deg,#000 0)
calc(-1*2rem) 100%/100% 51% repeat-x
conic-gradient(from -45deg at 2rem 2rem,#0000 25%,#000 0)
-2rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 25%,#000 0)
-2rem 100%/100% 51% repeat-x
;
--mask-corner-cut-angles-3:
conic-gradient(from -45deg at 4rem 4rem,#0000 90deg,#000 0)
calc(-1*4rem) 0/100% 51% repeat-x,
conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 90deg,#000 0)
calc(-1*4rem) 100%/100% 51% repeat-x
conic-gradient(from -45deg at 4rem 4rem,#0000 25%,#000 0)
-4rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 25%,#000 0)
-4rem 100%/100% 51% repeat-x
;
}
30 changes: 15 additions & 15 deletions src/props.masks.corner-cuts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@ export default {
'--mask-corner-cut-circles-1': 'radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem',
'--mask-corner-cut-circles-2': 'radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem',
'--mask-corner-cut-circles-3': 'radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem',
'--mask-corner-cut-squares-1': 'conic-gradient(at 1rem 1rem,#000 75%,#0000 0) 0 0/calc(100% - 1rem) calc(100% - 1rem)',
'--mask-corner-cut-squares-2': 'conic-gradient(at 2rem 2rem,#000 75%,#0000 0) 0 0/calc(100% - 2rem) calc(100% - 2rem)',
'--mask-corner-cut-squares-3': 'conic-gradient(at 4rem 4rem,#000 75%,#0000 0) 0 0/calc(100% - 4rem) calc(100% - 4rem)',
'--mask-corner-cut-squares-1': 'conic-gradient(at calc(2*1rem) calc(2*1rem),#000 75%,#0000 0) -1rem -1rem',
'--mask-corner-cut-squares-2': 'conic-gradient(at calc(2*2rem) calc(2*2rem),#000 75%,#0000 0) -2rem -2rem',
'--mask-corner-cut-squares-3': 'conic-gradient(at calc(2*4rem) calc(2*4rem),#000 75%,#0000 0) -4rem -4rem',
'--mask-corner-cut-angles-1': `
conic-gradient(from -45deg at 1rem 1rem,#0000 90deg,#000 0)
calc(-1*1rem) 0/100% 51% repeat-x,
conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 90deg,#000 0)
calc(-1*1rem) 100%/100% 51% repeat-x
conic-gradient(from -45deg at 1rem 1rem,#0000 25%,#000 0)
-1rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 1rem calc(100% - 1rem),#0000 25%,#000 0)
-1rem 100%/100% 51% repeat-x
`,
'--mask-corner-cut-angles-2': `
conic-gradient(from -45deg at 2rem 2rem,#0000 90deg,#000 0)
calc(-1*2rem) 0/100% 51% repeat-x,
conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 90deg,#000 0)
calc(-1*2rem) 100%/100% 51% repeat-x
conic-gradient(from -45deg at 2rem 2rem,#0000 25%,#000 0)
-2rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 2rem calc(100% - 2rem),#0000 25%,#000 0)
-2rem 100%/100% 51% repeat-x
`,
'--mask-corner-cut-angles-3': `
conic-gradient(from -45deg at 4rem 4rem,#0000 90deg,#000 0)
calc(-1*4rem) 0/100% 51% repeat-x,
conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 90deg,#000 0)
calc(-1*4rem) 100%/100% 51% repeat-x
conic-gradient(from -45deg at 4rem 4rem,#0000 25%,#000 0)
-4rem 0 /100% 51% repeat-x,
conic-gradient(from 135deg at 4rem calc(100% - 4rem),#0000 25%,#000 0)
-4rem 100%/100% 51% repeat-x
`,
}