Merge pull request #5563 from nextcloud-libraries/reduce-input-border…

…-width Use variable for input border width
nextcloud-libraries · May 31, 2024 · d508420 · d508420
2 parents 5e3afbc + 91f8a2a
commit d508420
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
@@ -371,7 +371,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;
@@ -386,7 +386,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
@@ -1149,7 +1149,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);
 
@@ -1234,6 +1234,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;
@@ -1308,6 +1309,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
@@ -325,21 +325,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;
 		}