style(NcSelect, NcInputField): make their styling consistent

Signed-off-by: Grigory V <scratchx@gmx.com>
nextcloud-libraries · Jul 24, 2024 · c7d879e · c7d879e
1 parent 517da13
commit c7d879e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -384,6 +384,10 @@ export default {
 		padding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));
 		padding-block: var(--input-border-width-offset);
 
+		&::placeholder {
+			color: var(--color-text-maxcontrast);
+		}
+
 		&:active:not([disabled]),
 		&:hover:not([disabled]),
 		&:focus:not([disabled]) {

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
@@ -1177,15 +1177,16 @@ body {
 	/* Override default vue-select styles */
 	min-height: var(--default-clickable-area);
 	min-width: 260px;
-	margin: 0;
+	margin: 0 0 var(--default-grid-baseline);
 
 	.select__label {
 		display: block;
 		margin-bottom: 2px;
 	}
 
 	.vs__selected {
-		height: 32px;
+		height: calc(var(--default-clickable-area) - var(--default-grid-baseline));
+		margin: calc(var(--default-grid-baseline) / 2);
 		padding: 0 8px 0 12px;
 		border-radius: 18px !important;
 		background: var(--color-primary-element-light);
@@ -1194,10 +1195,15 @@ body {
 
 	.vs__search {
 		text-overflow: ellipsis;
+		color: var(--color-main-text);
+
+		&::placeholder {
+			color: var(--color-text-maxcontrast);
+		}
 	}
 
 	.vs__search, .vs__search:focus {
-		margin: 2px 0 0;
+		margin: 0;
 	}
 
 	.vs__dropdown-toggle {
@@ -1263,12 +1269,14 @@ body {
 
 	.vs__selected-options {
 		// If search is hidden, ensure that the height of the search is the same
-		min-height: 40px; // 36px search height + 4px search margin
+		min-height: var(--default-clickable-area);
 
 		// Hide search from dom if unused to prevent unneeded flex wrap
 		.vs__selected ~ .vs__search[readonly] {
 			position: absolute;
 		}
+
+		padding: 0 5px;
 	}
 
 	&.vs--single {
@@ -1332,6 +1340,6 @@ body {
 
 // Selected users require slightly different padding
 .user-select .vs__selected {
-	padding: 0 2px !important;
+	padding: 0 5px !important;
 }
 </style>