From 87af5d3bbe3546f9b876add2e35ad656accfc3ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 20:42:31 -0700 Subject: more subnav optimizations --- less/dropdowns.less | 4 ++-- less/navbar.less | 4 ++++ less/navs.less | 19 ++++++++----------- less/subnav.less | 48 +++++++++++++++++++++++++++--------------------- less/variables.less | 10 ---------- 5 files changed, 41 insertions(+), 44 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index bd2dab772d..f55edbae7c 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -54,7 +54,7 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: 160px; - padding: 4px 0; + padding: 5px 0; margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; @@ -62,7 +62,7 @@ border: 1px solid rgba(0,0,0,.2); *border-right-width: 2px; *border-bottom-width: 2px; - .border-radius(5px); + .border-radius(6px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; diff --git a/less/navbar.less b/less/navbar.less index d1bfc2209b..705169fe20 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -205,6 +205,10 @@ text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; +} + // Buttons .navbar .btn { display: inline-block; diff --git a/less/navs.less b/less/navs.less index 66d985a933..66ce6fa3ae 100644 --- a/less/navs.less +++ b/less/navs.less @@ -195,39 +195,36 @@ // --------- .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 { - .border-radius(4px); // make rounded corners match the pills + .border-radius(6px); // make rounded corners match the pills } // Default dropdown links // ------------------------- // Make carets use linkColor to start -.nav-tabs .dropdown-toggle .caret, -.nav-pills .dropdown-toggle .caret { +.nav .dropdown-toggle .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; margin-top: 6px; } -.nav-tabs .dropdown-toggle:hover .caret, -.nav-pills .dropdown-toggle:hover .caret { +.nav .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; border-bottom-color: @linkColorHover; } // Active dropdown links // ------------------------- -.nav-tabs .active .dropdown-toggle .caret, -.nav-pills .active .dropdown-toggle .caret { - border-top-color: @grayDark; - border-bottom-color: @grayDark; +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; } // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { - color: @black; + color: #fff; cursor: pointer; } diff --git a/less/subnav.less b/less/subnav.less index 4f68269a7e..9d0e714dbd 100644 --- a/less/subnav.less +++ b/less/subnav.less @@ -6,12 +6,12 @@ ------------------------- */ .subnav { width: 100%; - height: @subnavHeight; - #gradient > .vertical(@subnavBackgroundHighlight, @subnavBackground); - border: 1px solid @subnavBorder; - -webkit-border-radius: @subnavBorderRadius; - -moz-border-radius: @subnavBorderRadius; - border-radius: @subnavBorderRadius; + height: 36px; + #gradient > .vertical(#f5f5f5, #eeeeee); + border: 1px solid #e5e5e5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } @@ -20,14 +20,15 @@ .subnav .nav { margin-bottom: 0; // remove default bottom margin of .nav } +// Make list items appear inline .subnav .nav > li { float: left; } .subnav .nav > li > a { - padding: 8px 12px; - line-height: 20px; - border-left: 1px solid @subnavBackgroundHighlight; - border-right: 1px solid @subnavBorder; + padding: 9px 12px; + line-height: 18px; + border-left: 1px solid #f5f5f5; + border-right: 1px solid #e5e5e5; } .subnav .nav > .active > a, .subnav .nav > .active > a:hover { @@ -40,27 +41,32 @@ -moz-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:hover { border-left: 0; padding-left: 12px; - -webkit-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; - -moz-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; - border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .subnav .nav > li:last-child > a { 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 { - -webkit-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; - -moz-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; - border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } diff --git a/less/variables.less b/less/variables.less index 0060e207ca..25a032781d 100644 --- a/less/variables.less +++ b/less/variables.less @@ -168,16 +168,6 @@ @navbarBrandColor: @navbarLinkColor; -// Subnav -// ------------------------- -@subnavHeight: 36px; -@subnavBackground: #eeeeee; -@subnavBackgroundHighlight: #f5f5f5; - -@subnavBorder: #e5e5e5; -@subnavBorderRadius: 4px; - - // Hero unit // ------------------------- @heroUnitBackground: @grayLighter; -- cgit v1.2.3