style(input): further refactor style controls

refactored further to align more with material design standards without taking up too much space on the form

Author: serifine

src/input-info/ux-input-info-theme.css

@@ -1,26 +1,34 @@
-ux-input-info {
+styles.inputinfo {
   display: flex;
   font-size: 14px;
   width: 100%;
   color: ${hintText || $design.primaryLightForeground};
 }
 
-  ux-input-info>.hint-text {
+  styles.inputinfo>.hint-text,
+  styles.inputinfo>.error-text {
     flex-grow: 1;
   }
 
-  ux-input-info>.counter {
+  styles.inputinfo>.error-text+.hint-text {
+    display:none;
+  }
+
+  styles.inputinfo>.counter {
     transition: 250ms;
+    flex-wrap: nowrap;
+    display: flex;
   }
 
-  ux-input.focused+ux-input-info>.counter {
+  ux-input.focused+styles.inputinfo>.counter {
     color: ${$design.accent};
   }
 
-  ux-input>styles.input[disabled]+ux-input-info {
+  ux-input>styles.input[disabled]+styles.inputinfo {
     display: none;
   }
 
-  .has-error+ux-input-info {
+  .has-error+styles.inputinfo {
     color: ${errorAccent || $swatches.red.p500};
   }
+

src/input-info/ux-input-info.html

@@ -1,4 +1,4 @@
-<template>
+<template styles.inputinfo>
   <require from="./ux-input-info-theme"></require>
 
   <span class="hint-text">

src/input/ux-input-theme.css

@@ -5,22 +5,27 @@ ux-input {
 
   styles.input {
     width: 100%;
-    padding: 16px 0 8px 0;
-    margin-bottom: 8px;
+    padding: 6px 0 4px 0;
+    margin-bottom: 4px;
     border: 0;
     outline: none;
     padding-left:0;
     padding-right:0;
-    transition: 250ms;
+    transition: border-color 250ms ease;
     background-color: ${background};
-    border-bottom: 2px solid ${foreground || $design.primaryLightForeground};
+    border-bottom: 1px solid ${foreground || $design.primaryLightForeground};
   }
 
     styles.input:hover,
     styles.input:focus {
       border-bottom-color: ${$design.accent};
     }
 
+    styles.input:focus {
+      border-bottom-width: 2px;
+      padding-bottom: 3px;
+    }
+
     styles.input[disabled],
     styles.input[disabled]:hover,
     styles.input[disabled]:focus,
@@ -34,7 +39,7 @@ ux-input {
   ux-input.full-width > styles.input {
     padding: 20px 8px;
     font-size: 16px;
-  margin-bottom: 0;
+    margin-bottom: 0;
     border: 1px solid ${$swatches.grey.p200};
     background-color: ${$swatches.white};
   }

src/textarea/ux-textarea-theme.css

@@ -5,23 +5,28 @@ ux-textarea {
   styles.textarea {
     width: 100%;
     height: 100%;
-    padding: 16px 0 8px 0;
-    margin-bottom: 8px;
+    padding: 6px 0 4px 0;
+    margin-bottom: 4px;
     border: 0;
     outline: none;
     resize: none;
     padding-left:0;
     padding-right:0;
-    transition: 250ms;
+    transition: border-color 250ms ease;
     background-color: ${background};
-    border-bottom: 2px solid ${foreground || $design.primaryLightForeground};
+    border-bottom: 1px solid ${foreground || $design.primaryLightForeground};
   }
 
     styles.textarea:hover,
     styles.textarea:focus {
       border-bottom-color: ${$design.accent};
     }
 
+    styles.textarea:focus {
+      border-bottom-width: 2px;
+      padding-bottom: 3px;
+    }
+
     styles.textarea[disabled],
     styles.textarea[disabled]:hover,
     styles.textarea[disabled]:focus,