Make description multiline and fix css

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html

@@ -6,11 +6,6 @@
     <label>Item Name</label>
   </div>
 
-  <div class="frame-item">
-    <input type="text" [(ngModel)]="newItem.description" name="ItemDesc" placeholder=" " />
-    <label>Description</label>
-  </div>
-
   <div class="frame-item">
     <input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
     <label>Cost</label>
@@ -21,6 +16,11 @@
     <label>URL</label>
   </div>
 
+    <div class="frame-item">
+      <textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
+      <label>Description</label>
+    </div>
+
   <div class="frame-item">
     <!-- Need to fix for image file upload -->
      <div id="FileUploadPlaceholder" ></div>

src/MistoxWebsite.Client/src/styles.css

@@ -103,6 +103,31 @@ main {
         font-size: 12px;
     }
 
+    .big-frame .frame-item textarea:autofill,
+    .big-frame .frame-item textarea:-webkit-autofill,
+    .big-frame .frame-item textarea {
+        position: relative;
+        width: calc(100% - 40px);
+        margin: 0 20px;
+        padding: 10px 0;
+        font-size: 15px;
+        color: var(--Mistox-White);
+        margin-bottom: 30px;
+        border: none;
+        border-bottom: 1px solid var(--Mistox-White);
+        outline: none;
+        background: transparent;
+        height: 80px;
+    }
+
+    .big-frame .frame-item textarea:focus ~ label,
+    .big-frame .frame-item textarea:not(:placeholder-shown) ~ label {
+        top: -150px;
+        left: 10px;
+        color: var(--Mistox-Light);
+        font-size: 12px;
+    }
+
 .flex-row{
     display: flex;
     flex-direction: row;
@@ -115,6 +140,15 @@ main {
     padding: 1px 0;
 }
 
+    .sub-frame a {
+        text-decoration: none;
+        color: var(--Mistox-Light);
+    }
+
+    .sub-frame a :hover {
+        color: var(--Mistox-Bright);
+    }
+
 .submit{
     position: relative;
     padding: 10px 20px;