Adjust styles for example component

Author: Demivan

src/components/SimpleInput.vue

@@ -2,37 +2,20 @@
   <div>
     <simple :user-name="userName" :user-gender="userGender" :photo-count="photoCount" class="demo" />
 
-    <div class="p-fluid p-py-3">
-      <div class="p-field p-grid">
-        <label for="userName" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">$userName</label>
-        <div class="p-col-12 p-md-10">
-          <p-input v-model="userName" id="userName" />
-        </div>
+    <div>
+      <div class="group">
+        <input v-model="userName" type="text" id="userName" />
+        <label for="userName">$userName</label>
       </div>
-      <div class="p-field p-grid">
-        <label for="userGender" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">$userGender</label>
-        <div class="p-col-12 p-md-10">
-          <p-dropdown v-model="userGender" id="userGender" :options="genderOptions" append-to='self' />
-        </div>
+      <div class="group">
+        <select v-model="userGender" id="userGender">
+          <option v-for="gender in genderOptions" :key="gender" :value="gender">{{ gender }}</option>
+        </select>
+        <label for="userGender">$userGender</label>
       </div>
-      <div class="p-field p-grid">
-        <label for="photoCount" class="form-label">$photoCount</label>
-        <input
-          v-model.number="photoCount"
-          type="range"
-          min="1"
-          max="5"
-          class="
-            form-range
-            appearance-none
-            w-full
-            h-6
-            p-0
-            bg-transparent
-            focus:outline-none focus:ring-0 focus:shadow-none
-          "
-          id="photoCount"
-        />
+      <div class="group">
+        <input v-model.number="photoCount" type="range" min="1" max="5" id="photoCount" />
+        <label for="photoCount">$photoCount</label>
       </div>
     </div>
   </div>
@@ -54,20 +37,46 @@
   ]
 </script>
 
-<style>
-  dl {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  dt {
-    width: 100px;
-  }
-
+<style scoped>
   .demo {
     padding: 1rem 1.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
   }
+
+  .group {
+    position: relative;
+    margin-top: 30px;
+  }
+
+  label {
+    color: #c6c6c6;
+    font-size: 16px;
+    font-weight: normal;
+    position: absolute;
+    left: 5px;
+    top: 10px;
+  }
+
+  input, select {
+    background: none;
+    color: white;
+    font-size: 18px;
+    padding: 10px 10px 10px 5px;
+    display: block;
+    width: 320px;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid var(--vp-c-text-2);
+  }
+  
+  input:focus {
+    outline: none;
+  }
+  
+  input ~ label, select ~ label {
+    top: -14px;
+    font-size: 12px;
+    color: var(--vp-c-text-2);
+  }
 </style>

src/introduction.md

@@ -8,14 +8,13 @@ Fluent keeps simple things simple and makes complex things possible. The syntax
 
 ## Example
 
-::: info Example
-
-<simple-input />
-
-:::
-
 <<< @/components/Simple.vue#snippet
 
 <script setup>
   import SimpleInput from './components/SimpleInput.vue'
 </script>
+
+
+::: info Example
+<simple-input />
+:::