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

View File

@ -2457,7 +2457,12 @@ table .span24 {
}
.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:hover {
color: #ffffff;

View File

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

View File

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

View File

@ -94,12 +94,19 @@
// Hover state
// -----------
.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:hover {
color: @dropdownLinkColorHover;
text-decoration: none;
background-color: @dropdownLinkBackgroundHover;
background-color: @dropdownLinkBackgroundActive;
outline: 0;
}

View File

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