From a78c8d9c04e83a22d6eebc2e3d54cb2ccf6b614c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 14:03:57 -0700 Subject: Newfangled input and button group sizing (fixes #9295) Instead of applying `.btn-` or `.input-` to individual elements in button and input groups, we now have new sizing classes to keep your markup a little leaner. * Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to replicate `.input-sm` and `.input-lg`, respectively. * Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your `.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`, respectively. Both sets of new sizing classes simply use the existing individual sizing classes as mixins, so customization of them is automatically inherited when compiling. --- less/button-groups.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 3ae18e92f..3a9cee53e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -117,6 +117,14 @@ } +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { .btn-xs(); } +.btn-group-sm > .btn { .btn-sm(); } +.btn-group-lg > .btn { .btn-lg(); } + // Split button dropdowns // ---------------------- -- cgit v1.2.3 From fb8ae7e51499c93f5db1aae94c74dc845b884630 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 15:46:11 -0700 Subject: drop the class on the button group toggles CSS (alt fix to #9297) --- 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 3a9cee53e..d9c91252b 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -201,7 +201,7 @@ // Checkbox and radio options -.btn-group[data-toggle="buttons"] > .btn > input[type="radio"], -.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] { +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { display: none; } -- cgit v1.2.3 From b0ab806dcc3c5d64a80f34acefeb3ac75e860b33 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 23:44:50 -0700 Subject: fix negative indenting in button group for nested button groups --- 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 d9c91252b..28cb90fc1 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -55,7 +55,10 @@ } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn { +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { margin-left: -1px; } -- cgit v1.2.3 From f15f259876d77004fadf5b5937af5ab6b5eabb8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 09:59:38 -0700 Subject: derp --- less/button-groups.less | 43 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 8 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 28cb90fc1..0ca9ca851 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -55,11 +55,13 @@ } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn, -.btn-group .btn + .btn-group, -.btn-group .btn-group + .btn, -.btn-group .btn-group + .btn-group { - margin-left: -1px; +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } } // Optional: Group multiple button groups together for a toolbar @@ -166,26 +168,51 @@ // Vertical button groups // ---------------------- -.btn-group-vertical > .btn { +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { display: block; float: none; width: 100%; max-width: 100%; - + .btn { +} +.btn-group-vertical { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { margin-top: -1px; + margin-left: 0; } } -.btn-group-vertical .btn { + +.btn-group-vertical > .btn { &:not(:first-child):not(:last-child) { border-radius: 0; } &:first-child:not(:last-child) { + border-top-right-radius: @border-radius-base; .border-bottom-radius(0); } &:last-child:not(:first-child) { + border-bottom-left-radius: @border-radius-base; .border-top-radius(0); } } +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + border-top-right-radius: @border-radius-base; + .border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child > .btn:first-child { + border-bottom-left-radius: @border-radius-base; + .border-top-radius(0); +} + // Justified button groups -- cgit v1.2.3 From 69a3e9b4d07cdaa281525c067f11ea83e1863f1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 10:24:18 -0700 Subject: enable button groups in vertical button groups --- less/button-groups.less | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 0ca9ca851..adaad3f80 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -168,18 +168,27 @@ // Vertical button groups // ---------------------- -.btn-group-vertical > .btn, -.btn-group-vertical > .btn-group { - display: block; - float: none; - width: 100%; - max-width: 100%; -} .btn-group-vertical { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { + > .btn, + > .btn-group { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + .clearfix(); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } @@ -204,12 +213,10 @@ .btn-group-vertical > .btn-group:first-child { > .btn:last-child, > .dropdown-toggle { - border-top-right-radius: @border-radius-base; .border-bottom-radius(0); } } .btn-group-vertical > .btn-group:last-child > .btn:first-child { - border-bottom-left-radius: @border-radius-base; .border-top-radius(0); } -- cgit v1.2.3 From 1e1b5c737ba33c0e7a86634bcb3baedc70498884 Mon Sep 17 00:00:00 2001 From: Luca Wehrstedt Date: Tue, 13 Aug 2013 20:28:18 +0200 Subject: fixes #9406: proper border for justified btn-groups inside tables --- 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 adaad3f80..08fa740f2 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -229,6 +229,7 @@ display: table; width: 100%; table-layout: fixed; + border-collapse: separate; .btn { float: none; display: table-cell; -- cgit v1.2.3 From 06e6da09182f15f6eec6eaa68cb5e6c2af249a04 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:36:08 -0700 Subject: fixes #9596: proper dropup caret colors --- less/button-groups.less | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'less/button-groups.less') diff --git a/less/button-groups.less b/less/button-groups.less index 08fa740f2..e4a78cd4e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -18,16 +18,18 @@ border-top-color: #fff; } } -.dropup .caret { - .btn-default & { +.dropup { + & .btn-default .caret { border-bottom-color: @btn-default-color; } - .btn-primary &, - .btn-success &, - .btn-warning &, - .btn-danger &, - .btn-info & { - border-bottom-color: #fff; + & .btn-primary, + & .btn-success, + & .btn-warning, + & .btn-danger, + & .btn-info { + .caret { + border-bottom-color: #fff; + } } } -- cgit v1.2.3