Merge pull request #5657 from nextcloud-libraries/backport/5563/next

[next] Use variables for input border width
nextcloud-libraries · May 31, 2024 · 7d38f5c · 7d38f5c
2 parents 9adbb4e + fc8e356
commit 7d38f5c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -373,7 +373,7 @@ export default {
 
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		border: 2px solid var(--color-border-maxcontrast);
+		border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
 		border-radius: var(--border-radius-large);
 
 		cursor: pointer;
@@ -388,7 +388,8 @@ export default {
 		&:active:not([disabled]),
 		&:hover:not([disabled]),
 		&:focus:not([disabled]) {
-			border-color: 2px solid var(--color-main-text) !important;
+			border-width: var(--border-width-input-focused, 2px);
+			border-color: var(--color-main-text) !important;
 			box-shadow: 0 0 0 2px var(--color-main-background) !important;
 		}
 

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
@@ -1153,7 +1153,7 @@ body {
 
 	/* Borders */
 	--vs-border-color: var(--color-border-maxcontrast);
-	--vs-border-width: 2px;
+	--vs-border-width: var(--border-width-input, 2px) !important;
 	--vs-border-style: solid;
 	--vs-border-radius: var(--border-radius-large);
 
@@ -1238,6 +1238,7 @@ body {
 	}
 
 	&.vs--open .vs__dropdown-toggle {
+		border-width: var(--border-width-input-focused);
 		outline: 2px solid var(--color-main-background);
 		border-color: var(--color-main-text);
 		border-bottom-color: transparent;
@@ -1312,6 +1313,7 @@ body {
 }
 
 .vs__dropdown-menu {
+	border-width: var(--border-width-input-focused) !important;
 	border-color: var(--color-main-text) !important;
 	outline: none !important;
 	box-shadow:

diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
@@ -331,21 +331,22 @@ export default {
 		margin: 0;
 		padding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input
 		width: 100%;
-
+		height: calc(var(--default-clickable-area) * 2);
 		font-size: var(--default-font-size);
 		text-overflow: ellipsis;
 
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		border: 2px solid var(--color-border-maxcontrast);
+		border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
 		border-radius: var(--border-radius-large);
 
 		cursor: pointer;
 
 		&:active:not([disabled]),
 		&:hover:not([disabled]),
 		&:focus:not([disabled]) {
-			border-color: 2px solid var(--color-main-text) !important;
+			border-width: var(--border-width-input-focused, 2px);
+			border-color: var(--color-main-text);
 			box-shadow: 0 0 0 2px var(--color-main-background) !important;
 		}