fixup! Make stylelint happy

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Aug 18, 2023 · 0d17b9f · 0d17b9f
1 parent d05b825
commit 0d17b9f
Showing 1 changed file with 31 additions and 32 deletions.
diff --git 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,37 +389,57 @@ 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 {
 			border-color: var(--color-error) !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
 			}
-		}
 
-		&--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;