Hallo,
Zuerst einmal vielen Dank für das neue Autocomplete-Design, ich liebe es. 
Ich habe ein paar kleine Änderungen vorgenommen, die ich auf meiner Website verwende.
- Ich verwende die Autocomplete-Liste im Vollbildmodus auf Mobilgeräten. Ich denke, das ist jetzt eine sichere Sache, da es verhindert, dass die Liste vom Bildschirm verschwindet. Sie erscheint irgendwo in der Mitte. Das schafft eine breitere Ansicht, was gut ist, wenn der Benutzer einen längeren Namen hat oder einen Benutzerstatus verfügbar hat.
.d-editor-textarea-wrapper {
.autocomplete {
.mobile-view & {
max-width: calc(100% - 20px);
width: 100%;
left: 10px !important; // Überschreibt die linke Positionsberechnung
}
}
}
- Bei der ausgeblendeten Liste sind der untere Schatten und der Rand immer sichtbar, auch wenn die Liste nicht scrollbar ist. Ich verwende den Schatten für eine :after-Pseudo-Klasse anstelle von -webkit-mask. Ich habe einen oberen und unteren Schatten hinzugefügt, der unter dem ersten und letzten li-Element durchrutscht. Auf diese Weise kann ich den unteren Rand entfernen.
.hashtag-autocomplete {
max-height: 14em;
&__fadeout {
-webkit-mask: none;
&:before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 1),
rgba(var(--secondary-rgb), 0)
);
}
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
}
&__option {
&:last-of-type {
margin-bottom: 0;
}
// über die Schatten legen
&:first-of-type,
&:last-of-type {
.hashtag-autocomplete__link {
position: relative;
z-index: 1;
}
}
}
}
