Fix paddings for textfields

Author: 1602

stylesheets/json-form-element.css

@@ -1,8 +1,9 @@
 .jf-element {
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
-    margin-top: 16px;
     margin-bottom: 16px;
+    margin-right: 16px;
+    max-width: 300px;
 }
 
 .jf-element--hidden {
@@ -11,8 +12,9 @@
 
 .jf-helper-text {
     margin-top: 8px;
-    margin-left: 12px;
+    padding-left: 12px;
     color: rgba(0, 0, 0, 0.54);
+    box-sizing: border-box;
 }
 
 .jf-element--invalid .jf-helper-text {

stylesheets/switch.css

@@ -99,6 +99,7 @@
     max-width: calc(100% - 44px);
     font-size: 12px;
     color: rgba(0, 0, 0, 0.54);
+    padding-top: 4px;
 }
 
 .jf-switch--invalid .jf-textfield__helper-text {

stylesheets/textfield.css

@@ -4,19 +4,35 @@
     --large-font-size: 16px;
     --side-padding: 12px;
     --filled-background: rgba(0, 0, 0, 0.09);
-    --top-padding: 20px;
-    --bottom-padding: 17px;
+    --top-padding: 22px;
+    --bottom-padding: 13px;
 }
 
 .jf-textfield--dense {
     --field-height: 44px;
     --label-top: 17px;
     --large-font-size: 12px;
     --side-padding: 8px;
+    --top-padding: 22px;
+    --bottom-padding: 13px;
+}
+
+.jf-textfield--dense.jf-textfield--outlined {
     --top-padding: 13px;
     --bottom-padding: 13px;
 }
 
+.jf-textfield--dense.jf-textfield--multiline {
+    --top-padding: 22px;
+    --bottom-padding: 6px;
+}
+
+.jf-textfield--multiline {
+    --top-padding: 23px;
+    --bottom-padding: 6px;
+}
+
+
 .jf-textfield {
     position: relative;
     height: var(--field-height);
@@ -72,7 +88,7 @@
     padding-left: var(--side-padding);
     padding-right: var(--side-padding);
     padding-top: var(--top-padding);
-    padding-bottom: 12px;
+    padding-bottom: var(--bottom-padding);
     width: 100%;
     background: 0 0;
     text-align: left;
@@ -288,7 +304,7 @@
     color: var(--color-invalid);
 }
 
-.jf-textfield--invalid .jf-textfield__input {
+.jf-textfield--has-icon .jf-textfield__input {
     padding-right: 40px;
 }