fixup! Make label color max-contrast so it does not look like content…

… and remove horizontal label movement

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

src/components/NcInputField/NcInputField.vue

@@ -345,7 +345,7 @@ export default {
 
 	&__input {
 		margin: 0;
-		padding-inline: 6px;
+		padding-inline: 10px 6px; // align with label 8px margin + 2px padding
 		height: 38px !important;
 		width: 100%;
 
@@ -421,19 +421,20 @@ export default {
 		line-height: 1;
 		inset-block-start: 11px; // 2x 11px + 16px = 38px height
 		inset-inline: 0;
+		// Fix color so that users do not think the input already has content
+		color: var(--color-text-maxcontrast);
 		// only one line labels are allowed
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		// forward events to input
 		pointer-events: none;
 		// Position transition
-		transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick);
+		transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
 
 		&--leading-icon {
 			// 32px icon + 2px border
 			margin-inline-start: 34px;
-			transition: height var(--animation-quick) var(--animation-slow), inset-block-start var(--animation-quick) var(--animation-slow), font-size var(--animation-quick) var(--animation-slow), color var(--animation-quick) var(--animation-slow), background-color var(--animation-quick) var(--animation-slow), margin-inline-start var(--animation-slow);
 		}
 
 		&--trailing-icon {
@@ -448,21 +449,16 @@ export default {
 		font-size: 13px; // minimum allowed font size for accessibility
 		background-color: var(--color-main-background);
 		height: 14px;
-		margin-inline-start: 8px;
 		padding-inline: 4px;
 
 		transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick);
 		&--leading-icon {
-			transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick), margin-inline-start var(--animation-slow) var(--animation-quick);
+			margin-inline-start: 30px;
 		}
 	}
 
-	// Align label text color with border color
+	// Align label text color with border color (on hover / focus)
 	&__input {
-		&:not(:placeholder-shown) + .input-field__label {
-			color: var(--color-text-maxcontrast);
-		}
-
 		&:focus + .input-field__label,
 		&:hover:not(&--success, &--error):not(:placeholder-shown) + .input-field__label {
 			color: var(--color-primary-element);