kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Make new dropdown-item-hover style global

Browse source
This commit is contained in:
Winnie Hellmann 2017-10-09 14:29:47 +02:00
parent 915d2b9ba2
commit 0c4cda2494
1 changed files with 23 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
app/assets/stylesheets/framework/dropdowns.scss
View file

@ -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;
}
}
}