style(input): change input textarea margins

change input textarea and margins to match material design specs
change input and textarea selectors to be more uniform

Author: serifine

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

@@ -1,6 +1,5 @@
 ux-input-info {
   display: flex;
-  margin-top: 4px;
   font-size: 14px;
   width: 100%;
   color: ${hintText || $design.primaryLightForeground};

src/input/ux-input-theme.css

@@ -3,46 +3,38 @@ ux-input {
   width: 100%;
 }
 
-styles.input {
-  display: block;
-  position: relative;
-  width: 100%;
-  padding: 8px;
-  border: 0;
-  outline: none;
-}
-
-  ux-input > styles.input {
+  styles.input {
+    width: 100%;
+    padding: 16px 0 8px 0;
+    margin-bottom: 8px;
+    border: 0;
+    outline: none;
     padding-left:0;
     padding-right:0;
     transition: 250ms;
     background-color: ${background};
     border-bottom: 2px solid ${foreground || $design.primaryLightForeground};
   }
 
-    ux-input > styles.input:hover {
+    styles.input:hover,
+    styles.input:focus {
       border-bottom-color: ${$design.accent};
     }
 
-    ux-input > styles.input:focus {
-      border-bottom-color: ${$design.accentDark};
-    }
-
-    ux-input > styles.input[disabled],
-    ux-input > styles.input[disabled]:hover,
-    ux-input > styles.input[disabled]:focus,
-    ux-input > styles.input[readonly],
-    ux-input > styles.input[readonly]:hover,
-    ux-input > styles.input[readonly]:focus {
+    styles.input[disabled],
+    styles.input[disabled]:hover,
+    styles.input[disabled]:focus,
+    styles.input[readonly],
+    styles.input[readonly]:hover,
+    styles.input[readonly]:focus {
       color: ${foregroundDisabled || $swatches.grey.p500};
       border-bottom: 1px dashed ${foregroundDisabled || $swatches.grey.p300};
     }
 
   ux-input.full-width > styles.input {
-    padding: 20px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding: 20px 8px;
     font-size: 16px;
+  margin-bottom: 0;
     border: 1px solid ${$swatches.grey.p200};
     background-color: ${$swatches.white};
   }

src/textarea/ux-textarea-theme.css

@@ -2,40 +2,32 @@ ux-textarea {
   display: block;
   width: 100%;
 }
-
-styles.textarea {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 8px;
-  border: 0;
-  outline: none;
-  resize: none;
-}
-
-  ux-textarea > styles.textarea {
+  styles.textarea {
+    width: 100%;
+    height: 100%;
+    padding: 16px 0 8px 0;
+    margin-bottom: 8px;
+    border: 0;
+    outline: none;
+    resize: none;
     padding-left:0;
     padding-right:0;
     transition: 250ms;
     background-color: ${background};
     border-bottom: 2px solid ${foreground || $design.primaryLightForeground};
   }
 
-    ux-textarea > styles.textarea:hover {
+    styles.textarea:hover,
+    styles.textarea:focus {
       border-bottom-color: ${$design.accent};
     }
 
-    ux-textarea > styles.textarea:focus {
-      border-bottom-color: ${$design.accentDark};
-    }
-
-    ux-textarea > styles.textarea[disabled],
-    ux-textarea > styles.textarea[disabled]:hover,
-    ux-textarea > styles.textarea[disabled]:focus,
-    ux-textarea > styles.textarea[readonly],
-    ux-textarea > styles.textarea[readonly]:hover,
-    ux-textarea > styles.textarea[readonly]:focus {
+    styles.textarea[disabled],
+    styles.textarea[disabled]:hover,
+    styles.textarea[disabled]:focus,
+    styles.textarea[readonly],
+    styles.textarea[readonly]:hover,
+    styles.textarea[readonly]:focus {
       color: ${foregroundDisabled || $swatches.grey.p500};
       border-bottom: 1px dashed ${foregroundDisabled || $swatches.grey.p300};
     }
@@ -45,9 +37,8 @@ styles.textarea {
   }
 
   ux-textarea.full-width > styles.textarea {
-    padding: 20px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding: 20px 8px;
+    margin-bottom: 0;
     font-size: 16px;
     border: 1px solid ${$swatches.grey.p200};
     background-color: ${$swatches.white};