From a7b49a7d92a0efa640179b775e309002afc50390 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 17 May 2012 00:23:11 -0700 Subject: nearly everything working with activedescendant... then decide it's wrong. --- less/dropdowns.less | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 96dfec223..c27e73ded 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -34,11 +34,16 @@ margin-top: 8px; margin-left: 2px; } -.dropdown:hover .caret, +.dropdown a:focus .caret, +.dropdown a:hover .caret, .open .caret { .opacity(100); } +.navbar .nav .open > a { + color: @navbarLinkColorActive; +} + // The dropdown menu (ul) // ---------------------- .dropdown-menu { @@ -90,11 +95,17 @@ // ----------- .dropdown-menu li > a:hover, .dropdown-menu .active > a, -.dropdown-menu .active > a:hover { +.dropdown-menu .active > a:hover, +.dropdown-menu:hover #aria-active > a:hover, +.dropdown-menu #aria-active > a { color: @dropdownLinkColorHover; text-decoration: none; background-color: @dropdownLinkBackgroundHover; } +.dropdown-menu:hover #aria-active > a { + color: @dropdownLinkColor; + background-color: @dropdownBackground; +} // Open state for the dropdown // --------------------------- -- cgit v1.2.3 From 9889948f5851f5ce19668073b1f88eb4b6082ea6 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 17 May 2012 00:39:14 -0700 Subject: abandon activedescendant because it was awful --- less/dropdowns.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index c27e73ded..42d7bd0ca 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -94,17 +94,13 @@ // Hover state // ----------- .dropdown-menu li > a:hover, +.dropdown-menu li > a:focus, .dropdown-menu .active > a, -.dropdown-menu .active > a:hover, -.dropdown-menu:hover #aria-active > a:hover, -.dropdown-menu #aria-active > a { +.dropdown-menu .active > a:hover { color: @dropdownLinkColorHover; text-decoration: none; background-color: @dropdownLinkBackgroundHover; -} -.dropdown-menu:hover #aria-active > a { - color: @dropdownLinkColor; - background-color: @dropdownBackground; + outline: 0; } // Open state for the dropdown -- cgit v1.2.3 From 64ba423b6d06c98e95e23d8c34df62a47a421a03 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 13:52:07 -0700 Subject: #2764: add disabled styles to navs and dropdowns --- less/dropdowns.less | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index f965d292d..648a9f246 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -103,6 +103,20 @@ outline: 0; } +// Disabled state +// -------------- +// Gray out text and ensure the hover state remains gray +.dropdown-menu .disabled > a, +.dropdown-menu .disabled > a:hover { + color: @grayLight; +} +// Nuke hover effects +.dropdown-menu .disabled > a:hover { + text-decoration: none; + background-color: transparent; + cursor: default; +} + // Open state for the dropdown // --------------------------- .open { -- cgit v1.2.3 From 9df832b4bb81d80fd02b4fe6cc9ea826b0b0454e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 19:17:42 -0700 Subject: add separate vars for dropdown link hover and active states --- less/dropdowns.less | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 648a9f246..bd2dab772 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -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; } -- cgit v1.2.3 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 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index bd2dab772..f55edbae7 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; -- cgit v1.2.3 From cd2d82150cc27c1f81d2394a22efbf2dbec0e7be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 21:46:45 -0700 Subject: standardize top level file comments --- less/dropdowns.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index f55edbae7..e9e91b6a4 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -1,5 +1,7 @@ -// DROPDOWN MENUS -// -------------- +// +// Dropdown menus +// -------------------------------------------------- + // Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns .dropup, -- cgit v1.2.3 From 9887d3cf4af4897c4959491ece2fe56bef3d1114 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:26:32 -0700 Subject: updating docs examples to remove 13/18 resets, fix up buttons alignments and carets --- less/dropdowns.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index e9e91b6a4..705b25d50 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -22,8 +22,8 @@ .caret { display: inline-block; width: 0; - height: 0; - vertical-align: top; + height: 3px; + vertical-align: middle; border-top: 4px solid @black; border-right: 4px solid transparent; border-left: 4px solid transparent; @@ -33,7 +33,6 @@ // Place the caret .dropdown .caret { - margin-top: 8px; margin-left: 2px; } .dropdown a:focus .caret, @@ -153,6 +152,8 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { + margin-top: -2px; + height: 0; border-top: 0; border-bottom: 4px solid @black; content: "\2191"; -- cgit v1.2.3 From 25d0b341a9a89ae2f0da4a506c26ac77db011350 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:31:54 -0700 Subject: wasn't feeling the new buttons, downsizing again until we get a better balance --- less/dropdowns.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 705b25d50..e9e91b6a4 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -22,8 +22,8 @@ .caret { display: inline-block; width: 0; - height: 3px; - vertical-align: middle; + height: 0; + vertical-align: top; border-top: 4px solid @black; border-right: 4px solid transparent; border-left: 4px solid transparent; @@ -33,6 +33,7 @@ // Place the caret .dropdown .caret { + margin-top: 8px; margin-left: 2px; } .dropdown a:focus .caret, @@ -152,8 +153,6 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - margin-top: -2px; - height: 0; border-top: 0; border-bottom: 4px solid @black; content: "\2191"; -- cgit v1.2.3 From 39f8996d6a34ac2fab1bdf47db65fd9bde891308 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 22:26:53 -0700 Subject: 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 --- less/dropdowns.less | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index e9e91b6a4..1e4f33ff6 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -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 { -- cgit v1.2.3 From 5b8ff7061b659286bdd27c756bf8a58b05ba70d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Jul 2012 14:31:39 -0700 Subject: fixes #4136: use @dropdownBorder var, but keep IE7-8 fallback --- less/dropdowns.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 1e4f33ff6..5f62d27f0 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -60,8 +60,8 @@ margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); + border: 1px solid #ccc; // Fallback for IE7-8 + border: 1px solid @dropdownBorder; *border-right-width: 2px; *border-bottom-width: 2px; .border-radius(6px); -- cgit v1.2.3 From 9d5c4312232ebb53b2499ed495851c0d61eb648c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:06:54 -0700 Subject: add basic support for sub menus in dropdown menus --- less/dropdowns.less | 38 +++++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 5f62d27f0..a36c3a416 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -96,7 +96,8 @@ // Hover state // ----------- .dropdown-menu li > a:hover, -.dropdown-menu li > a:focus { +.dropdown-menu li > a:focus, +.dropdown-submenu:hover > a { text-decoration: none; color: @dropdownLinkColorHover; background-color: @dropdownLinkBackgroundHover; @@ -128,14 +129,6 @@ 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 { @@ -175,6 +168,33 @@ } } +// Sub menus +// --------------------------- +.dropdown-submenu { + position: relative; +} +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -5px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} +.dropdown-submenu:hover .dropdown-menu { + display: block; +} + + +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + // Typeahead // --------- .typeahead { -- cgit v1.2.3 From 16b4ac0d8fd5fd2aa588a8b486b71b449e3821ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:35:15 -0700 Subject: add docs for sub menu support on dropdowns, add caret via :after to submenu toggles --- less/dropdowns.less | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index a36c3a416..fb85ca57a 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -176,7 +176,7 @@ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; - margin-top: -5px; + margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; @@ -186,6 +186,23 @@ display: block; } +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: darken(@dropdownBackground, 20%); + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: @dropdownLinkColorHover; +} + // Tweak nav headers // ----------------- -- cgit v1.2.3 From a30045daef809edf5ed592ad842c04377898e444 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 00:30:15 -0700 Subject: reverse navbar styles to save code --- less/dropdowns.less | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'less/dropdowns.less') diff --git a/less/dropdowns.less b/less/dropdowns.less index fb85ca57a..e83915dba 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -28,7 +28,6 @@ border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; - .opacity(30); } // Place the caret @@ -36,15 +35,6 @@ margin-top: 8px; margin-left: 2px; } -.dropdown a:focus .caret, -.dropdown a:hover .caret, -.open .caret { - .opacity(100); -} - -.navbar .nav .open > a { - color: @navbarLinkColorActive; -} // The dropdown menu (ul) // ---------------------- @@ -57,7 +47,7 @@ float: left; min-width: 160px; padding: 5px 0; - margin: 1px 0 0; // override default ul + margin: 2px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; border: 1px solid #ccc; // Fallback for IE7-8 -- cgit v1.2.3