refactor(NcInputField): use new shares scss mixin for input border

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

Author: susnux

src/components/NcInputField/NcInputField.vue

@@ -369,12 +369,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../assets/input-border.scss' as border;
 
 .input-field {
 	--input-border-color: var(--color-border-maxcontrast);
 	--input-border-radius: var(--border-radius-element);
-	// Used e.g. if border width differs between focused and unfocused we need to compensate to prevent jumping
-	--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
 	// The padding before the input can start (leading button or border)
 	--input-padding-start: var(--border-radius-large);
 	// The padding where the input has to end (trailing button or border)
@@ -408,23 +407,15 @@ export default {
 
 	&__main-wrapper {
 		height: var(--default-clickable-area);
-		padding: var(--border-width-input, 2px);
+		padding: var(--border-width-input-focused, 2px);
 		position: relative;
-
-		&:not(:has([disabled])):has(input:focus),
-		&:not(:has([disabled])):has(input:active) {
-			padding: 0;
-		}
 	}
 
 	&__input {
+		@include border.inputBorder('.input-field--dark', '.input-field--legacy', var(--input-border-color));
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		border: none;
 		border-radius: var(--input-border-radius);
-		box-shadow:
-			0 -1px var(--input-border-color),
-			0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);
 
 		cursor: pointer;
 		-webkit-appearance: textfield !important;
@@ -434,11 +425,11 @@ export default {
 		font-size: var(--default-font-size);
 		text-overflow: ellipsis;
 
+		padding-block: 0;
+		padding-inline: var(--input-padding-start) var(--input-padding-end);
 		height: 100% !important;
 		min-height: unset;
 		width: 100%;
-		padding-block: var(--input-border-width-offset);
-		padding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));
 
 		&::placeholder {
 			color: var(--color-text-maxcontrast);
@@ -458,17 +449,9 @@ export default {
 			display: none;
 		}
 
-		&:hover:not([disabled]) {
-			box-shadow: 0 0 0 1px var(--input-border-color);;
-		}
-
 		&:active:not([disabled]),
 		&:focus:not([disabled]) {
 			--input-border-color: var(--color-main-text);
-			// Reset padding offset when focused
-			--input-border-width-offset: 0px;
-			border: var(--border-width-input-focused, 2px) solid var(--input-border-color);
-			box-shadow: 0 0 0 2px var(--color-main-background) !important;
 		}
 
 		&:focus + .input-field__label,
@@ -611,23 +594,5 @@ export default {
 			}
 		}
 	}
-
-	&--legacy {
-		.input-field__input {
-			box-shadow: 0 0 0 1px var(--input-border-color) inset;
-		}
-
-		.input-field__main-wrapper:hover:not(:has([disabled])) {
-			padding: 0;
-
-			.input-field__input {
-				--input-border-color: var(--color-main-text);
-				// Reset padding offset when focused
-				--input-border-width-offset: 0px;
-				border: var(--border-width-input-focused, 2px) solid var(--input-border-color);
-				box-shadow: 0 0 0 2px var(--color-main-background) !important;
-			}
-		}
-	}
 }
 </style>