UNPKG

ddu_components

Version:

27 lines (25 loc) 2.39 kB
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(`.ddu_input_group{position:relative;margin-top:20px}.ddu_input_group .input{font-size:16px;padding:10px 10px 10px 5px;display:block;width:200px;border:none;border-bottom:1px solid #515151;background:transparent}.ddu_input_group .input:focus{outline:none}.ddu_input_group label{color:#999;font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.ddu_input_group .input:focus~label,.ddu_input_group .input:valid~label{top:-20px;font-size:14px;color:#5264ae}.ddu_input_group .bar{position:relative;display:block;width:200px}.ddu_input_group .bar:before,.ddu_input_group .bar:after{content:"";height:2px;width:0;bottom:1px;position:absolute;background:#5264ae;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.ddu_input_group .bar:before{left:50%}.ddu_input_group .bar:after{right:50%}.ddu_input_group .input:focus~.bar:before,.ddu_input_group .input:focus~.bar:after{width:50%}.ddu_input_group .highlight{position:absolute;height:60%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.ddu_input_group .input:focus~.highlight{animation:inputHighlighter .3s ease}@keyframes inputHighlighter{0%{background:#5264ae}to{width:0;background:transparent}} .theme-light .ddu_input_group input{border-bottom:1px solid #515151}.theme-dark .ddu_input_group input{border-bottom:1px solid red}.theme-custom .ddu_input_group input{border-bottom:1px solid yellow}`)),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(); import { openBlock as l, createElementBlock as n, createElementVNode as e } from "vue"; /* empty css */ const o = { class: "ddu_input_group" }, a = ["value"], c = /* @__PURE__ */ e("span", { class: "highlight" }, null, -1), u = /* @__PURE__ */ e("span", { class: "bar" }, null, -1), _ = /* @__PURE__ */ e("label", null, "Name", -1), m = { __name: "index", props: ["value"], setup(t) { const s = t; return (i, p) => (l(), n("div", o, [ e("input", { required: "", type: "text", class: "input", value: s.value }, null, 8, a), c, u, _ ])); } }; export { m as default };