WIP

public/src/components/Input.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 
+import {ref} from "vue";
+
 const props = defineProps<{
     value: any,
     label?: string,
@@ -8,44 +10,71 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(["update:value"])
+const focus = ref(false)
 
 </script>
 
 <template>
     <div class="input">
-        <label v-if="label">{{ label }}</label>
+        <label v-if="label" :class="{up: props.value != '' || focus, focus}">{{ label }}</label>
         <input
             :value="value"
             @input="$emit('update:value', $event.target.value)"
             :type="props.type ? props.type : 'text'"
-            :disabled="disabled">
+            :disabled="disabled"
+            @focusin="focus = true"
+            @focusout="focus = false">
     </div>
 </template>
 
 <style scoped lang="less">
 
 .input {
-  display: inline-block;
-  label {
-    display: block;
-    padding-left: 15px;
-    font-size: 14px;
-    color: #727272;
-  }
-  input {
-    font-family: sans-serif;
-    width: calc(100% - 30px);
-    min-width: 0px;
-    outline: none;
-    margin: 0 10px;
-    padding: 5px 5px;
-    color: #121212;
-    border: 1px solid transparent;
-    font-size: 14px;
-    &:not(:disabled){
-      border: 1px solid #cecece;
+    display: inline-block;
+    position: relative;
+
+    label {
+        display: block;
+        font-size: 14px;
+        padding: 2px 4px;
+        color: #727272;
+        position: absolute;
+        top: 12px;
+        left: 10px;
+        z-index: 1;
+        background: #ffffff;
+        pointer-events: none;
+        transition: 100ms top;
+        &.up {
+            top: -8px;
+            font-size: 12px;
+        }
+        &.focus {
+            color: #464646;
+        }
+    }
+
+    input {
+        position: relative;
+        font-family: sans-serif;
+        width: calc(100% - 30px);
+        min-width: 0px;
+        outline: none;
+        margin: 0;
+        padding: 15px 15px;
+        color: #121212;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        font-size: 14px;
+        transition: 100ms border-color;
+
+        &:not(:disabled) {
+            border: 1px solid #cecece;
+            &:focus{
+                border-color: #919191;
+            }
+        }
     }
-  }
 }
 
-</style>
+</style>