fix(form): transparent input padding and texarea support

Closes ##798
fomantic · Jun 10, 2019 · dd561b5 · dd561b5
1 parent bfd7c84
commit dd561b5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -130,6 +130,7 @@
 }
 
 /* Text Area */
+.ui.input textarea,
 .ui.form textarea {
   margin: 0;
   -webkit-appearance: none;
@@ -186,19 +187,21 @@
       Transparent
 ---------------------*/
 
-.ui.form .field .transparent.input input,
+.ui.form .field .transparent.input:not(.icon) input,
 .ui.form .field input.transparent,
 .ui.form .field textarea.transparent {
-  padding: @transparentPadding !important;
+  padding: @transparentPadding;
 }
 
+.ui.form .field input.transparent,
 .ui.form .field textarea.transparent {
   border-color: transparent !important;
   background-color: transparent !important;
   box-shadow: none !important;
 }
 
 .ui.form .field.error .transparent.input input,
+.ui.form .field.error .transparent.input textarea,
 .ui.form .field.error input.transparent,
 .ui.form .field.error textarea.transparent {
   background-color: @transparentFormErrorBackground !important;

diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less
@@ -211,22 +211,25 @@
 .ui.transparent.input > input {
   border-color: transparent !important;
   background-color: transparent !important;
-  padding: 0 !important;
+  padding: 0;
   box-shadow: none !important;
   border-radius: 0 !important;
 }
+.field .ui.transparent.input > textarea {
+  padding: @padding;
+}
 
 /* Transparent Icon */
-.ui.transparent.icon.input > i.icon {
+:not(.field) > .ui.transparent.icon.input > i.icon {
   width: @transparentIconWidth;
 }
-.ui.transparent.icon.input > input {
-  padding-left: 0 !important;
-  padding-right: @transparentIconMargin !important;
+:not(.field) > .ui.transparent.icon.input > input {
+  padding-left: 0;
+  padding-right: @transparentIconMargin;
 }
-.ui.transparent[class*="left icon"].input > input {
-  padding-left: @transparentIconMargin !important;
-  padding-right: 0 !important;
+:not(.field) > .ui.transparent[class*="left icon"].input > input {
+  padding-left: @transparentIconMargin;
+  padding-right: 0;
 }
 
 /* Transparent Inverted */
@@ -271,9 +274,9 @@
 .ui.icon.input > i.icon:not(.link) {
   pointer-events: none;
 }
-.ui.icon.input > textarea,
-.ui.icon.input > input {
-  padding-right: @iconMargin !important;
+.ui.ui.icon.input > textarea,
+.ui.ui.icon.input > input {
+  padding-right: @iconMargin;
 }
 
 .ui.icon.input > i.icon:before,
@@ -303,10 +306,10 @@
   right: auto;
   left: @circularIconHorizontalOffset;
 }
-.ui[class*="left icon"].input > textarea,
-.ui[class*="left icon"].input > input {
-  padding-left: @iconMargin !important;
-  padding-right: @horizontalPadding !important;
+.ui.ui[class*="left icon"].input > textarea,
+.ui.ui[class*="left icon"].input > input {
+  padding-left: @iconMargin;
+  padding-right: @horizontalPadding;
 }
 
 /* Focus */
@@ -395,6 +398,9 @@
 .ui.icon.input > textarea ~ .icon {
   height: @textareaIconHeight;
 }
+:not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
+  height: @transparentTextareaIconHeight;
+}
 
 /* Corner Label Position  */
 .ui.input > .ui.corner.label {

diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables
@@ -45,6 +45,7 @@
 @transparentIconMargin: 2em;
 
 @textareaIconHeight: 3em;
+@transparentTextareaIconHeight: 1.3em;
 
 /* Circular Icon Input */
 @circularIconVerticalOffset: 0.35em;