kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

fixes #10111: different colors for dropdown link hover and active states

This commit is contained in:
Mark Otto 2013-09-01 11:00:40 +02:00
parent e8f7d4fcef
commit 62477653e7
8 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
customize.html
View File

@ -916,10 +916,10 @@ base_url: "../"
<p class="help-block">Dropdown text color</p>
<label>@dropdown-link-hover-color</label>
<input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-hover-color">
<input type="text" class="form-control" placeholder="darken(@dropdown-link-color, 5%)" data-var="@dropdown-link-hover-color">
<p class="help-block">Hovered dropdown menu entry text color</p>
<label>@dropdown-link-hover-bg</label>
<input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-hover-bg">
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@dropdown-link-hover-bg">
<p class="help-block">Hovered dropdown menu entry text color</p>
<label>@dropdown-link-active-color</label>

11
dist/css/bootstrap-theme.css vendored
View File

@ -171,7 +171,16 @@
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:focus {
background-color: #e8e8e8;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e8e8e8, 100%);
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {

2
dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/css/bootstrap.css vendored
View File

@ -3276,9 +3276,9 @@ input[type="button"].btn-block {
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
color: #262626;
text-decoration: none;
background-color: #428bca;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a,

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
examples/theme/index.html
View File

@ -125,7 +125,7 @@
<div class="dropdown theme-dropdown clearfix">
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>

9
less/theme.less
View File

@ -84,12 +84,15 @@
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-active-bg, 5%);
}

8
less/variables.less
View File

@ -174,13 +174,13 @@
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-bg: #f5f5f5;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;