Ciao,
Prima di tutto, grazie mille per il nuovo design dell’autocompletamento, lo adoro. ![]()
Ho apportato alcune piccole modifiche che utilizzo sul mio sito.
- Utilizzo la lista di autocompletamento a larghezza intera sui dispositivi mobili. Penso che sia una cosa sicura ora perché impedisce alla lista di uscire dallo schermo. Succede più o meno al centro. Offre una visione più ampia che è utile quando l’utente ha un nome più lungo o ha uno stato utente disponibile.
.d-editor-textarea-wrapper {
.autocomplete {
.mobile-view & {
max-width: calc(100% - 20px);
width: 100%;
left: 10px !important; // sovrascrive il calcolo della posizione sinistra
}
}
}
- Sulla lista di dissolvenza, l’ombra inferiore e il margine sono sempre visibili anche se la lista non è scorrevole. Utilizzo l’ombra per uno pseudo :after invece di -webkit-mask. Ho aggiunto un’ombra superiore e inferiore che scivola sotto il primo e l’ultimo elemento li. In questo modo posso rimuovere il margine inferiore.
.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;
}
// mettilo sopra le ombre
&:first-of-type,
&:last-of-type {
.hashtag-autocomplete__link {
position: relative;
z-index: 1;
}
}
}
}




