diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css index 95c5667..0ab6772 100644 --- a/app/assets/css/malio.css +++ b/app/assets/css/malio.css @@ -18,6 +18,23 @@ outline: 2px solid rgb(var(--m-primary) / 1); outline-offset: 2px; } + + /* Anneau de focus clavier pour un combobox ouvert (input + liste) : l'anneau + entoure le bloc entier d'un seul tenant. L'input porte le contour haut+côtés, + la liste le contour côtés+bas ; la jonction (bas de l'input / haut de la liste) + reste sans contour pour un raccord sans couture. */ + .m-combo-ring-top { + box-shadow: + -2px 0 0 0 rgb(var(--m-primary) / 1), + 2px 0 0 0 rgb(var(--m-primary) / 1), + 0 -2px 0 0 rgb(var(--m-primary) / 1); + } + .m-combo-ring-bottom { + box-shadow: + -2px 0 0 0 rgb(var(--m-primary) / 1), + 2px 0 0 0 rgb(var(--m-primary) / 1), + 0 2px 0 0 rgb(var(--m-primary) / 1); + } } @layer base { diff --git a/app/components/malio/input/InputAutocomplete.vue b/app/components/malio/input/InputAutocomplete.vue index 5343ac0..362a97f 100644 --- a/app/components/malio/input/InputAutocomplete.vue +++ b/app/components/malio/input/InputAutocomplete.vue @@ -24,6 +24,7 @@ type="text" @input="onInput" @focus="onFocus" + @blur="onKbdBlur" @click="onInputClick" @keydown="onKeydown" > @@ -90,6 +91,7 @@ : hasSuccess ? 'border-m-success select-scrollbar-success' : 'border-m-primary select-scrollbar-primary', + keyboardFocused ? 'm-combo-ring-bottom' : '', ]" >