craft-library 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/craft.js +4 -3
- package/dist/like.js +1 -1
- package/package.json +1 -1
package/dist/craft.js
CHANGED
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
meet, both are at rest there, so nothing hitches. Unliking only takes the colour away. Pairs with like.js. */
|
|
20
20
|
|
|
21
21
|
:root {
|
|
22
|
-
--like-
|
|
22
|
+
--like-heart: #FF6767; /* the liked heart, filled (Figma: General / Heart) */
|
|
23
|
+
--like-color: #F91880; /* the disc */
|
|
23
24
|
--like-ring: #CC8EF5; /* the ring as it opens */
|
|
24
25
|
--like-spring: cubic-bezier(.34, 1.4, .64, 1); /* fallback for browsers without linear() */
|
|
25
26
|
}
|
|
@@ -83,12 +84,12 @@
|
|
|
83
84
|
transition: stroke .24s cubic-bezier(.4, 0, .2, 1);
|
|
84
85
|
}
|
|
85
86
|
.like-fill {
|
|
86
|
-
fill: var(--like-
|
|
87
|
+
fill: var(--like-heart);
|
|
87
88
|
opacity: 0;
|
|
88
89
|
transition: opacity .24s cubic-bezier(.4, 0, .2, 1);
|
|
89
90
|
}
|
|
90
91
|
.like[aria-pressed="true"] .like-line {
|
|
91
|
-
stroke: var(--like-
|
|
92
|
+
stroke: var(--like-heart);
|
|
92
93
|
}
|
|
93
94
|
.like[aria-pressed="true"] .like-fill {
|
|
94
95
|
opacity: 1;
|
package/dist/like.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Bursting heart · Craft Library, by Sara Lobo. like.css and like.js from the library, unchanged, around a mount.
|
|
2
2
|
import { css } from './style.js';
|
|
3
|
-
const CSS = "/* Bursting heart · Craft Library, by Sara Lobo\n The heart eases out of sight, a disc grows and hollows into a ring, 14 dots and 2 or 3 small hearts fly out,\n and the heart springs back full. Every motion runs on its own property with its own curve; where two curves\n meet, both are at rest there, so nothing hitches. Unliking only takes the colour away. Pairs with like.js. */\n\n:root {\n --like-
|
|
3
|
+
const CSS = "/* Bursting heart · Craft Library, by Sara Lobo\n The heart eases out of sight, a disc grows and hollows into a ring, 14 dots and 2 or 3 small hearts fly out,\n and the heart springs back full. Every motion runs on its own property with its own curve; where two curves\n meet, both are at rest there, so nothing hitches. Unliking only takes the colour away. Pairs with like.js. */\n\n:root {\n --like-heart: #FF6767; /* the liked heart, filled (Figma: General / Heart) */\n --like-color: #F91880; /* the disc */\n --like-ring: #CC8EF5; /* the ring as it opens */\n --like-spring: cubic-bezier(.34, 1.4, .64, 1); /* fallback for browsers without linear() */\n}\n\n/* a damped spring (damping .55, 700 ms): about 12% over, a short settle, at rest at the end */\n@supports (animation-timing-function: linear(0, 1)) {\n :root {\n --like-spring: linear(0, 0.034, 0.12, 0.24, 0.378, 0.52, 0.655, 0.778, 0.883, 0.968, 1.033, 1.079, 1.108, 1.123, 1.126, 1.12, 1.108, 1.092, 1.075, 1.057, 1.04, 1.025, 1.012, 1.002, 0.994, 0.989, 0.986, 0.984, 0.984, 0.985, 0.987, 0.989, 0.991, 0.993, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);\n }\n}\n\n/* lets the ring's hole open smoothly (without it, the ring leaves at once) */\n@property --like-hole {\n syntax: '<percentage>';\n inherits: false;\n initial-value: 0%;\n}\n\n/* the button: a 40px circle in black at 60%, made to sit over images */\n.like {\n all: unset;\n box-sizing: border-box;\n position: relative;\n display: inline-block;\n flex: none;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(0, 0, 0, .6);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);\n}\n.like:hover {\n background: rgba(0, 0, 0, .72);\n}\n.like:active {\n transform: scale(.94);\n}\n.like:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 2px;\n}\n.like-icon {\n position: absolute;\n left: 8px;\n top: 9px;\n width: 24px;\n height: 24px;\n}\n.like-icon svg {\n display: block;\n overflow: visible;\n}\n.like-line {\n fill: none;\n stroke: #fff;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: stroke .24s cubic-bezier(.4, 0, .2, 1);\n}\n.like-fill {\n fill: var(--like-heart);\n opacity: 0;\n transition: opacity .24s cubic-bezier(.4, 0, .2, 1);\n}\n.like[aria-pressed=\"true\"] .like-line {\n stroke: var(--like-heart);\n}\n.like[aria-pressed=\"true\"] .like-fill {\n opacity: 1;\n}\n/* the colour swaps while the heart is out of sight */\n.like.is-liking .like-line,\n.like.is-liking .like-fill {\n transition-duration: 0s;\n transition-delay: .3s;\n}\n/* everything that flies out starts from the heart's centre */\n.like-fx {\n position: absolute;\n left: 20px;\n top: 21px;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n\n/* the heart: out of sight in 120 ms, waits inside the disc, then the spring brings it back full */\n.like.is-liking .like-icon {\n animation: like-vanish .12s cubic-bezier(.5, 0, .75, 0) both, like-return .7s var(--like-spring) .32s forwards;\n}\n@keyframes like-vanish {\n from {\n scale: 1;\n opacity: 1;\n }\n to {\n scale: .15;\n opacity: 0;\n }\n}\n@keyframes like-return {\n from {\n scale: .15;\n opacity: 0;\n }\n to {\n scale: 1;\n opacity: 1;\n }\n}\n\n/* unliking: a soft dip and back while the colour leaves, at rest at both ends */\n.like.is-unliking .like-icon {\n animation: like-dip .34s cubic-bezier(.37, 0, .63, 1);\n}\n@keyframes like-dip {\n 0% {\n scale: 1;\n }\n 40% {\n scale: .86;\n }\n 100% {\n scale: 1;\n }\n}\n\n/* the ring: one long ease-out growth (to 110%), the tint, and a hole that opens before the growth ends */\n.like-ring {\n position: absolute;\n left: -23px;\n top: -23px;\n width: 46px;\n height: 46px;\n border-radius: 50%;\n background: var(--like-color);\n scale: 0;\n -webkit-mask: radial-gradient(circle closest-side, transparent var(--like-hole), #000 calc(var(--like-hole) + 2%));\n mask: radial-gradient(circle closest-side, transparent var(--like-hole), #000 calc(var(--like-hole) + 2%));\n}\n.like.is-liking .like-ring {\n animation: like-ring-grow .56s cubic-bezier(.22, 1, .36, 1) .06s both, like-ring-tint .3s ease-out .06s both, like-ring-open .36s cubic-bezier(.33, 1, .68, 1) .28s both;\n}\n@keyframes like-ring-grow {\n from {\n scale: 0;\n }\n to {\n scale: 1.1;\n }\n}\n@keyframes like-ring-tint {\n from {\n background-color: var(--like-color);\n }\n to {\n background-color: var(--like-ring);\n }\n}\n@keyframes like-ring-open {\n from {\n --like-hole: 0%;\n }\n to {\n --like-hole: 100%;\n }\n}\n\n/* the dots: 7 pairs around the ring. They fly out on a long ease-out, swell and shrink on their own clock,\n and the whole spray turns 12° as it goes */\n.like-dots i {\n position: absolute;\n left: 0;\n top: 0;\n width: 0;\n height: 0;\n transform: rotate(var(--a));\n}\n.like-dots b {\n position: absolute;\n left: -2.5px;\n top: -2.5px;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--d1);\n scale: 0;\n}\n.like-dots b + b {\n left: -1.75px;\n top: -1.75px;\n width: 3.5px;\n height: 3.5px;\n background: var(--d2);\n}\n.like-dots i:nth-child(1) { --a: 0deg; --d1: #F91880; --d2: #FF7AB6; }\n.like-dots i:nth-child(2) { --a: 51.43deg; --d1: #FFAD1F; --d2: #FFD166; }\n.like-dots i:nth-child(3) { --a: 102.86deg; --d1: #1D9BF0; --d2: #7CC6FE; }\n.like-dots i:nth-child(4) { --a: 154.29deg; --d1: #A78BFA; --d2: #C4B5FD; }\n.like-dots i:nth-child(5) { --a: 205.71deg; --d1: #00BA7C; --d2: #6EE7B7; }\n.like-dots i:nth-child(6) { --a: 257.14deg; --d1: #F97316; --d2: #FDBA74; }\n.like-dots i:nth-child(7) { --a: 308.57deg; --d1: #F91880; --d2: #CC8EF5; }\n.like.is-liking .like-dots i {\n animation: like-swirl .9s cubic-bezier(.22, 1, .36, 1) .34s both;\n}\n.like.is-liking .like-dots b {\n animation: like-fly .62s cubic-bezier(.16, 1, .3, 1) .34s both, like-dot .62s .34s both;\n}\n.like.is-liking .like-dots b + b {\n animation-name: like-fly-2, like-dot;\n animation-delay: .38s;\n}\n@keyframes like-swirl {\n from {\n rotate: 0deg;\n }\n to {\n rotate: 12deg;\n }\n}\n@keyframes like-fly {\n from {\n translate: 0 -20px;\n }\n to {\n translate: 0 -33px;\n }\n}\n@keyframes like-fly-2 {\n from {\n translate: 4.5px -18px;\n }\n to {\n translate: 8px -29px;\n }\n}\n@keyframes like-dot {\n 0% {\n scale: 0;\n animation-timing-function: cubic-bezier(.33, 1, .68, 1);\n }\n 24% {\n scale: 1;\n animation-timing-function: cubic-bezier(.32, 0, .67, 0);\n }\n 100% {\n scale: 0;\n }\n}\n\n/* the small hearts (like.js adds them): the rise is one unbroken ease-out, the sway a sine that rests at its turns,\n and size and fade keep their own clocks */\n.like-float {\n position: absolute;\n left: 0;\n top: -6px;\n opacity: 0;\n animation: like-rise var(--dur) cubic-bezier(.33, 1, .68, 1) var(--dl) both, like-fade var(--dur) var(--dl) both;\n}\n.like-float span {\n display: block;\n animation: like-sway var(--dur) cubic-bezier(.37, 0, .63, 1) var(--dl) both, like-grow var(--dur) var(--dl) both;\n}\n.like-float svg {\n display: block;\n width: var(--s);\n height: var(--s);\n margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);\n fill: var(--fc);\n}\n@keyframes like-rise {\n from {\n translate: 0 0;\n }\n to {\n translate: 0 var(--dy);\n }\n}\n@keyframes like-fade {\n 0% {\n opacity: 0;\n animation-timing-function: cubic-bezier(.33, 1, .68, 1);\n }\n 14% {\n opacity: 1;\n animation-timing-function: linear;\n }\n 50% {\n opacity: 1;\n animation-timing-function: cubic-bezier(.37, 0, .63, 1);\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes like-sway {\n 0% {\n translate: 0 0;\n rotate: 0deg;\n }\n 33% {\n translate: var(--dx) 0;\n rotate: var(--r);\n }\n 70% {\n translate: calc(var(--dx) * -.6) 0;\n rotate: calc(var(--r) * -.6);\n }\n 100% {\n translate: calc(var(--dx) * .25) 0;\n rotate: 0deg;\n }\n}\n@keyframes like-grow {\n 0% {\n scale: .3;\n animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);\n }\n 24% {\n scale: 1;\n animation-timing-function: cubic-bezier(.32, 0, .67, 0);\n }\n 100% {\n scale: .8;\n }\n}\n\n/* less motion: only the colour changes */\n@media (prefers-reduced-motion: reduce) {\n .like,\n .like * {\n animation: none !important;\n }\n}\n";
|
|
4
4
|
const INNER = "<span class=\"like-fx\" aria-hidden=\"true\"><span class=\"like-ring\"></span><span class=\"like-dots\"><i><b></b><b></b></i><i><b></b><b></b></i><i><b></b><b></b></i><i><b></b><b></b></i><i><b></b><b></b></i><i><b></b><b></b></i><i><b></b><b></b></i></span></span><span class=\"like-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path class=\"like-fill\" d=\"M19.0711 13.1421L13.4142 18.799C12.6332 19.58 11.3668 19.58 10.5858 18.799L4.92893 13.1421C2.97631 11.1895 2.97631 8.02369 4.92893 6.07107C6.88155 4.11845 10.0474 4.11845 12 6.07107C13.9526 4.11845 17.1184 4.11845 19.0711 6.07107C21.0237 8.02369 21.0237 11.1895 19.0711 13.1421Z\"></path><path class=\"like-line\" d=\"M19.0711 13.1421L13.4142 18.799C12.6332 19.58 11.3668 19.58 10.5858 18.799L4.92893 13.1421C2.97631 11.1895 2.97631 8.02369 4.92893 6.07107C6.88155 4.11845 10.0474 4.11845 12 6.07107C13.9526 4.11845 17.1184 4.11845 19.0711 6.07107C21.0237 8.02369 21.0237 11.1895 19.0711 13.1421Z\"></path></svg></span>";
|
|
5
5
|
let api;
|
|
6
6
|
function engine() {
|
package/package.json
CHANGED