From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- less/button-groups.less | 121 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 less/button-groups.less (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less new file mode 100644 index 000000000..5fb0a8e97 --- /dev/null +++ b/less/button-groups.less @@ -0,0 +1,121 @@ +// BUTTON GROUPS +// ------------- + + +// Make the div behave like a button +.btn-group { + position: relative; + .clearfix(); // clears the floated buttons +} + +// Space out series of button groups +.btn-group + .btn-group { + margin-left: 5px; +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + .btn-group { + display: inline-block; + } +} + +// Float them, remove border radius, then re-add to first and last elements +.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 { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; +} +.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; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; +} +// Reset corners for large buttons +.btn-group .btn.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; +} +.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; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; +} + +// On hover/focus/active, bring the proper btn to front +.btn-group .btn:hover, +.btn-group .btn:focus, +.btn-group .btn:active { + z-index: 2; +} + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.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); +} + +// Reposition menu on open and round all corners +.btn-group.open .dropdown-menu { + display: block; + margin-top: 1px; + .border-radius(5px); +} +.btn-group.open .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); +} + +// Reposition the caret +.btn .caret { + margin-top: 6px; + margin-left: 0; +} + +// Account for other colors +.primary, +.danger, +.info, +.success { + .caret { + border-top-color: @white; + .opacity(75); + } +} + +// Small button dropdowns +.btn.small .caret { + margin-top: 4px; +} + -- cgit v1.2.3 From 43f1a42f7f254ad5d776564122bdae6547a4fbcd Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 13:57:51 -0500 Subject: Adds necessary ie7-inline-block macros --- 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 5fb0a8e97..fd802cc35 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -17,6 +17,7 @@ .btn-toolbar { .btn-group { display: inline-block; + .ie7-inline-block; } } -- cgit v1.2.3 From 8328987b15e0bb9e1c2ee1bd90e8dee9843f0ea7 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 16:06:58 -0500 Subject: IE7 fixes for split buttons and dropdowns --- less/button-groups.less | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index fd802cc35..a058f0344 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -6,6 +6,7 @@ .btn-group { position: relative; .clearfix(); // clears the floated buttons + .ie7-restore-left-whitespace; } // Space out series of button groups @@ -84,18 +85,27 @@ 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); + *padding-top: 5px; + *padding-bottom: 5px; } -// Reposition menu on open and round all corners -.btn-group.open .dropdown-menu { - display: block; - margin-top: 1px; - .border-radius(5px); -} -.btn-group.open .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); +.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); + } + + .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); + } } // Reposition the caret -- cgit v1.2.3 From 997fc33af9a4cbdc078e85ee491f777d0dd2d51a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 16:40:14 -0800 Subject: clean up use of mixins to highlight them appropriately in your fav editor --- less/button-groups.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index a058f0344..fafc95584 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -6,7 +6,7 @@ .btn-group { position: relative; .clearfix(); // clears the floated buttons - .ie7-restore-left-whitespace; + .ie7-restore-left-whitespace(); } // Space out series of button groups @@ -18,7 +18,7 @@ .btn-toolbar { .btn-group { display: inline-block; - .ie7-inline-block; + .ie7-inline-block(); } } -- cgit v1.2.3 From d02c6957d44761c35121cb88af727802ce4d9e5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 19:49:56 -0800 Subject: fixing up buttons and examples of implementing icons --- less/button-groups.less | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index fafc95584..471d33748 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -16,6 +16,8 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { + margin-top: @baseLineHeight / 2; + margin-bottom: @baseLineHeight / 2; .btn-group { display: inline-block; .ie7-inline-block(); @@ -110,9 +112,14 @@ // Reposition the caret .btn .caret { - margin-top: 6px; + margin-top: 7px; margin-left: 0; } +.btn:hover .caret, +.open.btn-group .caret { + .opacity(100); +} + // Account for other colors .primary, -- cgit v1.2.3 From 3934d1b6c4cb975967235547b77e90b4c8c91be2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 21:08:04 -0800 Subject: rgba text color on active buttons for a bit more contrast from their non-active siblings --- less/button-groups.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 471d33748..3e08e6b09 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -73,7 +73,8 @@ // 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.active { z-index: 2; } -- cgit v1.2.3 From 28ba9d69c82895bbd9a1d66cea855119f4aba349 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 11:21:39 -0800 Subject: nav, buttons, and docs updates to account for outline: 0; on :active --- less/button-groups.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 3e08e6b09..7367103ca 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -78,6 +78,13 @@ z-index: 2; } +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + // Split button dropdowns // ---------------------- -- cgit v1.2.3 From 0f3a073b8dca534e78c09b71999d5a2632e2245d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 21:15:57 -0800 Subject: *really* refactor the buttons and update them all over the docs --- less/button-groups.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 7367103ca..4b0523df2 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -130,10 +130,10 @@ // Account for other colors -.primary, -.danger, -.info, -.success { +.btn-primary, +.btn-danger, +.btn-info, +.btn-success { .caret { border-top-color: @white; .opacity(75); @@ -141,7 +141,7 @@ } // Small button dropdowns -.btn.small .caret { +.btn-small .caret { margin-top: 4px; } -- cgit v1.2.3