twitter-like-button
Version:
This is the functional twitter like button which you can integrate to your project. To give extra ordinary look
1 lines • 12.6 kB
JavaScript
!function(){"use strict";var e={806:function(e,n,r){var t=r(81),a=r.n(t),c=r(645),l=r.n(c)()(a());l.push([e.id,"svg {\n cursor: pointer;\n overflow: visible;\n width: 60px;\n}\nsvg #heart {\n transform-origin: center;\n animation: animateHeartOut 0.3s linear forwards;\n}\nsvg #parent-circle {\n transform-origin: 29.5px 29.5px;\n}\n\n#heart-checkbox {\n display: none;\n}\n\n#heart-checkbox:checked + label svg #heart {\n transform: scale(0.2);\n fill: #e2264d;\n animation: animateHeart 0.3s linear forwards 0.25s;\n}\n#heart-checkbox:checked + label svg #parent-circle {\n transition: all 2s;\n animation: animateCircle 0.3s linear forwards;\n opacity: 1;\n}\n#heart-checkbox:checked + label svg #circleGrp1 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp1 #oval1 {\n transform: scale(0) translate(0, -30px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp1 #oval2 {\n transform: scale(0) translate(10px, -50px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp2 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp2 #oval1 {\n transform: scale(0) translate(30px, -15px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp2 #oval2 {\n transform: scale(0) translate(60px, -15px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp3 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp3 #oval1 {\n transform: scale(0) translate(30px, 0px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp3 #oval2 {\n transform: scale(0) translate(60px, 10px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp4 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp4 #oval1 {\n transform: scale(0) translate(30px, 15px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp4 #oval2 {\n transform: scale(0) translate(40px, 50px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp5 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp5 #oval1 {\n transform: scale(0) translate(-10px, 20px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp5 #oval2 {\n transform: scale(0) translate(-60px, 30px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp6 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp6 #oval1 {\n transform: scale(0) translate(-30px, 0px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp6 #oval2 {\n transform: scale(0) translate(-60px, -5px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp7 {\n opacity: 1;\n transition: 0.1s all 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp7 #oval1 {\n transform: scale(0) translate(-30px, -15px);\n transform-origin: 0 0 0;\n transition: 0.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp7 #oval2 {\n transform: scale(0) translate(-55px, -30px);\n transform-origin: 0 0 0;\n transition: 1.5s transform 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp2 {\n opacity: 1;\n transition: 0.1s opacity 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp3 {\n opacity: 1;\n transition: 0.1s opacity 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp4 {\n opacity: 1;\n transition: 0.1s opacity 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp5 {\n opacity: 1;\n transition: 0.1s opacity 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp6 {\n opacity: 1;\n transition: 0.1s opacity 0.3s;\n}\n#heart-checkbox:checked + label svg #circleGrp7 {\n opacity: 1;\n transition: 0.1s opacity 0.3s;\n}\n\n@keyframes animateCircle {\n 40% {\n transform: scale(10);\n opacity: 1;\n fill: #dd4688;\n }\n 55% {\n transform: scale(11);\n opacity: 1;\n fill: #d46abf;\n }\n 65% {\n transform: scale(12);\n opacity: 1;\n fill: #cc8ef5;\n }\n 75% {\n transform: scale(13);\n opacity: 1;\n fill: transparent;\n stroke: #cc8ef5;\n stroke-width: 0.5;\n }\n 85% {\n transform: scale(17);\n opacity: 1;\n fill: transparent;\n stroke: #cc8ef5;\n stroke-width: 0.2;\n }\n 95% {\n transform: scale(18);\n opacity: 1;\n fill: transparent;\n stroke: #cc8ef5;\n stroke-width: 0.1;\n }\n 100% {\n transform: scale(19);\n opacity: 1;\n fill: transparent;\n stroke: #cc8ef5;\n stroke-width: 0;\n }\n}\n@keyframes animateHeart {\n 0% {\n transform: scale(0.2);\n }\n 40% {\n transform: scale(1.2);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes animateHeartOut {\n 0% {\n transform: scale(1.4);\n }\n 100% {\n transform: scale(1);\n }\n}",""]),n.Z=l},645:function(e){e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var r="",t=void 0!==n[5];return n[4]&&(r+="@supports (".concat(n[4],") {")),n[2]&&(r+="@media ".concat(n[2]," {")),t&&(r+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),r+=e(n),t&&(r+="}"),n[2]&&(r+="}"),n[4]&&(r+="}"),r})).join("")},n.i=function(e,r,t,a,c){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(t)for(var o=0;o<this.length;o++){var i=this[o][0];null!=i&&(l[i]=!0)}for(var s=0;s<e.length;s++){var f=[].concat(e[s]);t&&l[f[0]]||(void 0!==c&&(void 0===f[5]||(f[1]="@layer".concat(f[5].length>0?" ".concat(f[5]):""," {").concat(f[1],"}")),f[5]=c),r&&(f[2]?(f[1]="@media ".concat(f[2]," {").concat(f[1],"}"),f[2]=r):f[2]=r),a&&(f[4]?(f[1]="@supports (".concat(f[4],") {").concat(f[1],"}"),f[4]=a):f[4]="".concat(a)),n.push(f))}},n}},81:function(e){e.exports=function(e){return e[1]}},255:function(e,n,r){r.r(n);var t=r(379),a=r.n(t),c=r(795),l=r.n(c),o=r(569),i=r.n(o),s=r(565),f=r.n(s),p=r(216),d=r.n(p),u=r(589),h=r.n(u),m=r(806),v={};v.styleTagTransform=h(),v.setAttributes=f(),v.insert=i().bind(null,"head"),v.domAPI=l(),v.insertStyleElement=d(),a()(m.Z,v),n.default=m.Z&&m.Z.locals?m.Z.locals:void 0},379:function(e){var n=[];function r(e){for(var r=-1,t=0;t<n.length;t++)if(n[t].identifier===e){r=t;break}return r}function t(e,t){for(var c={},l=[],o=0;o<e.length;o++){var i=e[o],s=t.base?i[0]+t.base:i[0],f=c[s]||0,p="".concat(s," ").concat(f);c[s]=f+1;var d=r(p),u={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(-1!==d)n[d].references++,n[d].updater(u);else{var h=a(u,t);t.byIndex=o,n.splice(o,0,{identifier:p,updater:h,references:1})}l.push(p)}return l}function a(e,n){var r=n.domAPI(n);return r.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;r.update(e=n)}else r.remove()}}e.exports=function(e,a){var c=t(e=e||[],a=a||{});return function(e){e=e||[];for(var l=0;l<c.length;l++){var o=r(c[l]);n[o].references--}for(var i=t(e,a),s=0;s<c.length;s++){var f=r(c[s]);0===n[f].references&&(n[f].updater(),n.splice(f,1))}c=i}}},569:function(e){var n={};e.exports=function(e,r){var t=function(e){if(void 0===n[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}n[e]=r}return n[e]}(e);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(r)}},216:function(e){e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:function(e,n,r){e.exports=function(e){var n=r.nc;n&&e.setAttribute("nonce",n)}},795:function(e){e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(r){!function(e,n,r){var t="";r.supports&&(t+="@supports (".concat(r.supports,") {")),r.media&&(t+="@media ".concat(r.media," {"));var a=void 0!==r.layer;a&&(t+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),t+=r.css,a&&(t+="}"),r.media&&(t+="}"),r.supports&&(t+="}");var c=r.sourceMap;c&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(c))))," */")),n.styleTagTransform(t,e,n.options)}(n,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:function(e){e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},689:function(e){e.exports=require("react")}},n={};function r(t){var a=n[t];if(void 0!==a)return a.exports;var c=n[t]={id:t,exports:{}};return e[t](c,c.exports,r),c.exports}r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,{a:n}),n},r.d=function(e,n){for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var t={};!function(){var e=t;Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(e){var n=e.isLiked,r=e.onClick,t=e.width,c=e.height;return a.default.createElement(a.default.Fragment,null,a.default.createElement("input",{type:"checkbox",id:"heart-checkbox",onChange:function(e){return r(e.target.checked)},checked:n}),a.default.createElement("label",{htmlFor:"heart-checkbox"},a.default.createElement("svg",{id:"heart-svg",viewBox:"467 392 58 57",xmlns:"http://www.w3.org/2000/svg",height:c,width:t},a.default.createElement("g",{id:"circle-groups",fill:"none","fill-rule":"evenodd",transform:"translate(467 392)"},a.default.createElement("path",{d:"M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z",id:"heart",fill:"#AAB8C2"}),a.default.createElement("circle",{id:"parent-circle",fill:"#E2264D",opacity:"0",cx:"29.5",cy:"29.5",r:"1.5"}),a.default.createElement("g",{id:"circleGrp7",opacity:"0",transform:"translate(7 6)"},a.default.createElement("circle",{id:"oval1",fill:"#9CD8C3",cx:"2",cy:"6",r:"2"}),a.default.createElement("circle",{id:"oval2",fill:"#8CE8C3",cx:"5",cy:"2",r:"2"})),a.default.createElement("g",{id:"circleGrp6",opacity:"0",transform:"translate(0 28)"},a.default.createElement("circle",{id:"oval1",fill:"#CC8EF5",cx:"2",cy:"7",r:"2"}),a.default.createElement("circle",{id:"oval2",fill:"#91D2FA",cx:"3",cy:"2",r:"2"})),a.default.createElement("g",{id:"circleGrp3",opacity:"0",transform:"translate(52 28)"},a.default.createElement("circle",{id:"oval2",fill:"#9CD8C3",cx:"2",cy:"7",r:"2"}),a.default.createElement("circle",{id:"oval1",fill:"#8CE8C3",cx:"4",cy:"2",r:"2"})),a.default.createElement("g",{id:"circleGrp2",opacity:"0",transform:"translate(44 6)"},a.default.createElement("circle",{id:"oval2",fill:"#CC8EF5",cx:"5",cy:"6",r:"2"}),a.default.createElement("circle",{id:"oval1",fill:"#CC8EF5",cx:"2",cy:"2",r:"2"})),a.default.createElement("g",{id:"circleGrp5",opacity:"0",transform:"translate(14 50)"},a.default.createElement("circle",{id:"oval1",fill:"#91D2FA",cx:"6",cy:"5",r:"2"}),a.default.createElement("circle",{id:"oval2",fill:"#91D2FA",cx:"2",cy:"2",r:"2"})),a.default.createElement("g",{id:"circleGrp4",opacity:"0",transform:"translate(35 50)"},a.default.createElement("circle",{id:"oval1",fill:"#F48EA7",cx:"6",cy:"5",r:"2"}),a.default.createElement("circle",{id:"oval2",fill:"#F48EA7",cx:"2",cy:"2",r:"2"})),a.default.createElement("g",{id:"circleGrp1",opacity:"0",transform:"translate(24)"},a.default.createElement("circle",{id:"oval1",fill:"#9FC7FA",cx:"2.5",cy:"3",r:"2"}),a.default.createElement("circle",{id:"oval2",fill:"#9FC7FA",cx:"7.5",cy:"2",r:"2"}))))))};var n,a=(n=r(689))&&n.__esModule?n:{default:n};r(255)}(),module.exports=t}();