vue-real-button
Version:
Vue Wrapper of Josh Comeau 'real' web button
2 lines (1 loc) • 8.82 kB
JavaScript
import{openBlock as n,createElementBlock as t,createElementVNode as e,normalizeClass as r,normalizeStyle as i,renderSlot as a}from"vue";var o={name:"RealButton",props:{shadowColor:{type:String,default:"transparent"},edgeColor:{type:String,default:"lightblue"},buttonColor:{type:String,default:"#0e59e7"},size:{type:String,default:"default",validator:n=>["small","default","medium","large"].includes(n)},rounded:{type:Boolean,default:!1},type:{type:String,default:"",validator:n=>["link","info","success","warning","danger","link-light","info-light","success-light","warning-light","danger-light","light","dark",""].includes(n)},bold:{type:Boolean,default:!1}},setup:n=>({props:n})};const s={class:"real-button"};!function(n,t){void 0===t&&(t={});var e=t.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}(".real-button {\n position: relative;\n border: none;\n background: transparent;\n padding: 0;\n cursor: pointer;\n outline-offset: 4px;\n transition: filter 250ms; }\n .real-button__shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n will-change: transform;\n border-radius: 5px;\n transform: translateY(0.2rem);\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); }\n .real-button__shadow:hover {\n transform: translateY(4px);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }\n .real-button__shadow:active {\n transform: translateY(0.1rem);\n transition: transform 34ms; }\n .real-button__shadow.is-rounded {\n border-radius: 12px; }\n .real-button__edge {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 70%;\n border-radius: 5px; }\n .real-button__edge.is-rounded {\n border-radius: 12px; }\n .real-button__edge.is-link {\n background: linear-gradient(to left, #243375 0%, #364cb0 8%, #364cb0 92%, #243375 100%) !important; }\n .real-button__edge.is-info {\n background: linear-gradient(to left, #4756ca 0%, #3186b2 8%, #3186b2 92%, #4756ca 100%) !important; }\n .real-button__edge.is-success {\n background: linear-gradient(to left, #1e6243 0%, #309c6b 8%, #309c6b 92%, #1e6243 100%) !important; }\n .real-button__edge.is-danger {\n background: linear-gradient(to left, #8e0b25 0%, #d51038 8%, #d51038 92%, #8e0b25 100%) !important; }\n .real-button__edge.is-warning {\n background: linear-gradient(to left, #b38300 0%, #ffbb00 8%, #ffbb00 92%, #b38300 100%) !important; }\n .real-button__edge.is-link-light {\n background: linear-gradient(to left, #243375 0%, #364cb0 8%, #364cb0 92%, #243375 100%) !important; }\n .real-button__edge.is-info-light {\n background: linear-gradient(to left, #4756ca 0%, #3186b2 8%, #3186b2 92%, #4756ca 100%) !important; }\n .real-button__edge.is-success-light {\n background: linear-gradient(to left, #1e6243 0%, #309c6b 8%, #309c6b 92%, #1e6243 100%) !important; }\n .real-button__edge.is-danger-light {\n background: linear-gradient(to left, #8e0b25 0%, #d51038 8%, #d51038 92%, #8e0b25 100%) !important; }\n .real-button__edge.is-warning-light {\n background: linear-gradient(to left, #b38300 0%, #ffbb00 8%, #ffbb00 92%, #b38300 100%) !important; }\n .real-button__edge.is-light {\n background: linear-gradient(to left, #b3b3b3 0%, #d9d9d9 8%, #d9d9d9 92%, #b3b3b3 100%) !important; }\n .real-button__edge.is-dark {\n background: linear-gradient(to left, #0d0d0d 0%, #262626 8%, #262626 92%, #0d0d0d 100%) !important; }\n .real-button__front {\n display: block;\n position: relative;\n padding: 12px 30px;\n font-size: 1.25rem;\n color: white;\n will-change: transform;\n transform: translateY(-0.5rem);\n border-radius: 5px;\n transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); }\n .real-button__front:hover {\n transform: translateY(-0.7rem);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }\n .real-button__front:active {\n transform: translateY(-0.3rem);\n transition: transform 34ms; }\n .real-button__front.is-bold {\n font-weight: bold; }\n .real-button__front.is-rounded {\n border-radius: 12px; }\n .real-button__front.is-small {\n padding: 12px 25px;\n font-size: 1rem;\n transform: translateY(-0.3rem); }\n .real-button__front.is-small:hover {\n transform: translateY(-0.5rem);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }\n .real-button__front.is-small:active {\n transform: translateY(-0.1rem);\n transition: transform 34ms; }\n .real-button__front.is-medium {\n padding: 12px 35px;\n font-size: 1.5rem;\n transform: translateY(-0.5rem); }\n .real-button__front.is-medium:hover {\n transform: translateY(-0.7rem);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }\n .real-button__front.is-medium:active {\n transform: translateY(-0.3rem);\n transition: transform 34ms; }\n .real-button__front.is-large {\n padding: 12px 42px;\n font-size: 2rem;\n transform: translateY(-0.7rem); }\n .real-button__front.is-large:hover {\n transform: translateY(-0.9rem);\n transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }\n .real-button__front.is-large:active {\n transform: translateY(-0.5rem);\n transition: transform 34ms; }\n .real-button__front.is-link {\n background: #485fc7 !important; }\n .real-button__front.is-info {\n background: #3e8ed0 !important; }\n .real-button__front.is-success {\n background: #48c78e !important; }\n .real-button__front.is-danger {\n background: #f14668 !important; }\n .real-button__front.is-warning {\n background: #ffe08a !important; }\n .real-button__front.is-link-light {\n background: #eff1fa !important;\n color: #3850b7 !important; }\n .real-button__front.is-info-light {\n background: #eff5fb !important;\n color: #296fa8; }\n .real-button__front.is-success-light {\n background: #effaf5 !important;\n color: #257953 !important; }\n .real-button__front.is-danger-light {\n background: #feecf0 !important;\n color: #cc0f35 !important; }\n .real-button__front.is-warning-light {\n background: #fffaeb !important;\n color: #946c00 !important; }\n .real-button__front.is-light {\n background: #f5f5f5 !important;\n color: black !important; }\n .real-button__front.is-dark {\n background: #363636 !important; }\n .real-button:hover {\n filter: brightness(110%); }\n .real-button:focus:not(:focus-visible) {\n outline: none; }\n"),o.render=function(o,l,d,u,g,f){return n(),t("button",s,[e("span",{class:r(["real-button__shadow",{"is-small":"small"===d.size,"is-default":"default"===d.size,"is-medium":"medium"===d.size,"is-large":"large"===d.size,"is-rounded":d.rounded}]),style:i(`background: \n ${d.shadowColor}`)},null,6),e("span",{class:r(["real-button__edge",{"is-small":"small"===d.size,"is-default":"default"===d.size,"is-medium":"medium"===d.size,"is-large":"large"===d.size,"is-link":"link"===d.type,"is-info":"info"===d.type,"is-success":"success"===d.type,"is-danger":"danger"===d.type,"is-light":"light"===d.type,"is-dark":"dark"===d.type,"is-warning":"warning"===d.type,"is-link-light":"link-light"===d.type,"is-info-light":"info-light"===d.type,"is-success-light":"success-light"===d.type,"is-danger-light":"danger-light"===d.type,"is-light-light":"light"===d.type,"is-warning-light":"warning-light"===d.type,"is-rounded":d.rounded}]),style:i(`background: \n ${d.edgeColor}`)},null,6),e("span",{class:r(["real-button__front",{"is-small":"small"===d.size,"is-default":"default"===d.size,"is-medium":"medium"===d.size,"is-large":"large"===d.size,"is-link":"link"===d.type,"is-info":"info"===d.type,"is-success":"success"===d.type,"is-danger":"danger"===d.type,"is-light":"light"===d.type,"is-dark":"dark"===d.type,"is-warning":"warning"===d.type,"is-link-light":"link-light"===d.type,"is-info-light":"info-light"===d.type,"is-success-light":"success-light"===d.type,"is-danger-light":"danger-light"===d.type,"is-light-light":"light"===d.type,"is-warning-light":"warning-light"===d.type,"is-rounded":d.rounded,"is-bold":d.bold}]),style:i(`background: \n ${d.buttonColor}`)},[a(o.$slots,"default")],6)])},o.__file="src/components/RealButton.vue",o.install=function(n){n.component(Button.name,Button)};export{o as default};