diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 70 | ||||
| -rw-r--r-- | docs/base-css.html | 36 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 36 |
3 files changed, 77 insertions, 65 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a227de682..f57c6ff74 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -751,8 +751,9 @@ legend { } label { - display: block; + display: inline-block; margin-bottom: 5px; + font-weight: bold; } select, @@ -781,10 +782,17 @@ input[type="color"], color: #555555; vertical-align: middle; background-color: #ffffff; + border: 1px solid #cccccc; border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; } input, @@ -794,33 +802,18 @@ textarea, width: 100%; } -textarea { - height: auto; +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; } -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - border: 1px solid #cccccc; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; +textarea { + height: auto; } textarea:focus, @@ -857,16 +850,6 @@ input[type="checkbox"] { line-height: normal; } -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; -} - select, input[type="file"] { height: 34px; @@ -930,10 +913,16 @@ textarea::-webkit-input-placeholder { .radio, .checkbox { + display: block; min-height: 20px; padding-left: 20px; } +.radio label, +.checkbox label { + font-weight: normal; +} + .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; @@ -1354,7 +1343,7 @@ select:focus:invalid:focus { .help-block, .help-inline { - color: #595959; + color: #737373; } .help-block { @@ -1599,7 +1588,14 @@ input.search-query { .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { + display: inline-block; padding-left: 0; +} + +.form-search .radio label, +.form-search .checkbox label, +.form-inline .radio label, +.form-inline .checkbox label { margin-bottom: 0; vertical-align: middle; } diff --git a/docs/base-css.html b/docs/base-css.html index 8ddb107ff..c8a785fed 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -885,16 +885,18 @@ For example, <code><section></code> should be wrapped as inlin </div> <h2 id="forms-default">Default styles</h2> - <p>Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p> + <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p> <form class="bs-docs-example"> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> + <p class="help-block">Example block-level help text here.</p> + <div class="checkbox"> + <label> + <input type="checkbox"> Check me out + </label> + </div> <button type="submit" class="btn">Submit</button> </fieldset> </form> @@ -905,9 +907,11 @@ For example, <code><section></code> should be wrapped as inlin <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Check me out + </label> + </div> <button type="submit" class="btn">Submit</button> </fieldset> </form> @@ -938,18 +942,22 @@ For example, <code><section></code> should be wrapped as inlin <form class="bs-docs-example form-inline"> <input type="text" class="span3" placeholder="Email"> <input type="password" class="span3" placeholder="Password"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </form> <pre class="prettyprint linenums"> <form class="form-inline"> <input type="text" class="span3" placeholder="Email"> <input type="password" class="span3" placeholder="Password"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </form> </pre> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 8dda0cb20..4be10716c 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -825,16 +825,18 @@ </div> <h2 id="forms-default">{{_i}}Default styles{{/i}}</h2> - <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p> + <p>{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.{{/i}}</p> <form class="bs-docs-example"> <fieldset> <legend>Legend</legend> <label>{{_i}}Label name{{/i}}</label> <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> + <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> </fieldset> </form>{{! /example }} @@ -845,9 +847,11 @@ <label>{{_i}}Label name{{/i}}</label> <input type="text" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> </fieldset> </form> @@ -878,18 +882,22 @@ <form class="bs-docs-example form-inline"> <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"> <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Remember me{{/i}} - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Remember me{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> </form>{{! /example }} <pre class="prettyprint linenums"> <form class="form-inline"> <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"> <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Remember me{{/i}} - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Remember me{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> </form> </pre> |