Merge pull request #158 from wpmudev/fix/FOR-5902

Fix/for 5902

Author: emgk

.changeset/rare-ghosts-occur.md

@@ -0,0 +1,5 @@
+---
+"forminator-ui": patch
+---
+
+fix: field and label description issue in material design

library/js/input-material.js

@@ -43,7 +43,7 @@
 				if ( description.length ) {
 					const descriptionHeight = description.outerHeight();
 					const labelHeight = label.outerHeight();
-					const translateY = descriptionHeight + labelHeight + 8; // 8px margin
+					const translateY = descriptionHeight + labelHeight + 16; // 16px margin
 					label.css( '--forminator-floating-label-translate', translateY + 'px' );
 				}
 

library/scss/src/settings/components/_label-floating.scss

@@ -15,10 +15,10 @@
 				// use css variable or default 30px
 				transform: translateY(var(--forminator-floating-label-translate, 30px));
 
-				+ .forminator-input--wrap,
-				+ .forminator-input-with-icon,
-				+ .forminator-input-with-phone,
-				+ .forminator-input-with-suffix {
+				~ .forminator-input--wrap,
+				~ .forminator-input-with-icon,
+				~ .forminator-input-with-phone,
+				~ .forminator-input-with-suffix {
 
 					.forminator-input {
 
@@ -44,7 +44,7 @@
 					}
 				}
 
-				+ .forminator-input-with-phone .iti__selected-dial-code {
+				~ .forminator-input-with-phone .iti__selected-dial-code {
 					@include opacity(0);
 				}
 
@@ -70,10 +70,10 @@
 				.forminator-floating--input {
 					transform: translateY(0);
 
-					+ .forminator-input--wrap,
-					+ .forminator-input-with-icon,
-					+ .forminator-input-with-phone,
-					+ .forminator-input-with-suffix {
+					~ .forminator-input--wrap,
+					~ .forminator-input-with-icon,
+					~ .forminator-input-with-phone,
+					~ .forminator-input-with-suffix {
 
 						.forminator-input {
 
@@ -99,7 +99,7 @@
 						}
 					}
 
-					+ .forminator-input-with-phone .iti__selected-dial-code {
+					~ .forminator-input-with-phone .iti__selected-dial-code {
 						@include opacity(1);
 					}
 				}
@@ -133,7 +133,7 @@
 				padding: map-get($input, padding);
 				transform: translateY(var(--forminator-floating-label-translate, 0));
 
-				+ .forminator-textarea--wrap {
+				~ .forminator-textarea--wrap {
 
 					.forminator-textarea {
 
@@ -166,7 +166,7 @@
 				.forminator-floating--textarea {
 					padding-top: map-get($input, padding) !important;
 
-					+ .forminator-textarea--wrap {
+					~ .forminator-textarea--wrap {
 
 						.forminator-textarea {