style suggestion lists

This commit is contained in:
Alina Beck 2019-08-27 16:14:52 +01:00
parent d28864ab73
commit 10e11a4e9b
2 changed files with 13 additions and 12 deletions

View File

@ -25,7 +25,7 @@ export default {
interactive: true, interactive: true,
placement, placement,
showOnInit, showOnInit,
theme: 'dark', theme: 'human-connection',
trigger, trigger,
onMount(instance) { onMount(instance) {
const input = instance.popper.querySelector('input') const input = instance.popper.querySelector('input')
@ -65,31 +65,31 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.tippy-tooltip.dark-theme { .tippy-tooltip.human-connection-theme {
background-color: $color-neutral-0; background-color: $color-primary;
padding: 0; padding: 0;
font-size: 1rem; font-size: 1rem;
text-align: inherit; text-align: inherit;
color: $color-neutral-100; color: $color-neutral-100;
border-radius: 5px;
.tippy-backdrop { .tippy-backdrop {
display: none; display: none;
} }
.tippy-roundarrow { .tippy-roundarrow {
fill: $color-neutral-0; fill: $color-primary;
} }
.tippy-popper[x-placement^='top'] & .tippy-arrow { .tippy-popper[x-placement^='top'] & .tippy-arrow {
border-top-color: $color-neutral-0; border-top-color: $color-primary;
} }
.tippy-popper[x-placement^='bottom'] & .tippy-arrow { .tippy-popper[x-placement^='bottom'] & .tippy-arrow {
border-bottom-color: $color-neutral-0; border-bottom-color: $color-primary;
} }
.tippy-popper[x-placement^='left'] & .tippy-arrow { .tippy-popper[x-placement^='left'] & .tippy-arrow {
border-left-color: $color-neutral-0; border-left-color: $color-primary;
} }
.tippy-popper[x-placement^='right'] & .tippy-arrow { .tippy-popper[x-placement^='right'] & .tippy-arrow {
border-right-color: $color-neutral-0; border-right-color: $color-primary;
} }
} }
</style> </style>

View File

@ -67,7 +67,8 @@ export default {
.suggestion-list { .suggestion-list {
list-style-type: none; list-style-type: none;
padding: 0.2rem; padding: 0.2rem;
border: 2px solid rgba($color-neutral-0, 0.1); border-radius: 5px;
border: 2px solid $color-primary;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: bold; font-weight: bold;
} }
@ -84,11 +85,11 @@ export default {
&.is-selected, &.is-selected,
&:hover { &:hover {
background-color: rgba($color-neutral-100, 0.2); background-color: rgba($color-neutral-100, 0.3);
} }
&.hint { &.hint {
opacity: 0.5; opacity: 0.7;
pointer-events: none; pointer-events: none;
} }
} }