From ac64d9405b3f650704f2e63b52c26b9f6f792cb8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 23:09:31 -0700 Subject: Dropdowns overhaul: 1. Removed broken and unused dropup examples from the navs/pills docs 2. New defaults for dropdown menus: all corners are rounded and always 1px offset from top unless otherwise specified 3. Refined active and open states for button dropdowns by adding a darker background color for each button variation when opened; also changed the opened dropdown-toggle's inset shadow to match that of an :active button 4. Generalized .dropdown.open to just .open, thus removing a few lines from button-groups.less. 5. Annnnnnnnnd I think that's it. --- less/button-groups.less | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index d3e7a7490..627c067e7 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -114,24 +114,41 @@ } .btn-group.open { - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; - - // Reposition menu on open and round all corners - .dropdown-menu { - display: block; - margin-top: 1px; - .border-radius(5px); - } + // The clickable button for toggling the menu + // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } + + // Keep the hover's background when dropdown is open + .btn.dropdown-toggle { + background-color: @btnBackgroundHighlight; + } + .btn-primary.dropdown-toggle { + background-color: @btnPrimaryBackgroundHighlight; + } + .btn-warning.dropdown-toggle { + background-color: @btnWarningBackgroundHighlight; + } + .btn-danger.dropdown-toggle { + background-color: @btnDangerBackgroundHighlight; + } + .btn-success.dropdown-toggle { + background-color: @btnSuccessBackgroundHighlight; + } + .btn-info.dropdown-toggle { + background-color: @btnInfoBackgroundHighlight; + } + .btn-inverse.dropdown-toggle { + background-color: @btnInverseBackgroundHighlight; + } } + + // Reposition the caret .btn .caret { margin-top: 7px; -- cgit v1.2.3 From 2729d15742e61c0bf52966064eb260409b55a600 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 00:37:15 -0700 Subject: fix #2625 manually: account for dropup caret on large button --- less/button-groups.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 627c067e7..d28e5bbad 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -148,7 +148,6 @@ } - // Reposition the caret .btn .caret { margin-top: 7px; @@ -167,12 +166,18 @@ } .btn-large .caret { margin-top: 6px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid @black; + border-left-width: 5px; + border-right-width: 5px; + border-top-width: 5px; +} +// Upside down carets for .dropup +.dropup .btn-large .caret { + border-bottom: 5px solid @black; + border-top: 0; } + // Account for other colors .btn-primary, .btn-warning, -- cgit v1.2.3 From c7afe382a26834cce5b8bf2fc7333ce7e945a2d4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 20:56:04 -0700 Subject: fix other instances of mixins, swap use of box-shadow everywhere, include border-radius and transition --- less/button-groups.less | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index d3e7a7490..d4006f8a0 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -93,8 +93,9 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), + inset 0 1px 0 rgba(255,255,255,.2), + 0 1px 2px rgba(0,0,0,.05)); *padding-top: 3px; *padding-bottom: 3px; } @@ -127,8 +128,8 @@ .dropdown-toggle { background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(inset 0 1px 6px rgba(0,0,0,.15), + 0 1px 2px rgba(0,0,0,.05)); } } -- cgit v1.2.3 From a5552a1d700a1caa2d87ea4bbccc59205b6e72f9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 12:42:47 -0700 Subject: revert bart's mixin fix --- less/button-groups.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 81961123d..65c974a39 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -93,9 +93,10 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), - inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05)); + @shadow: inset 1px 0 0 rgba(255,255,255,.125), + inset 0 1px 0 rgba(255,255,255,.2), + 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); *padding-top: 3px; *padding-bottom: 3px; } @@ -120,8 +121,9 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05)); + @shadow: inset 0 2px 4px rgba(0,0,0,.15), + 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); } // Keep the hover's background when dropdown is open -- cgit v1.2.3 From 2355fd224ddcd571765c5ad2f2242dac65789aa4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2012 21:06:16 -0700 Subject: remove @shadow instances and replace with escaped values, update mixins to not use a default value at all --- less/button-groups.less | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 65c974a39..1261ba5cc 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -93,10 +93,7 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), - inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 3px; *padding-bottom: 3px; } @@ -121,9 +118,7 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Keep the hover's background when dropdown is open -- cgit v1.2.3 From 2988de6377d8ccc456af6d4ef1b3064c6c5a1f3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Apr 2012 22:37:58 -0700 Subject: fix #2913: get more specific with button group selectors --- less/button-groups.less | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 1261ba5cc..7c6a02a67 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -25,14 +25,14 @@ } // Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { +.btn-group > .btn { position: relative; float: left; margin-left: -1px; .border-radius(0); } // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group .btn:first-child { +.btn-group > .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; @@ -41,8 +41,8 @@ -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; } -.btn-group .btn:last-child, -.btn-group .dropdown-toggle { +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; @@ -51,7 +51,7 @@ border-bottom-right-radius: 4px; } // Reset corners for large buttons -.btn-group .btn.large:first-child { +.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; @@ -60,8 +60,8 @@ -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; } -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle { +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; @@ -71,10 +71,10 @@ } // On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { z-index: 2; } @@ -90,24 +90,24 @@ // ---------------------- // Give the line between buttons some depth -.btn-group .dropdown-toggle { +.btn-group > .dropdown-toggle { padding-left: 8px; padding-right: 8px; .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 3px; *padding-bottom: 3px; } -.btn-group .btn-mini.dropdown-toggle { +.btn-group > .btn-mini.dropdown-toggle { padding-left: 5px; padding-right: 5px; *padding-top: 1px; *padding-bottom: 1px; } -.btn-group .btn-small.dropdown-toggle { +.btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group .btn-large.dropdown-toggle { +.btn-group > .btn-large.dropdown-toggle { padding-left: 12px; padding-right: 12px; } -- cgit v1.2.3 From 419e50e33974f7741c4e6b25772f2be65aa73240 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Apr 2012 10:06:35 -0700 Subject: fix up buttons after recess property order --- less/button-groups.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 7c6a02a67..023adcb5e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -41,6 +41,7 @@ -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; } +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it .btn-group > .btn:last-child, .btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; -- cgit v1.2.3 From 1c2db11d58cfb35ab513d104eb845b4dce34f750 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Apr 2012 01:46:20 -0700 Subject: fix ie7 button group toggles and button borders --- less/button-groups.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 023adcb5e..5338c5a45 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -95,14 +95,12 @@ padding-left: 8px; padding-right: 8px; .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - *padding-top: 3px; - *padding-bottom: 3px; + *padding-top: 4px; + *padding-bottom: 4px; } .btn-group > .btn-mini.dropdown-toggle { padding-left: 5px; padding-right: 5px; - *padding-top: 1px; - *padding-bottom: 1px; } .btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; -- cgit v1.2.3