diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 74161567ab5..7ade9184a91 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -143,6 +143,16 @@ } } +@mixin dropdown-item-hover { + background-color: $dropdown-item-hover-bg; + color: $gl-text-color; + + // make sure the text color is not overriden + &.text-danger { + color: $brand-danger; + } +} + @mixin dropdown-link { display: block; position: relative; @@ -159,9 +169,11 @@ } &:hover, + &:active, &:focus, &.is-focused { - background-color: $dropdown-link-hover-bg; + @include dropdown-item-hover; + text-decoration: none; .badge { @@ -239,6 +251,12 @@ text-align: left; list-style: none; padding: 0 10px; + + a, + button, + .menu-item { + @include dropdown-link; + } } .divider { @@ -260,10 +278,6 @@ background-color: $dropdown-divider-color; } - a { - @include dropdown-link; - } - .dropdown-menu-empty-item a { &:hover, &:focus { @@ -314,6 +328,10 @@ padding: $gl-btn-padding; cursor: pointer; + &.droplab-item-active button { + @include dropdown-item-hover; + } + > a, > button { display: flex; @@ -321,17 +339,9 @@ padding: 0; border-radius: 0; text-overflow: inherit; - background-color: inherit; - color: inherit; border: inherit; text-align: left; - &:hover, - &:focus { - background-color: inherit; - color: inherit; - } - &.btn .fa:not(:last-child) { margin-left: 5px; } @@ -744,11 +754,6 @@ } } -@mixin dropdown-item-hover { - background-color: $dropdown-item-hover-bg; - color: $gl-text-color; -} - // TODO: change global style and remove mixin @mixin new-style-dropdown($selector: '') { #{$selector}.dropdown-menu, @@ -763,10 +768,6 @@ background-color: transparent; } - &.droplab-item-active button { - @include dropdown-item-hover; - } - a, button, .menu-item { @@ -787,23 +788,6 @@ display: block; } } - - &.is-focused, - &:hover, - &:active, - &:focus { - @include dropdown-item-hover; - - background-color: $dropdown-item-hover-bg; - color: $gl-text-color; - } - } - - &.dropdown-menu-empty-item a { - &:hover, - &:focus { - background-color: transparent; - } } }