Fix colors in autocomplete component (#1905)

Further fixes for the high contrast mode, modly regarded to the autocomplete component.

This is a fixup for #1892

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
This commit is contained in:
René Pfeuffer
2021-12-22 14:07:03 +01:00
committed by GitHub
parent bc86ed4474
commit 37f89bed77
4 changed files with 53 additions and 27 deletions

View File

@@ -568,7 +568,6 @@ form .field:not(.is-grouped) {
.select select,
.textarea,
.file-name {
border-color: $blue-light;
box-shadow: none;
}
@@ -811,11 +810,48 @@ form .field:not(.is-grouped) {
color: $text !important;
}
.autocomplete-entry > div {
border-color: $blue-light;
&:hover,
&.is-hovered {
border-color: #4a4a4a;
}
.autocomplete-entry__option--is-focused {
background-color: $link !important;
color: $link-invert !important;
}
.autocomplete-entry__option--is-selected {
// TODO better use link-light or something
background-color: $blue-light !important;
color: $link-invert !important;
}
.autocomplete-entry__single-value {
color: $text !important;
}
.autocomplete-entry > div {
color: $text-strong !important;
}
.autocomplete-entry__menu {
background-color: $background !important;
}
.autocomplete-entry__control {
background-color: $scheme-main !important;
border-color: $input-border-color !important;
}
.autocomplete-entry__control:hover {
border-color: $input-hover-border-color !important;
}
.autocomplete-entry__control--is-focused {
border-color: $input-focus-border-color !important;
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color !important;
}
.autocomplete-entry__control--is-focused:hover {
border-color: $input-focus-border-color !important;
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color !important;
}
.autocomplete-entry__input {
color: $text-strong !important;
}