| 1 | // big thanks to Temani Afif: https://twitter.com/ChallengesCss
|
| 2 | // https://github.com/argyleink/open-props/discussions/71
|
| 3 | export default {
|
| 4 | '--mask-edge-scoop-bottom': 'radial-gradient(20px at 50% 100%,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%',
|
| 5 | '--mask-edge-scoop-top': 'radial-gradient(20px at 50% 0,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%',
|
| 6 | '--mask-edge-scoop-vertical': 'radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% -20px/ calc(1.9 * 20px) 100%',
|
| 7 | '--mask-edge-scoop-left': 'radial-gradient(20px at 0 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px)',
|
| 8 | '--mask-edge-scoop-right': 'radial-gradient(20px at 100% 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px)',
|
| 9 | '--mask-edge-scoop-horizontal': 'radial-gradient(20px at 20px 50%,#0000 97%,#000) -20px/ 100% calc(1.9 * 20px)',
|
| 10 | '--mask-edge-scalloped': `
|
| 11 | radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
|
| 12 | linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
|
| 13 | `,
|
| 14 | '--mask-edge-scalloped-bottom': `
|
| 15 | linear-gradient(to top,#0000 20px,#000 0),
|
| 16 | radial-gradient(20px at top,#000 97%,#0000) bottom / calc(1.9 * 20px) 20px
|
| 17 | `,
|
| 18 | '--mask-edge-scalloped-top': `
|
| 19 | linear-gradient(to bottom,#0000 20px,#000 0),
|
| 20 | radial-gradient(20px at bottom,#000 97%,#0000) top / calc(1.9 * 20px) 20px
|
| 21 | `,
|
| 22 | '--mask-edge-scalloped-vertical': `
|
| 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(to right,#0000 20px,#000 0),
|
| 28 | radial-gradient(20px at right,#000 97%,#0000) left / 20px calc(1.9 * 20px)
|
| 29 | `,
|
| 30 | '--mask-edge-scalloped-right': `
|
| 31 | linear-gradient(to left,#0000 20px,#000 0),
|
| 32 | radial-gradient(20px at left,#000 97%,#0000) right / 20px calc(1.9 * 20px)
|
| 33 | `,
|
| 34 | '--mask-edge-scalloped-horizontal': `
|
| 35 | linear-gradient(-90deg,#0000 calc(2 * 20px),#000 0) 20px,
|
| 36 | radial-gradient(20px,#000 97%,#0000) 50% / calc(2 * 20px) calc(1.9 * 20px) space repeat
|
| 37 | `,
|
| 38 | '--mask-edge-drip-bottom': `
|
| 39 | radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
|
| 40 | radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
|
| 41 | `,
|
| 42 | '--mask-edge-drip-top': `
|
| 43 | radial-gradient(20px at top,#0000 97%,#000) 50% 20px / calc(2 * 20px) 100% repeat-x,
|
| 44 | radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x
|
| 45 | `,
|
| 46 | '--mask-edge-drip-vertical': `
|
| 47 | radial-gradient(20px at top ,#0000 97%,#000) 50% 20px / calc(2 * 20px) 51% repeat-x,
|
| 48 | radial-gradient(20px at bottom,#0000 97%,#000) 50% calc(100% - 20px) / calc(2 * 20px) 51% repeat-x,
|
| 49 | radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x,
|
| 50 | radial-gradient(20px at 25% 50%,#000 97%,#0000) calc(50% - 3*20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x
|
| 51 | `,
|
| 52 | '--mask-edge-drip-left': `
|
| 53 | radial-gradient(20px at left,#0000 97%,#000) 20px 50% / 100% calc(2 * 20px) repeat-y,
|
| 54 | radial-gradient(20px at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
|
| 55 | `,
|
| 56 | '--mask-edge-drip-right': `
|
| 57 | radial-gradient(20px at right,#0000 97%,#000) calc(100% - 20px) 50% / 100% calc(2 * 20px) repeat-y,
|
| 58 | radial-gradient(20px at 50% 25%,#000 97%,#0000) 99% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
|
| 59 | `,
|
| 60 | '--mask-edge-drip-horizontal': `
|
| 61 | radial-gradient(20px at left ,#0000 97%,#000) 20px 50% / 51% calc(2 * 20px) repeat-y,
|
| 62 | radial-gradient(20px at right,#0000 97%,#000) calc(100% - 20px) 50% / 51% calc(2 * 20px) repeat-y,
|
| 63 | radial-gradient(20px at 50% 25%,#000 97%,#0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y,
|
| 64 | radial-gradient(20px at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*20px) / calc(2 * 20px) calc(4 * 20px) repeat-y
|
| 65 | `,
|
| 66 | '--mask-edge-zig-zag-top': 'conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%',
|
| 67 | '--mask-edge-zig-zag-bottom': 'conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%',
|
| 68 | '--mask-edge-zig-zag-left': 'conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) 50% / 100% calc(2 * 20px)',
|
| 69 | '--mask-edge-zig-zag-right': 'conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) 50% / 100% calc(2 * 20px)',
|
| 70 | '--mask-edge-zig-zag-horizontal': `
|
| 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 | `,
|
| 74 | '--mask-edge-zig-zag-vertical': `
|
| 75 | conic-gradient(from 135deg at top ,#0000,#000 1deg 90deg,#0000 91deg) top / calc(2 * 20px) 51% repeat-x,
|
| 76 | conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom / calc(2 * 20px) 51% repeat-x
|
| 77 | `,
|
| 78 | }
|