/** * Habillage generique des listes d'autocompletion (jQuery UI / core.autocomplete). * * Charge automatiquement partout ou Drupal charge core/drupal.autocomplete, * via libraries-extend dans myphotoagency.info.yml : agent, adresse, entity * reference... n'importe quel champ en autocompletion. Sans ce fichier, jQuery * UI rend une liste de liens bleus soulignes sans cadre. * * Fichier hors build gulp (comme js/autodownload.js) : il ne concerne que des * elements injectes par Drupal, jamais compiles dans front_app. * * Les specificites "adresse" (epingle, affichage sur deux lignes) sont dans * mpa_plateforme/css/address_autocomplete.css, qui se pose par-dessus. */ /* ---- Le menu (jQuery UI l'injecte en fin de ). -------------------- */ .ui-autocomplete { /* jQuery UI pose un z-index inline ; garde-fou face aux blocs sticky. */ z-index: 1100; max-height: 30rem; margin: 0.4rem 0 0; padding: 0.4rem 0; overflow-x: hidden; overflow-y: auto; list-style: none; background-color: var(--white, #fff); border: 0.1rem solid var(--color-border, #e2e8f0); border-radius: 0.6rem; box-shadow: 0 1rem 2.4rem rgba(2, 59, 74, 0.14); font-size: 1.4rem; scrollbar-width: thin; scrollbar-color: var(--gray-dark-4, #cbd5e1) transparent; } .ui-autocomplete::-webkit-scrollbar { width: 0.6rem; } .ui-autocomplete::-webkit-scrollbar-thumb { background-color: var(--gray-dark-4, #cbd5e1); border-radius: 0.3rem; } /* ---- Une proposition. --------------------------------------------------- */ .ui-autocomplete .ui-menu-item { margin: 0; list-style: none; } .ui-autocomplete .ui-menu-item + .ui-menu-item { border-top: 0.1rem solid var(--blue-light, #e5ecee); } /* jQuery UI ajoute .ui-menu-item-wrapper au genere par core. */ .ui-autocomplete .ui-menu-item-wrapper { position: relative; display: block; padding: 1rem 1.4rem; border: 0; margin: 0; background: none; color: var(--sapphire, #023b4a); line-height: 1.25; text-decoration: none; white-space: normal; cursor: pointer; transition: background-color 0.15s ease-in-out; } /* Survol souris ET navigation clavier (jQuery UI pose .ui-state-active). */ .ui-autocomplete .ui-menu-item-wrapper:hover, .ui-autocomplete .ui-menu-item-wrapper:focus, .ui-autocomplete .ui-menu-item-wrapper.ui-state-active { background-color: var(--blue-lighter, #f4f8fb); /* Liseret interne : pas de decalage du texte, contrairement a un border. */ box-shadow: inset 0.3rem 0 0 var(--sapphire, #023b4a); color: var(--sapphire, #023b4a); outline: none; } /* ---- Indicateur de chargement du champ. --------------------------------- */ /* Le rond gris permanent de Drupal (misc/throbber-inactive.png) est remplace par un spinner aux couleurs du thema, visible pendant la requete seulement. */ .js input.form-autocomplete { background-image: none; } .js input.form-autocomplete.ui-autocomplete-loading { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23E2E8F0' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23023B4A' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1.8rem 1.8rem; padding-right: 4rem; }