From 579d566299c82fe91e5202b30ec2b2b062e0d902 Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Thu, 9 May 2013 16:26:35 -0700 Subject: [PATCH] Update button groups to use not selector and remove redundant CSS. --- docs/assets/css/bootstrap.css | 88 ++++++++++++++++------------------- docs/components.html | 4 +- less/button-groups.less | 66 +++++++++++--------------- 3 files changed, 69 insertions(+), 89 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5eef85435f..9ba267dc0d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3830,24 +3830,28 @@ button.close { border-bottom-color: #ffffff; } -.btn-group { +.btn-group, +.btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; } -.btn-group > .btn { +.btn-group > .btn, +.btn-group-vertical > .btn { position: relative; float: left; } -.btn-group > .btn + btn { - margin-left: -1px; +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover, +.btn-group > .btn:active, +.btn-group-vertical > .btn:active { + z-index: 2; } -.btn-group > .btn:hover, -.btn-group > .btn:active { - z-index: 2; +.btn-group .btn + .btn { + margin-left: -1px; } .btn-toolbar:before, @@ -3881,52 +3885,42 @@ button.close { margin-left: 5px; } -.btn-group > .btn { - position: relative; +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; } .btn-group > .btn:first-child { margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; } -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.btn-group > .btn.large:first-child { - margin-left: 0; - border-bottom-left-radius: 6px; - border-top-left-radius: 6px; -} - -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .btn-group > .btn-group { float: left; } -.btn-group > .btn-group > .btn { +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:last-child > .btn { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.btn-group > .btn-group:first-child > .btn { - margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; +.btn-group > .btn-group:last-child > .btn:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .btn-group .dropdown-toggle:active, @@ -3974,26 +3968,22 @@ button.close { max-width: 100%; } -.btn-group-vertical .btn:first-child { +.btn-group-vertical > .btn + .btn { + margin-top: -1px; +} + +.btn-group-vertical .btn:not(:first-child):not(:last-child) { border-radius: 0; - border-top-right-radius: 4px; - border-top-left-radius: 4px; +} + +.btn-group-vertical .btn:first-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } .btn-group-vertical .btn:last-child { - border-radius: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} - -.btn-group-vertical .btn-large:first-child { - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} - -.btn-group-vertical .btn-large:last-child { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; + border-top-right-radius: 0; + border-top-left-radius: 0; } .btn-group-justified { diff --git a/docs/components.html b/docs/components.html index 33ebeeacff..67a4374c64 100644 --- a/docs/components.html +++ b/docs/components.html @@ -552,7 +552,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

-
+
@@ -560,7 +560,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% highlight html %} -
+
...
{% endhighlight %} diff --git a/less/button-groups.less b/less/button-groups.less index 6f9a52acd8..bac8c06b4e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -11,17 +11,14 @@ } // Make the div behave like a button -.btn-group { +.btn-group, +.btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; float: left; - // Prevent double borders when buttons are next to each other - + btn { - margin-left: -1px; - } // Bring the "active" button to the front &:hover, &:active { @@ -30,6 +27,11 @@ } } +// Prevent double borders when buttons are next to each other +.btn-group .btn + .btn { + margin-left: -1px; +} + // Optional: Group multiple button groups together for a toolbar .btn-toolbar { .clearfix(); @@ -46,46 +48,36 @@ } } -// Float them, remove border radius, then re-add to first and last elements -.btn-group > .btn { - position: relative; +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { 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; - .border-left-radius(@border-radius-base); + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } } // 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 { - .border-right-radius(@border-radius-base); -} -// Reset corners for large buttons -.btn-group > .btn.large:first-child { - margin-left: 0; - .border-left-radius(@border-radius-large); -} -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - .border-right-radius(@border-radius-large); +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); } // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) .btn-group > .btn-group { float: left; } -.btn-group > .btn-group > .btn { +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:last-child > .btn { - .border-right-radius(@border-radius-base); +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + .border-right-radius(0); } -.btn-group > .btn-group:first-child > .btn { - margin-left: 0; - .border-left-radius(@border-radius-base); +.btn-group > .btn-group:last-child > .btn:first-child { + .border-left-radius(0); } // On active and open, don't show outline @@ -143,20 +135,18 @@ float: none; width: 100%; max-width: 100%; + + .btn { + margin-top: -1px; + } +} +.btn-group-vertical .btn:not(:first-child):not(:last-child) { + border-radius: 0; } .btn-group-vertical .btn:first-child { - border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again - .border-top-radius(@border-radius-base); + .border-bottom-radius(0); } .btn-group-vertical .btn:last-child { - border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again - .border-bottom-radius(@border-radius-base); -} -.btn-group-vertical .btn-large:first-child { - .border-top-radius(@border-radius-large); -} -.btn-group-vertical .btn-large:last-child { - .border-bottom-radius(@border-radius-large); + .border-top-radius(0); }