Skip to content
GitLab
Commit fe8061b8 authored by Mark Otto's avatar Mark Otto
Browse files

more tests for form styles; includes lightening help text

parent f9a47e3a
Hide whitespace changes
Inline Side-by-side
Showing
with 125 additions and 86 deletions
+125 -86
docs/assets/css/bootstrap.css
+ 33
- 37
View file @ fe8061b8
......@@ -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;
}
......
docs/base-css.html
+ 22
- 14
View file @ fe8061b8
......@@ -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>&lt;form&gt;</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, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;label&gt;Label name&lt;/label&gt;
&lt;input type="text" placeholder="Type something…"&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Check me out
&lt;/label&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Check me out
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
......@@ -938,18 +942,22 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; 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">
&lt;form class="form-inline"&gt;
&lt;input type="text" class="span3" placeholder="Email"&gt;
&lt;input type="password" class="span3" placeholder="Password"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;
</pre>
......
docs/templates/pages/base-css.mustache
+ 22
- 14
View file @ fe8061b8
......@@ -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>&lt;form&gt;</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 @@
&lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
&lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
&lt;/label&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
......@@ -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">
&lt;form class="form-inline"&gt;
&lt;input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
......
less/forms.less
+ 28
- 21
View file @ fe8061b8
......@@ -3,10 +3,9 @@
// --------------------------------------------------
// General styles
// Non-controls
// -------------------------
form {
margin: 0 0 @baseLineHeight;
}
......@@ -30,8 +29,9 @@ legend {
}
label {
display: block;
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
// Form controls
......@@ -65,7 +65,10 @@ input[type="color"],
color: @gray;
vertical-align: middle;
background-color: @inputBackground;
border: 1px solid @inputBorder;
border-radius: @inputBorderRadius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
}
// Reset appearance properties for textual inputs and textarea
......@@ -77,6 +80,17 @@ textarea,
width: 100%;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Reset height since textareas have rows
textarea {
height: auto;
......@@ -99,10 +113,6 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border: 1px solid @inputBorder;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
border-color: rgba(82,168,236,.8);
......@@ -120,17 +130,6 @@ input[type="checkbox"] {
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
......@@ -201,9 +200,14 @@ textarea {
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
display: block;
min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 20px;
}
.radio label,
.checkbox label {
font-weight: normal;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
......@@ -401,7 +405,7 @@ select:focus:invalid {
.help-block,
.help-inline {
color: lighten(@textColor, 15%); // lighten the text some for contrast
color: lighten(@textColor, 25%); // lighten the text some for contrast
}
.help-block {
......@@ -618,9 +622,12 @@ input.search-query {
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
label {
margin-bottom: 0;
vertical-align: middle;
}
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
......
less/tests/forms.html
+ 20
- 0
View file @ fe8061b8
......@@ -173,6 +173,26 @@
</div><!-- /span4 -->
</div><!-- /row -->
<div class="page-header">
<h1>Form components</h1>
</div>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<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> <!-- /container -->
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment