fix dropdown vars and make hover state be link color again, add gradient to dropdown link hovers, fix caret positions and active states on nav tabs, tweak nav link padding

This commit is contained in:
Mark Otto 2012-07-17 22:26:53 -07:00
parent 6a663081a7
commit 39f8996d6a
4 changed files with 57 additions and 9 deletions

View File

@ -2623,7 +2623,7 @@ table .span24 {
.dropdown-menu a {
display: block;
padding: 3px 15px;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
@ -2633,9 +2633,17 @@ table .span24 {
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
color: #333333;
color: #ffffff;
text-decoration: none;
background-color: #eeeeee;
background-color: #0088cc;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-menu .active > a,
@ -2643,7 +2651,15 @@ table .span24 {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
background-color: #0081c2;
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-repeat: repeat-x;
outline: 0;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-menu .disabled > a,
@ -2657,6 +2673,11 @@ table .span24 {
background-color: transparent;
}
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
}
.open {
*z-index: 1000;
}
@ -3659,13 +3680,23 @@ input[type="submit"].btn.btn-mini {
border-bottom-color: #005580;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
margin-top: 8px;
}
.nav .active .dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.nav > .dropdown.active > a:hover {
color: #fff;
cursor: pointer;
}

View File

@ -84,7 +84,7 @@
// Links within the dropdown menu
a {
display: block;
padding: 3px 15px;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @baseLineHeight;
@ -98,8 +98,9 @@
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
text-decoration: none;
color: @dropdownLinkColorActive;
color: @dropdownLinkColorHover;
background-color: @dropdownLinkBackgroundHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}
// Active state
@ -108,8 +109,9 @@
.dropdown-menu .active > a:hover {
color: @dropdownLinkColorHover;
text-decoration: none;
background-color: @dropdownLinkBackgroundActive;
outline: 0;
background-color: @dropdownLinkBackgroundActive;
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
}
// Disabled state
@ -126,6 +128,14 @@
cursor: default;
}
// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
}
// Open state for the dropdown
// ---------------------------
.open {

View File

@ -213,6 +213,10 @@
border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
margin-top: 8px;
}
// Active dropdown links
// -------------------------
@ -220,11 +224,14 @@
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
border-top-color: @gray;
border-bottom-color: @gray;
}
// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
color: #fff;
cursor: pointer;
}

View File

@ -109,7 +109,7 @@
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @grayLighter;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
@dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkBackgroundActive: @linkColor;