From c77980aa1ba8b44b773c0dd383901a44f6ed4f44 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 15 Apr 2024 10:18:38 +0100 Subject: [PATCH] Fix: Matching dropdown list style improvements (fixes #478) (#507) * only apply selected styles when a dropdown item has been selected * apply border to dropdown list to distinguish end of list * remove bottom border from last item to prevent double up of border --- less/plugins/adapt-contrib-matching/dropdown.less | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 57d4178d..bb68fd6d 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -40,20 +40,29 @@ } } +.dropdown__list { + border: 0.19rem solid @item-color-selected; +} + .dropdown-item { padding: @item-padding; background-color: @item-color; border-bottom: 1px solid @item-color-hover; color: @item-color-inverted; - .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + &:last-child { + border-bottom: none; + } + + .no-touch &:not(:focus-visible):hover, + .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"]:hover { background-color: @item-color-hover; color: @item-color-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } &:focus-visible, - &[aria-selected="true"] { + .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { // This code can be used to style a non-native dropdown as closely // as possible to the default browser settings // background-color: Highlight;