From b54264cde0b1e72fbb463e4aa272ed1c2876bd02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 14:42:46 -0700 Subject: add basic vertical button group support --- less/button-groups.less | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 5338c5a45..e3c1de8ad 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -189,3 +189,33 @@ } } + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + display: inline-block; // makes buttons only take up the width they need +} +.btn-group-vertical .btn { + display: block; + float: none; + margin-left: 0; + width: 100%; + .border-radius(0); +} +.btn-group-vertical .btn + .btn { + margin-top: -1px; +} +.btn-group-vertical .btn:first-child { + .border-radius(4px 4px 0 0); +} +.btn-group-vertical .btn:last-child { + .border-radius(0 0 4px 4px); +} +.btn-group-vertical .btn-large:first-child { + .border-radius(6px 6px 0 0); +} +.btn-group-vertical .btn-large:last-child { + .border-radius(0 0 6px 6px); +} -- cgit v1.2.3 From 8c2db7d7d62d22183601364e7dcaee4a12b083ea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 15:46:46 -0700 Subject: prevent button group buttons from wrapping in tight spaces by removing floats and replacing with font-size: 0; inline-block hack --- less/button-groups.less | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index e3c1de8ad..44f13a09a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -5,7 +5,8 @@ // Make the div behave like a button .btn-group { position: relative; - .clearfix(); // clears the floated buttons + font-size: 0; // remove as part 1 of font-size inline-block hack + white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) .ie7-restore-left-whitespace(); } @@ -27,10 +28,20 @@ // Float them, remove border radius, then re-add to first and last elements .btn-group > .btn { position: relative; - float: left; margin-left: -1px; + font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack .border-radius(0); } + +// Reset fonts for other sizes +.btn-group > .btn-mini, +.btn-group > .btn-small { + font-size: @baseFontSize - 2px; +} +.btn-group > .btn-large { + font-size: @baseFontSize + 2px; +} + // 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; -- cgit v1.2.3 From b77ed4a3a3c47af057e16db93ef41023d1cc5e08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 20:57:04 -0700 Subject: fix dropdowns in button groups after font-size hack --- less/button-groups.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 44f13a09a..8234a893c 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -29,9 +29,12 @@ .btn-group > .btn { position: relative; margin-left: -1px; - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack .border-radius(0); } +.btn-group > .btn, +.btn-group > .dropdown-menu { + font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack +} // Reset fonts for other sizes .btn-group > .btn-mini, -- 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/button-groups.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 8234a893c..26cc2091a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -1,5 +1,6 @@ -// BUTTON GROUPS -// ------------- +// +// Button groups +// -------------------------------------------------- // Make the div behave like a button -- 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/button-groups.less | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 26cc2091a..d421b8f42 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -107,23 +107,23 @@ // Give the line between buttons some depth .btn-group > .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; + padding-left: 10px; + padding-right: 10px; .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: 4px; - *padding-bottom: 4px; + *padding-top: 8px; + *padding-bottom: 8px; } .btn-group > .btn-mini.dropdown-toggle { - padding-left: 5px; - padding-right: 5px; + padding-left: 8px; + padding-right: 8px; } .btn-group > .btn-small.dropdown-toggle { - *padding-top: 4px; - *padding-bottom: 4px; + *padding-top: 6px; + *padding-bottom: 6px; } .btn-group > .btn-large.dropdown-toggle { - padding-left: 12px; - padding-right: 12px; + padding-left: 14px; + padding-right: 14px; } .btn-group.open { @@ -162,7 +162,6 @@ // Reposition the caret .btn .caret { - margin-top: 7px; margin-left: 0; } .btn:hover .caret, @@ -171,13 +170,10 @@ } // Carets in other button sizes .btn-mini .caret { - margin-top: 5px; } .btn-small .caret { - margin-top: 6px; } .btn-large .caret { - margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; -- 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/button-groups.less | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index d421b8f42..05235b93b 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -34,16 +34,16 @@ } .btn-group > .btn, .btn-group > .dropdown-menu { - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack + font-size: 13px; // redeclare as part 2 of font-size inline-block hack } // Reset fonts for other sizes .btn-group > .btn-mini, .btn-group > .btn-small { - font-size: @baseFontSize - 2px; + font-size: 12px; } .btn-group > .btn-large { - font-size: @baseFontSize + 2px; + font-size: 16px; } // 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 @@ -107,23 +107,23 @@ // Give the line between buttons some depth .btn-group > .dropdown-toggle { - padding-left: 10px; - padding-right: 10px; + 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: 8px; - *padding-bottom: 8px; + *padding-top: 4px; + *padding-bottom: 4px; } .btn-group > .btn-mini.dropdown-toggle { - padding-left: 8px; - padding-right: 8px; + padding-left: 5px; + padding-right: 5px; } .btn-group > .btn-small.dropdown-toggle { - *padding-top: 6px; - *padding-bottom: 6px; + *padding-top: 4px; + *padding-bottom: 4px; } .btn-group > .btn-large.dropdown-toggle { - padding-left: 14px; - padding-right: 14px; + padding-left: 12px; + padding-right: 12px; } .btn-group.open { @@ -162,6 +162,7 @@ // Reposition the caret .btn .caret { + margin-top: 7px; margin-left: 0; } .btn:hover .caret, @@ -170,10 +171,13 @@ } // Carets in other button sizes .btn-mini .caret { + margin-top: 5px; } .btn-small .caret { + margin-top: 6px; } .btn-large .caret { + margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; -- cgit v1.2.3 From b2ebd5c46ca538142c5cd4164328c56053b5c79d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 12:52:44 -0700 Subject: update button styles to use updated 14px base font size, align carets to others with no opacity changes --- less/button-groups.less | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 05235b93b..cbb237a61 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -34,11 +34,13 @@ } .btn-group > .btn, .btn-group > .dropdown-menu { - font-size: 13px; // redeclare as part 2 of font-size inline-block hack + font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack } // Reset fonts for other sizes -.btn-group > .btn-mini, +.btn-group > .btn-mini { + font-size: 11px; +} .btn-group > .btn-small { font-size: 12px; } @@ -106,22 +108,22 @@ // ---------------------- // Give the line between buttons some depth -.btn-group > .dropdown-toggle { +.btn-group > .btn + .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: 4px; *padding-bottom: 4px; } -.btn-group > .btn-mini.dropdown-toggle { +.btn-group > .btn-mini + .dropdown-toggle { padding-left: 5px; padding-right: 5px; } -.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; } @@ -162,22 +164,16 @@ // Reposition the caret .btn .caret { - margin-top: 7px; + margin-top: 8px; margin-left: 0; } -.btn:hover .caret, -.open.btn-group .caret { - .opacity(100); -} // Carets in other button sizes -.btn-mini .caret { - margin-top: 5px; -} -.btn-small .caret { +.btn-mini .caret, +.btn-small .caret, +.btn-large .caret { margin-top: 6px; } .btn-large .caret { - margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; @@ -200,7 +196,6 @@ .caret { border-top-color: @white; border-bottom-color: @white; - .opacity(75); } } -- cgit v1.2.3 From e6e0e2ac9b0a31979531b6add3d1c8aaceb65f2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 16:50:26 -0700 Subject: fixes #4442: allow for .btn within a .btn-toolbar without .btn-group --- less/button-groups.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index cbb237a61..1cc758b7f 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -18,12 +18,17 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { + font-size: 0; // Hack to remove whitespace that results from using inline-block margin-top: @baseLineHeight / 2; margin-bottom: @baseLineHeight / 2; .btn-group { display: inline-block; .ie7-inline-block(); } + .btn-group + .btn, + .btn + .btn-group { + margin-left: 5px; + } } // Float them, remove border radius, then re-add to first and last elements -- cgit v1.2.3 From b745b7768a837a38ca47f174c62b8689e18e2733 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Aug 2012 17:07:41 -0700 Subject: fixes #4458: improve support for .btn + .btn in .btn-groups and .btn-toolbars --- less/button-groups.less | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 1cc758b7f..3197cb394 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -25,6 +25,7 @@ display: inline-block; .ie7-inline-block(); } + .btn + .btn, .btn-group + .btn, .btn + .btn-group { margin-left: 5px; @@ -34,9 +35,11 @@ // Float them, remove border radius, then re-add to first and last elements .btn-group > .btn { position: relative; - margin-left: -1px; .border-radius(0); } +.btn-group > .btn + .btn { + margin-left: -1px; +} .btn-group > .btn, .btn-group > .dropdown-menu { font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack @@ -215,11 +218,11 @@ .btn-group-vertical .btn { display: block; float: none; - margin-left: 0; width: 100%; .border-radius(0); } .btn-group-vertical .btn + .btn { + margin-left: 0; margin-top: -1px; } .btn-group-vertical .btn:first-child { -- cgit v1.2.3 From 58dd1f20aeee82d29693f731844a00cb9c5e4328 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Aug 2012 12:20:22 -0700 Subject: fix vertical button-groups in ie7 --- 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 3197cb394..01baebd54 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -214,6 +214,7 @@ .btn-group-vertical { display: inline-block; // makes buttons only take up the width they need + .ie7-inline-block(); } .btn-group-vertical .btn { display: block; -- cgit v1.2.3 From 01572f00bb5671aaab1763b85c9608c10362aef4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Aug 2012 12:27:45 -0700 Subject: ie7 button group and button toggle padding changes --- less/button-groups.less | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 01baebd54..77496d6ab 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -120,20 +120,24 @@ 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: 4px; - *padding-bottom: 4px; + *padding-top: 5px; + *padding-bottom: 5px; } .btn-group > .btn-mini + .dropdown-toggle { padding-left: 5px; padding-right: 5px; + *padding-top: 2px; + *padding-bottom: 2px; } .btn-group > .btn-small + .dropdown-toggle { - *padding-top: 4px; + *padding-top: 5px; *padding-bottom: 4px; } .btn-group > .btn-large + .dropdown-toggle { padding-left: 12px; padding-right: 12px; + *padding-top: 7px; + *padding-bottom: 7px; } .btn-group.open { -- cgit v1.2.3