From 532ee082135eec9ba510d8f085add8722da5a03b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 20 Sep 2012 11:37:34 -0700 Subject: [PATCH] fixes #5150: add btn-group support to input groups --- docs/assets/css/bootstrap.css | 23 +++- docs/base-css.html | 142 +++++++++++++++++++++++-- docs/templates/pages/base-css.mustache | 142 +++++++++++++++++++++++-- less/forms.less | 17 ++- 4 files changed, 300 insertions(+), 24 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8206d0d537..4ce730e7b0 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1648,8 +1648,17 @@ select:focus:required:invalid:focus { border-radius: 4px 0 0 4px; } +.input-append input + .btn-group .btn, +.input-append select + .btn-group .btn, +.input-append .uneditable-input + .btn-group .btn { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + .input-append .add-on, -.input-append .btn { +.input-append .btn, +.input-append .btn-group { margin-left: -1px; } @@ -1668,6 +1677,14 @@ select:focus:required:invalid:focus { border-radius: 0; } +.input-prepend.input-append input + .btn-group .btn, +.input-prepend.input-append select + .btn-group .btn, +.input-prepend.input-append .uneditable-input + .btn-group .btn { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + .input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child { margin-right: -1px; @@ -1684,6 +1701,10 @@ select:focus:required:invalid:focus { border-radius: 0 4px 4px 0; } +.input-prepend.input-append .btn-group:first-child { + margin-left: 0; +} + input.search-query { padding-right: 14px; padding-right: 4px \9; diff --git a/docs/base-css.html b/docs/base-css.html index 653f5b7b1d..d3a92c8312 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1131,20 +1131,22 @@ For example, <code><section></code> should be wrapped as inlin
@ - +

- + .00 
 <div class="input-prepend">
-  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+  <span class="add-on">@</span>
+  <input class="span2" id="prependedInput" type="text" placeholder="Username">
 </div>
 <div class="input-append">
-  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+  <input class="span2" id="appendedInput" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1153,13 +1155,15 @@ For example, <code><section></code> should be wrapped as inlin
$ - + .00 
 <div class="input-prepend input-append">
-  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+  <span class="add-on">$</span>
+  <input class="span2" id="appendedPrependedInput" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1167,23 +1171,139 @@ For example, <code><section></code> should be wrapped as inlin

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

- +
-
+
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButton" type="text">
+  <button class="btn" type="button">Go!</button>
+</div>
+
+
- + 
 <div class="input-append">
-  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+  <input class="span2" id="appendedInputButtons" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
 </div>
+
+

Button dropdowns

+

+
+
+ +
+ + +
+
+
+
 <div class="input-append">
-  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+  <input class="span2" id="appendedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+
+ +
+
+
+ + +
+ +
+
+
+<div class="input-prepend">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="prependedDropdownButton" type="text">
+</div>
+
+ +
+
+
+ + +
+ +
+ + +
+
+
+
+<div class="input-prepend input-append">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="appendedPrependedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
 </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ed9d9827b8..289bbaaca0 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1068,20 +1068,22 @@
@ - +

- + .00 
 <div class="input-prepend">
-  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+  <span class="add-on">@</span>
+  <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
 </div>
 <div class="input-append">
-  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+  <input class="span2" id="appendedInput" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1090,13 +1092,15 @@
$ - + .00 
 <div class="input-prepend input-append">
-  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+  <span class="add-on">$</span>
+  <input class="span2" id="appendedPrependedInput" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1104,23 +1108,139 @@

{{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

- +
-
+
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButton" type="text">
+  <button class="btn" type="button">Go!</button>
+</div>
+
+
- + 
 <div class="input-append">
-  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+  <input class="span2" id="appendedInputButtons" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
 </div>
+
+

{{_i}}Button dropdowns{{/i}}

+

{{_i}}{{/i}}

+
+
+ +
+ + +
+
+
+
 <div class="input-append">
-  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+  <input class="span2" id="appendedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+
+ +
+
+
+ + +
+ +
+
+
+<div class="input-prepend">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="prependedDropdownButton" type="text">
+</div>
+
+ +
+
+
+ + +
+ +
+ + +
+
+
+
+<div class="input-prepend input-append">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+  <input class="span2" id="appendedPrependedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{_i}}Action{{/i}}
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
 </div>
diff --git a/less/forms.less b/less/forms.less index a48d6cb589..249e9ef84c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -466,6 +466,7 @@ select:focus:required:invalid { border-color: @green; } } + .input-prepend { .add-on, .btn { @@ -473,17 +474,23 @@ select:focus:required:invalid { } .add-on:first-child, .btn:first-child { + // FYI, `.btn:first-child` accounts for a button group that's prepended .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); } } + .input-append { input, select, .uneditable-input { .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); + + .btn-group .btn { + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); + } } .add-on, - .btn { + .btn, + .btn-group { margin-left: -1px; } .add-on:last-child, @@ -491,12 +498,16 @@ select:focus:required:invalid { .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } } + // Remove all border-radius for inputs with both prepend and append .input-prepend.input-append { input, select, .uneditable-input { .border-radius(0); + + .btn-group .btn { + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); + } } .add-on:first-child, .btn:first-child { @@ -508,10 +519,14 @@ select:focus:required:invalid { margin-left: -1px; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } + .btn-group:first-child { + margin-left: 0; + } } + // SEARCH FORM // -----------