diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index a69e47f6b7..de6026f00e 100644 --- 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 index 76bd11cb3f..09957780df 100644 --- a/src/components/NcSelect/NcSelect.vue +++ b/src/components/NcSelect/NcSelect.vue @@ -1177,7 +1177,7 @@ 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; @@ -1185,7 +1185,8 @@ body { } .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,13 @@ 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 +1339,6 @@ body { // Selected users require slightly different padding .user-select .vs__selected { - padding: 0 2px !important; + padding: 0 5px !important; }