Untitled
unknown
html
2 years ago
914 B
6
Indexable
<script setup> import InputLabel from './InputLabel.vue' import { ref } from 'vue' const props = defineProps(['err']) var data = ref('') </script> <template> <div :class="{ 'c--field': true, 'err': props.err } "> <InputLabel :label="props.label"><slot /></InputLabel> <input type="text" /> <span v-if="props.err">{{ props.err }}</span> </div> </template> <style> .c--field { position: relative; height: 32px; } .c--field.err > input { border-color: #ff4040; outline: none; } .c--field:has(input:focus) > label { color: #240488; } .c--field > input { color: var(--clr--black); width: calc(100% - 24px); height: 28px; border: solid 2px var(--clr--black); border-radius: 5px; padding: 0 10px; } .c--field:has(input:focus):not(.err) > input { border-color: #240488; } .c--field > span { color: #ff4040; font-size: 14px; padding: 0 10px; } </style>
Editor is loading...