From 0d17b9f1c5cac275a6957b2020a8ca42192ef547 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 18 Aug 2023 15:28:30 +0200
Subject: [PATCH] fixup! Make stylelint happy

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcInputField/NcInputField.vue | 63 ++++++++++----------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 7bd1ae87eb..50f10ccbf9 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -345,7 +345,7 @@ export default {
 
 	&__input {
 		margin: 0;
-		padding-inline: 10px 6px; // align with label 8px margin + 2px padding
+		padding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input
 		height: 38px !important;
 		width: 100%;
 
@@ -389,11 +389,25 @@ export default {
 			box-shadow: unset !important; // Override server rules
 		}
 
+		&--leading-icon {
+			padding-inline-start: 32px;
+		}
+
+		&--trailing-icon {
+			padding-inline-end: 32px;
+		}
+
 		&--success {
 			border-color: var(--color-success) !important; //Override hover border color
 			&:focus-visible {
 				box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
 			}
+
+			// Align label text color with border color (on hover / focus)
+			&:focus + .input-field__label,
+			&:hover:not(:placeholder-shown) + .input-field__label {
+				color: var(--color-success-text);
+			}
 		}
 
 		&--error {
@@ -401,25 +415,31 @@ export default {
 			&:focus-visible {
 				box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
 			}
-		}
 
-		&--leading-icon {
-			padding-inline-start: 32px;
+			// Align label text color with border color (on hover / focus)
+			&:focus + .input-field__label,
+			&:hover:not(:placeholder-shown) + .input-field__label {
+				color: var(--color-error-text);
+			}
 		}
 
-		&--trailing-icon {
-			padding-inline-end: 32px;
+		// Align label text color with border color (on hover / focus)
+		&:not(&--success, &--error) {
+			&:focus + .input-field__label,
+			&:hover:not(:placeholder-shown) + .input-field__label {
+				color: var(--color-primary-element);
+			}
 		}
 	}
 
 	&__label {
 		position: absolute;
-		margin-inline: 8px 0;
+		margin-inline: 12px 0;
 		// fix height and line height to center label
-		height: 16px;
+		height: 17px;
 		max-width: fit-content;
 		line-height: 1;
-		inset-block-start: 11px; // 2x 11px + 16px = 38px height
+		inset-block-start: 12px;
 		inset-inline: 0;
 		// Fix color so that users do not think the input already has content
 		color: var(--color-text-maxcontrast);
@@ -450,35 +470,14 @@ export default {
 		background-color: var(--color-main-background);
 		height: 14px;
 		padding-inline: 4px;
+		margin-inline-start: 8px;
 
-		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);
 		&--leading-icon {
 			margin-inline-start: 30px;
 		}
 	}
 
-	// Align label text color with border color (on hover / focus)
-	&__input {
-		&:focus + .input-field__label,
-		&:hover:not(&--success, &--error):not(:placeholder-shown) + .input-field__label {
-			color: var(--color-primary-element);
-		}
-
-		&--success {
-			&:focus + .input-field__label,
-			&:hover:not(:placeholder-shown) + .input-field__label {
-				color: var(--color-success-text);
-			}
-		}
-
-		&--error {
-			&:focus + .input-field__label,
-			&:hover:not(:placeholder-shown) + .input-field__label {
-				color: var(--color-error-text);
-			}
-		}
-	}
-
 	&__icon {
 		position: absolute;
 		height: 32px;