diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f8edafa3b1..e290d86464 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -851,7 +851,7 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 30px; + margin-bottom: 20px; font-size: 21px; line-height: 40px; color: #333333; @@ -1408,19 +1408,19 @@ select:focus:required:invalid:focus { *zoom: 1; } -.input-prepend, -.input-append { +.input-append, +.input-prepend { margin-bottom: 5px; font-size: 0; white-space: nowrap; } -.input-prepend input, .input-append input, -.input-prepend select, +.input-prepend input, .input-append select, -.input-prepend .uneditable-input, -.input-append .uneditable-input { +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input { position: relative; margin-bottom: 0; *margin-left: 0; @@ -1431,17 +1431,17 @@ select:focus:required:invalid:focus { border-radius: 0 3px 3px 0; } -.input-prepend input:focus, .input-append input:focus, -.input-prepend select:focus, +.input-prepend input:focus, .input-append select:focus, -.input-prepend .uneditable-input:focus, -.input-append .uneditable-input:focus { +.input-prepend select:focus, +.input-append .uneditable-input:focus, +.input-prepend .uneditable-input:focus { z-index: 2; } -.input-prepend .add-on, -.input-append .add-on { +.input-append .add-on, +.input-prepend .add-on { display: inline-block; width: auto; height: 20px; @@ -1457,18 +1457,18 @@ select:focus:required:invalid:focus { border: 1px solid #ccc; } -.input-prepend .add-on, .input-append .add-on, -.input-prepend .btn, -.input-append .btn { +.input-prepend .add-on, +.input-append .btn, +.input-prepend .btn { margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } -.input-prepend .active, -.input-append .active { +.input-append .active, +.input-prepend .active { background-color: #a9dba9; border-color: #46a546; } @@ -1524,7 +1524,7 @@ select:focus:required:invalid:focus { border-radius: 0 3px 3px 0; } -input.search-query { +.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; @@ -1537,6 +1537,39 @@ input.search-query { border-radius: 14px; } +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + .form-search input, .form-inline input, .form-horizontal input, diff --git a/docs/base-css.html b/docs/base-css.html index 175825c714..75296003b4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -752,6 +752,7 @@ For example, <code>section</code> should be wrapped as inline.

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

+ Legend

Example block-level help text here.

@@ -822,6 +823,7 @@ For example, <code>section</code> should be wrapped as inline.
  • Wrap any associated controls in .controls for proper alignment
  • + Legend
    @@ -1059,6 +1061,24 @@ For example, <code>section</code> should be wrapped as inline. <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> </div> + + +

    Search form

    + +
    + + +
    +
    + + +
    + +
    +<form class="form-search">
    +  <input type="text" class="span2 search-query">
    +  <button type="submit" class="btn">Search</button>
    +</form>
     

    Control sizing

    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index cc09f83016..21c24657a2 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -690,6 +690,7 @@

    {{_i}}Default styles{{/i}}

    {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

    + Legend

    {{_i}}Example block-level help text here.{{/i}}

    @@ -760,6 +761,7 @@
  • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
  • + Legend
    @@ -997,6 +999,24 @@ <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> </div> + + +

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

    + +
    + + +
    +
    + + +
    + {{! /example }} +
    +<form class="form-search">
    +  <input type="text" class="span2 search-query">
    +  <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
    +</form>
     

    {{_i}}Control sizing{{/i}}

    diff --git a/less/forms.less b/less/forms.less index 078b36704d..ddadab8ca3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -22,7 +22,7 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @baseLineHeight * 1.5; + margin-bottom: @baseLineHeight; font-size: @baseFontSize * 1.5; line-height: @baseLineHeight * 2; color: @grayDark; @@ -399,8 +399,8 @@ select:focus:required:invalid { // ------------ // Allow us to put symbols and text within the input field for a cleaner look -.input-prepend, -.input-append { +.input-append, +.input-prepend { margin-bottom: 5px; font-size: 0; white-space: nowrap; // Prevent span and input from separating @@ -489,15 +489,34 @@ select:focus:required:invalid { // SEARCH FORM // ----------- -input.search-query { +.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ - margin-bottom: 0; // remove the default margin on all inputs + margin-bottom: 0; // Remove the default margin on all inputs .border-radius(14px); } +/* Allow for input prepend/append in search forms */ +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + .border-radius(0); // Override due to specificity +} +.form-search .input-append .search-query { + .border-radius(14px 0 0 14px) +} +.form-search .input-append .btn { + .border-radius(0 14px 14px 0) +} +.form-search .input-prepend .search-query { + .border-radius(0 14px 14px 0) +} +.form-search .input-prepend .btn { + .border-radius(14px 0 0 14px) +} + + // HORIZONTAL & VERTICAL FORMS