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

more subnav optimizations

This commit is contained in:
Mark Otto 2012-06-24 20:42:31 -07:00
parent 71669dda63
commit 87af5d3bbe
6 changed files with 79 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2532,7 +2532,7 @@ table .span24 {
display: none; display: none;
float: left; float: left;
min-width: 160px; min-width: 160px;
padding: 4px 0; padding: 5px 0;
margin: 1px 0 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: #ffffff; background-color: #ffffff;
@ -2540,9 +2540,9 @@ table .span24 {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px; *border-right-width: 2px;
*border-bottom-width: 2px; *border-bottom-width: 2px;
-webkit-border-radius: 5px; -webkit-border-radius: 6px;
-moz-border-radius: 5px; -moz-border-radius: 6px;
border-radius: 5px; border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@ -3585,38 +3585,35 @@ input[type="submit"].btn.btn-mini {
} }
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
-webkit-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 5px 5px; border-radius: 0 0 6px 6px;
} }
.nav-pills .dropdown-menu { .nav-pills .dropdown-menu {
-webkit-border-radius: 4px; -webkit-border-radius: 6px;
-moz-border-radius: 4px; -moz-border-radius: 6px;
border-radius: 4px; border-radius: 6px;
} }
.nav-tabs .dropdown-toggle .caret, .nav .dropdown-toggle .caret {
.nav-pills .dropdown-toggle .caret {
margin-top: 6px; margin-top: 6px;
border-top-color: #0088cc; border-top-color: #0088cc;
border-bottom-color: #0088cc; border-bottom-color: #0088cc;
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav .dropdown-toggle:hover .caret {
.nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580; border-top-color: #005580;
border-bottom-color: #005580; border-bottom-color: #005580;
} }
.nav-tabs .active .dropdown-toggle .caret, .nav .active .dropdown-toggle .caret {
.nav-pills .active .dropdown-toggle .caret { border-top-color: #fff;
border-top-color: #333333; border-bottom-color: #fff;
border-bottom-color: #333333;
} }
.nav > .dropdown.active > a:hover { .nav > .dropdown.active > a:hover {
color: #000000; color: #fff;
cursor: pointer; cursor: pointer;
} }
@ -3997,6 +3994,10 @@ input[type="submit"].btn.btn-mini {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} }
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
.navbar .btn { .navbar .btn {
display: inline-block; display: inline-block;
padding: 4px 10px 4px; padding: 4px 10px 4px;
@ -4207,8 +4208,8 @@ input[type="submit"].btn.btn-mini {
} }
.subnav .nav > li > a { .subnav .nav > li > a {
padding: 8px 12px; padding: 9px 12px;
line-height: 20px; line-height: 18px;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
border-left: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5;
} }
@ -4225,11 +4226,6 @@ input[type="submit"].btn.btn-mini {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05);
} }
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret {
border-top-color: #777;
}
.subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover { .subnav .nav > li:first-child > a:hover {
padding-left: 12px; padding-left: 12px;
@ -4243,13 +4239,24 @@ input[type="submit"].btn.btn-mini {
border-right: 0; border-right: 0;
} }
/* Dropdown menus get matching border-radius /* Reposition the dropdown carets */
.subnav .dropdown-menu {
-webkit-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; .subnav .nav .dropdown-toggle .caret {
-moz-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; margin-top: 7px;
border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius;
} }
.nav .active .dropdown-toggle .caret {
border-top-color: #777;
border-bottom-color: #777;
}
/* Dropdown menus get matching border-radius */
.subnav .dropdown-menu {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */

4
less/dropdowns.less
View File

@ -54,7 +54,7 @@
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
float: left; float: left;
min-width: 160px; min-width: 160px;
padding: 4px 0; padding: 5px 0;
margin: 1px 0 0; // override default ul margin: 1px 0 0; // override default ul
list-style: none; list-style: none;
background-color: @dropdownBackground; background-color: @dropdownBackground;
@ -62,7 +62,7 @@
border: 1px solid rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px; *border-right-width: 2px;
*border-bottom-width: 2px; *border-bottom-width: 2px;
.border-radius(5px); .border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2)); .box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-moz-background-clip: padding; -moz-background-clip: padding;

4
less/navbar.less
View File

@ -205,6 +205,10 @@
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
} }
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
// Buttons // Buttons
.navbar .btn { .navbar .btn {
display: inline-block; display: inline-block;

19
less/navs.less
View File

@ -195,39 +195,36 @@
// --------- // ---------
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
.border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
} }
.nav-pills .dropdown-menu { .nav-pills .dropdown-menu {
.border-radius(4px); // make rounded corners match the pills .border-radius(6px); // make rounded corners match the pills
} }
// Default dropdown links // Default dropdown links
// ------------------------- // -------------------------
// Make carets use linkColor to start // Make carets use linkColor to start
.nav-tabs .dropdown-toggle .caret, .nav .dropdown-toggle .caret {
.nav-pills .dropdown-toggle .caret {
border-top-color: @linkColor; border-top-color: @linkColor;
border-bottom-color: @linkColor; border-bottom-color: @linkColor;
margin-top: 6px; margin-top: 6px;
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav .dropdown-toggle:hover .caret {
.nav-pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover; border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover; border-bottom-color: @linkColorHover;
} }
// Active dropdown links // Active dropdown links
// ------------------------- // -------------------------
.nav-tabs .active .dropdown-toggle .caret, .nav .active .dropdown-toggle .caret {
.nav-pills .active .dropdown-toggle .caret { border-top-color: #fff;
border-top-color: @grayDark; border-bottom-color: #fff;
border-bottom-color: @grayDark;
} }
// Active:hover dropdown links // Active:hover dropdown links
// ------------------------- // -------------------------
.nav > .dropdown.active > a:hover { .nav > .dropdown.active > a:hover {
color: @black; color: #fff;
cursor: pointer; cursor: pointer;
} }

48
less/subnav.less
View File

@ -6,12 +6,12 @@
------------------------- */ ------------------------- */
.subnav { .subnav {
width: 100%; width: 100%;
height: @subnavHeight; height: 36px;
#gradient > .vertical(@subnavBackgroundHighlight, @subnavBackground); #gradient > .vertical(#f5f5f5, #eeeeee);
border: 1px solid @subnavBorder; border: 1px solid #e5e5e5;
-webkit-border-radius: @subnavBorderRadius; -webkit-border-radius: 4px;
-moz-border-radius: @subnavBorderRadius; -moz-border-radius: 4px;
border-radius: @subnavBorderRadius; border-radius: 4px;
} }
@ -20,14 +20,15 @@
.subnav .nav { .subnav .nav {
margin-bottom: 0; // remove default bottom margin of .nav margin-bottom: 0; // remove default bottom margin of .nav
} }
// Make list items appear inline
.subnav .nav > li { .subnav .nav > li {
float: left; float: left;
} }
.subnav .nav > li > a { .subnav .nav > li > a {
padding: 8px 12px; padding: 9px 12px;
line-height: 20px; line-height: 18px;
border-left: 1px solid @subnavBackgroundHighlight; border-left: 1px solid #f5f5f5;
border-right: 1px solid @subnavBorder; border-right: 1px solid #e5e5e5;
} }
.subnav .nav > .active > a, .subnav .nav > .active > a,
.subnav .nav > .active > a:hover { .subnav .nav > .active > a:hover {
@ -40,27 +41,32 @@
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
box-shadow: inset 0 3px 5px rgba(0,0,0,.05); box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
} }
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret {
border-top-color: #777;
}
.subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover { .subnav .nav > li:first-child > a:hover {
border-left: 0; border-left: 0;
padding-left: 12px; padding-left: 12px;
-webkit-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; -webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; -moz-border-radius: 4px 0 0 4px;
border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; border-radius: 4px 0 0 4px;
} }
.subnav .nav > li:last-child > a { .subnav .nav > li:last-child > a {
border-right: 0; border-right: 0;
} }
/* Dropdown menus get matching border-radius /* Reposition the dropdown carets */
.subnav .nav .dropdown-toggle .caret {
margin-top: 7px;
}
.nav .active .dropdown-toggle .caret {
border-top-color: #777;
border-bottom-color: #777;
}
/* Dropdown menus get matching border-radius */
.subnav .dropdown-menu { .subnav .dropdown-menu {
-webkit-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; -webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; -moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; border-radius: 0 0 4px 4px;
} }

10
less/variables.less
View File

@ -168,16 +168,6 @@
@navbarBrandColor: @navbarLinkColor; @navbarBrandColor: @navbarLinkColor;
// Subnav
// -------------------------
@subnavHeight: 36px;
@subnavBackground: #eeeeee;
@subnavBackgroundHighlight: #f5f5f5;
@subnavBorder: #e5e5e5;
@subnavBorderRadius: 4px;
// Hero unit // Hero unit
// ------------------------- // -------------------------
@heroUnitBackground: @grayLighter; @heroUnitBackground: @grayLighter;