80 lines
1.5 KiB
Vue
80 lines
1.5 KiB
Vue
<template>
|
|
<div class="form__group field">
|
|
<input class="form__field" :type="type" :placeholder="placeholder" :style="{height: height + 'vh', width: width + 'vw'} " name="name" id="name" :required="required" />
|
|
<label for="name" class="form__label">{{placeholder}}</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
height: Number,
|
|
width: Number,
|
|
type: String,
|
|
placeholder: String,
|
|
required: Boolean,
|
|
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.form__group {
|
|
position: relative;
|
|
padding: 15px 0 0;
|
|
margin-top: 10px;
|
|
width: 50%;
|
|
}
|
|
|
|
.form__field {
|
|
font-family: inherit;
|
|
width: 100%;
|
|
border: 0;
|
|
border-bottom: 2px solid #F1F5F5;
|
|
outline: 0;
|
|
font-size: 1.3rem;
|
|
color: #F1F5F5;
|
|
padding: 7px 0;
|
|
background: transparent;
|
|
transition: border-color 0.2s;
|
|
|
|
&::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
&:placeholder-shown ~ .form__label {
|
|
font-size: 1.3rem;
|
|
cursor: text;
|
|
top: 20px;
|
|
}
|
|
}
|
|
|
|
.form__label {
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
transition: 0.2s;
|
|
font-size: 1rem;
|
|
color: #F1F5F5;
|
|
}
|
|
|
|
.form__field:focus {
|
|
~ .form__label {
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
transition: 0.2s;
|
|
font-size: 1rem;
|
|
color: #F1F5F5;
|
|
font-weight:700;
|
|
}
|
|
padding-bottom: 6px;
|
|
font-weight: 700;
|
|
border-width: 3px;
|
|
border-image: linear-gradient(to right, #F1F5F5,#F1F5F5);
|
|
border-image-slice: 1;
|
|
}
|
|
/* reset input */
|
|
.form__field{
|
|
&:required,&:invalid { box-shadow:none; }
|
|
}
|
|
</style> |