diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 61b2b03a7e..84715df6fd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -686,6 +686,7 @@ pre { code { padding: 2px 4px; color: #d14; + white-space: nowrap; background-color: #f7f7f9; border: 1px solid #e1e1e8; } @@ -1442,16 +1443,16 @@ input[type="checkbox"][readonly] { border-color: #3a87ad; } -input:focus:required:invalid, -textarea:focus:required:invalid, -select:focus:required:invalid { +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { color: #b94a48; border-color: #ee5f5b; } -input:focus:required:invalid:focus, -textarea:focus:required:invalid:focus, -select:focus:required:invalid:focus { +input:focus:invalid:focus, +textarea:focus:invalid:focus, +select:focus:invalid:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7; @@ -1561,7 +1562,9 @@ select:focus:required:invalid:focus { .input-append .add-on, .input-prepend .add-on, .input-append .btn, -.input-prepend .btn { +.input-prepend .btn, +.input-append .btn-group > .dropdown-toggle, +.input-prepend .btn-group > .dropdown-toggle { vertical-align: top; border-radius: 0; } @@ -1590,7 +1593,10 @@ select:focus:required:invalid:focus { .input-append input + .btn-group .btn, .input-append select + .btn-group .btn, -.input-append .uneditable-input + .btn-group .btn { +.input-append .uneditable-input + .btn-group .btn, +.input-append input + .btn-group .btn:last-child, +.input-append select + .btn-group .btn:last-child, +.input-append .uneditable-input + .btn-group .btn:last-child { border-radius: 0 4px 4px 0; } @@ -1601,7 +1607,8 @@ select:focus:required:invalid:focus { } .input-append .add-on:last-child, -.input-append .btn:last-child { +.input-append .btn:last-child, +.input-append .btn-group:last-child > .dropdown-toggle { border-radius: 0 4px 4px 0; } @@ -2798,6 +2805,7 @@ table th[class*="span"], } .typeahead { + z-index: 1051; margin-top: 2px; } @@ -2926,7 +2934,6 @@ button.close { .btn:hover { color: #333333; text-decoration: none; - background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; @@ -2942,8 +2949,6 @@ button.close { .btn.active, .btn:active { - background-color: #e6e6e6; - background-color: #d9d9d9 \9; background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -2953,7 +2958,6 @@ button.close { .btn.disabled, .btn[disabled] { cursor: default; - background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); diff --git a/docs/base-css.html b/docs/base-css.html index aceb665c30..ac99d43b25 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1321,6 +1321,54 @@ For example, <code><section></code> should be wrapped as inlin </ul> </div> </div> + + +

Segmented dropdown groups

+
+
+
+ + + +
+ +
+
+ +
+ + + +
+
+
+
+<form>
+  <div class="input-prepend">
+    <div class="btn-group">...</div>
+    <input type="text">
+  </div>
+  <div class="input-append">
+    <input type="text">
+    <div class="btn-group">...</div>
+  </div>
+</form>

Search form

@@ -1511,6 +1559,15 @@ For example, <code><section></code> should be wrapped as inlin 
 <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+
+ +

Invalid inputs

+

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

+
+ +
+
+<input class="span3" type="email" required>

Disabled inputs

diff --git a/docs/javascript.html b/docs/javascript.html index 445bda40dc..516759cc10 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -178,7 +178,7 @@ $('#myModal').on('show', function (e) {

Static example

A rendered modal with header, body, and set of actions in the footer.

-
+

Modal header

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 683f1f9ad4..eeb7a267bd 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1261,6 +1261,54 @@ </ul> </div> </div> + + +

{{_i}}Segmented dropdown groups{{/i}}

+
+
+
+ + + +
+ +
+
+ +
+ + + +
+
+
+
+<form>
+  <div class="input-prepend">
+    <div class="btn-group">...</div>
+    <input type="text">
+  </div>
+  <div class="input-append">
+    <input type="text">
+    <div class="btn-group">...</div>
+  </div>
+</form>

{{_i}}Search form{{/i}}

@@ -1451,6 +1499,15 @@ 
 <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+
+ +

{{_i}}Invalid inputs{{/i}}

+

{{_i}}Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.{{/i}}

+
+ +
+
+<input class="span3" type="email" required>

{{_i}}Disabled inputs{{/i}}

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index b878f9da6e..f36dc94bd4 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -111,7 +111,7 @@ $('#myModal').on('show', function (e) {

{{_i}}Static example{{/i}}

{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

-
+

{{_i}}Modal header{{/i}}

diff --git a/less/buttons.less b/less/buttons.less index e93d4d603a..a6dc00f4c1 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -26,7 +26,6 @@ &:hover { color: @grayDark; text-decoration: none; - background-color: darken(@white, 10%); background-position: 0 -15px; // transition is only when going to hover, otherwise the background @@ -42,8 +41,6 @@ // Active state &.active, &:active { - background-color: darken(@white, 10%); - background-color: darken(@white, 15%) e("\9"); background-image: none; outline: 0; .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); @@ -53,7 +50,6 @@ &.disabled, &[disabled] { cursor: default; - background-color: darken(@white, 10%); background-image: none; .opacity(65); .box-shadow(none); diff --git a/less/code.less b/less/code.less index 2e26e67462..778a41beb5 100644 --- a/less/code.less +++ b/less/code.less @@ -19,6 +19,7 @@ code { color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; + white-space: nowrap; } // Blocks of code diff --git a/less/dropdowns.less b/less/dropdowns.less index f5a5462c04..934709d176 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -214,5 +214,6 @@ // Typeahead // --------- .typeahead { + z-index: 1051; margin-top: 2px; // give it some space to breathe } diff --git a/less/forms.less b/less/forms.less index 81ddb002e4..33f6ded80c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -388,9 +388,9 @@ input[type="checkbox"][readonly] { // HTML5 invalid states // Shares styles with the .control-group.error above -input:focus:required:invalid, -textarea:focus:required:invalid, -select:focus:required:invalid { +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { color: #b94a48; border-color: #ee5f5b; &:focus { @@ -489,7 +489,8 @@ select:focus:required:invalid { border: 1px solid #ccc; } .add-on, - .btn { + .btn, + .btn-group > .dropdown-toggle { vertical-align: top; border-radius: 0; } @@ -516,7 +517,8 @@ select:focus:required:invalid { select, .uneditable-input { border-radius: @inputBorderRadius 0 0 @inputBorderRadius; - + .btn-group .btn { + + .btn-group .btn, + + .btn-group .btn:last-child { border-radius: 0 @inputBorderRadius @inputBorderRadius 0; } } @@ -526,7 +528,8 @@ select:focus:required:invalid { margin-left: -1px; } .add-on:last-child, - .btn:last-child { + .btn:last-child, + .btn-group:last-child > .dropdown-toggle { border-radius: 0 @inputBorderRadius @inputBorderRadius 0; } }