diff options
| author | Mark Otto <[email protected]> | 2012-01-05 10:01:42 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-05 10:01:42 -0800 |
| commit | 20add59de3f2b69aaa9c9b325dab20b13c75eaa1 (patch) | |
| tree | 862ec093fda66cf9cbed16ee746d3766e7112539 /lib/button-groups.less | |
| parent | bdc22e71c8cbeddb1dbee9708ab68b4f23abb6f4 (diff) | |
| download | bootstrap-20add59de3f2b69aaa9c9b325dab20b13c75eaa1.tar.xz bootstrap-20add59de3f2b69aaa9c9b325dab20b13c75eaa1.zip | |
breaking out patterns.less even more, removing unnecessary div from checkbox and radio lists--now just labels and inputs
Diffstat (limited to 'lib/button-groups.less')
| -rw-r--r-- | lib/button-groups.less | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/lib/button-groups.less b/lib/button-groups.less new file mode 100644 index 000000000..3024ecd65 --- /dev/null +++ b/lib/button-groups.less @@ -0,0 +1,65 @@ +// BUTTON GROUPS +// ------------- + +// Group multiple button groups together for a toolbar +.btn-toolbar { + .clearfix(); + .btn-group { + float: left; + margin-right: 10px; + } +} + +// Clear the float +.btn-group { + .clearfix(); +} +// 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 + &: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; + } + &:last-child { + -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 + &.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; + } + &.large:last-child { + -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; +} |