root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

add separate vars for dropdown link hover and active states

This commit is contained in:
Mark Otto 2012-06-19 19:17:42 -07:00
parent 40298ddbf1
commit 9df832b4bb
5 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/assets/css/bootstrap.css vendored
View File

@ -2457,7 +2457,12 @@ table .span24 {
} }
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus, .dropdown-menu li > a:focus {
color: #333333;
text-decoration: none;
background-color: #eeeeee;
}
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
color: #ffffff; color: #ffffff;

8
docs/less.html
View File

@ -594,8 +594,16 @@
<td><code>@dropdownLinkColorHover</code></td> <td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td> <td><code>@white</code></td>
</tr> </tr>
<tr>
<td><code>@dropdownLinkColorActive</code></td>
<td><code>@linkColor</code></td>
</tr>
<tr> <tr>
<td><code>@dropdownLinkBackgroundHover</code></td> <td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@grayLighter</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundActive</code></td>
<td><code>@linkColor</code></td> <td><code>@linkColor</code></td>
</tr> </tr>
<tr> <tr>

8
docs/templates/pages/less.mustache vendored
View File

@ -517,8 +517,16 @@
<td><code>@dropdownLinkColorHover</code></td> <td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td> <td><code>@white</code></td>
</tr> </tr>
<tr>
<td><code>@dropdownLinkColorActive</code></td>
<td><code>@linkColor</code></td>
</tr>
<tr> <tr>
<td><code>@dropdownLinkBackgroundHover</code></td> <td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@grayLighter</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundActive</code></td>
<td><code>@linkColor</code></td> <td><code>@linkColor</code></td>
</tr> </tr>
<tr> <tr>

11
less/dropdowns.less
View File

@ -94,12 +94,19 @@
// Hover state // Hover state
// ----------- // -----------
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus, .dropdown-menu li > a:focus {
text-decoration: none;
color: @dropdownLinkColorActive;
background-color: @dropdownLinkBackgroundHover;
}
// Active state
// ------------
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
color: @dropdownLinkColorHover; color: @dropdownLinkColorHover;
text-decoration: none; text-decoration: none;
background-color: @dropdownLinkBackgroundHover; background-color: @dropdownLinkBackgroundActive;
outline: 0; outline: 0;
} }

11
less/variables.less
View File

@ -104,12 +104,17 @@
// ------------------------- // -------------------------
@dropdownBackground: @white; @dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2); @dropdownBorder: rgba(0,0,0,.2);
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @linkColor;
@dropdownDividerTop: #e5e5e5; @dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white; @dropdownDividerBottom: @white;
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @grayLighter;
@dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkBackgroundActive: @linkColor;
// COMPONENT VARIABLES // COMPONENT VARIABLES