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

View File

@ -67,7 +67,8 @@ export default {
.suggestion-list {
list-style-type: none;
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-weight: bold;
}
@ -84,11 +85,11 @@ export default {
&.is-selected,
&:hover {
background-color: rgba($color-neutral-100, 0.2);
background-color: rgba($color-neutral-100, 0.3);
}
&.hint {
opacity: 0.5;
opacity: 0.7;
pointer-events: none;
}
}