diff --git a/apps/block_scout_web/assets/css/components/_dropdown.scss b/apps/block_scout_web/assets/css/components/_dropdown.scss index f0a7e33661..5773b962b0 100644 --- a/apps/block_scout_web/assets/css/components/_dropdown.scss +++ b/apps/block_scout_web/assets/css/components/_dropdown.scss @@ -1,13 +1,17 @@ +$dropdown-menu-item-color: #333 !default; +$dropdown-menu-item-hover-color: #fff !default; +$dropdown-menu-item-hover-background: $secondary !default; + // These styles extend the default Bootstrap styles .dropdown-menu { + border-bottom: 1px solid #e2e5ec; + border-left: 1px solid #e2e5ec; border-radius: 0 0 8px 8px !important; + border-right: 1px solid #e2e5ec; border: none; box-shadow: $box-shadow; padding: 0; width: 100%; - border-left: 1px solid #e2e5ec; - border-right: 1px solid #e2e5ec; - border-bottom: 1px solid #e2e5ec; &.right { left: auto; @@ -27,11 +31,17 @@ } .dropdown-item { + color: $dropdown-menu-item-color; font-size: 12px; padding: 10px 20px; - &:hover { - color: #fff; + & { + &.active, + &:hover, + &:focus { + background-color: $dropdown-menu-item-hover-background; + color: $dropdown-menu-item-hover-color; + } } &:first-child { @@ -55,10 +65,6 @@ font-weight: 700; } } - - &.active { - background-color: $secondary; - } &.division { border-top: 1px solid $base-border-color;