From 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 02:21:02 -0700
Subject: [PATCH] adding button groups and toolbars like a boss
---
bootstrap.css | 58 +++++++++++++++++++++++++++++++-
bootstrap.min.css | 8 +++++
docs/index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++---
lib/mixins.less | 17 ++++++++++
lib/patterns.less | 48 ++++++++++++++++++++++++++
5 files changed, 210 insertions(+), 6 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 6758ea7eb9..92da336f65 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Thu Sep 29 01:47:26 PDT 2011
+ * Date: Thu Sep 29 02:20:34 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1726,6 +1726,62 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
+.btn-toolbar {
+ zoom: 1;
+}
+.btn-toolbar:before, .btn-toolbar:after {
+ display: table;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.btn-toolbar:after {
+ clear: both;
+}
+.btn-toolbar .btn-group {
+ float: left;
+ margin-right: 10px;
+}
+.btn-group {
+ zoom: 1;
+}
+.btn-group:before, .btn-group:after {
+ display: table;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.btn-group:after {
+ clear: both;
+}
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+.btn-group .btn: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;
+}
+.btn-group .btn: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;
+}
+.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
+ z-index: 2;
+}
.close {
float: right;
color: #000000;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index cf290c8e1e..a6052c7666 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -260,6 +260,14 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
+.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;}
+.btn-toolbar:after{clear:both;}
+.btn-toolbar .btn-group{float:left;margin-right:10px;}
+.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;}
+.btn-group:after{clear:both;}
+.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn: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;}
+.btn-group .btn: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;}
+.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
diff --git a/docs/index.html b/docs/index.html
index d24bb1afda..137144991f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -898,7 +898,7 @@
<div class="span-one-third">
<h3></h3>
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Search form</h2>
@@ -911,7 +911,7 @@
</form>
</div><!--/well-->
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Inline form</h2>
@@ -928,7 +928,7 @@
</form>
</div><!--/well-->
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Horizontal form</h2>
@@ -1032,7 +1032,7 @@
</fieldset>
</form>
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Vertical form</h2>
@@ -1075,7 +1075,82 @@
</fieldset>
</form>
</div>
- </div>
+ </div><!-- /row -->
+
+ <div class="row">
+ <div class="span4">
+ <h2>Buttons</h2>
+ <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
+ <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
+ </div>
+ <div class="span12">
+ <h3>Example buttons</h3>
+ <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
+ <div class="well" style="padding: 14px 19px;">
+ <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
+ </div>
+ <h3>Alternate sizes</h3>
+ <p>Fancy larger or smaller buttons? Have at it!</p>
+ <div class="well">
+ <a href="#" class="btn large primary">Primary action</a>
+ <a href="#" class="btn large">Action</a>
+ </div>
+ <div class="well" style="padding: 16px 19px;">
+ <a href="#" class="btn small primary">Primary action</a>
+ <a href="#" class="btn small">Action</a>
+ </div>
+ <h3>Disabled state</h3>
+ <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
+ <h4>Links</h4>
+ <div class="well">
+ <a href="#" class="btn large primary disabled">Primary action</a>
+ <a href="#" class="btn large disabled">Action</a>
+ </div>
+ <h4>Buttons</h4>
+ <div class="well">
+ <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <div class="row">
+ <div class="span4">
+ <h2>Button groups</h2>
+ </div>
+ <div class="span12">
+ <h3>Example</h3>
+ <div class="well">
+ <div class="btn-group">
+ <a class="btn" href="#">Left</a>
+ <a class="btn" href="#">Middle</a>
+ <a class="btn" href="#">Right</a>
+ </div>
+ </div>
+ <div class="well">
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn" href="#">1</a>
+ <a class="btn" href="#">2</a>
+ <a class="btn" href="#">3</a>
+ <a class="btn" href="#">4</a>
+ <a class="btn" href="#">5</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">6</a>
+ <a class="btn" href="#">7</a>
+ <a class="btn" href="#">8</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">9</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">10</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
</section>
diff --git a/lib/mixins.less b/lib/mixins.less
index b0ecf03d37..131d142783 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 ec40641d39..8add82c166 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
// -----------
--
GitLab