diff options
| author | Mark Otto <[email protected]> | 2011-09-29 02:21:02 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-09-29 02:21:02 -0700 |
| commit | 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d (patch) | |
| tree | b42264ebff4355ab236dd886b2e17ced2800faf3 /lib | |
| parent | f54568fa31396556a0df7bf8e2b180885e2b1c3f (diff) | |
| download | bootstrap-0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d.tar.xz bootstrap-0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d.zip | |
adding button groups and toolbars like a boss
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/mixins.less | 17 | ||||
| -rw-r--r-- | lib/patterns.less | 48 |
2 files changed, 65 insertions, 0 deletions
diff --git a/lib/mixins.less b/lib/mixins.less index b0ecf03d3..131d14278 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -102,6 +102,23 @@ -moz-border-radius: @radius; border-radius: @radius; } +.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { + -webkit-border-top-left-radius: @topLeft; + -moz-border-radius-topleft: @topLeft; + border-top-left-radius: @topLeft; + -webkit-border-top-right-radius: @topRight; + -moz-border-radius-topright: @topRight; + border-top-right-radius: @topRight; + -webkit-border-bottom-right-radius: @bottomRight; + -moz-border-radius-bottomright: @bottomRight; + border-bottom-right-radius: @bottomRight; + -webkit-border-bottom-left-radius: @bottomLeft; + -moz-border-radius-bottomleft: @bottomLeft; + border-bottom-left-radius: @bottomLeft; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { diff --git a/lib/patterns.less b/lib/patterns.less index ec40641d3..8add82c16 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -565,6 +565,54 @@ input[type=submit].btn { } } +// 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); + &: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; + } +} +// 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; +} + + // CLOSE ICONS // ----------- |