aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
Diffstat (limited to 'less')
-rw-r--r--less/forms.less49
-rw-r--r--less/tests/forms.html20
2 files changed, 48 insertions, 21 deletions
diff --git a/less/forms.less b/less/forms.less
index 383f105fc..5115f0c23 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -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"],
diff --git a/less/tests/forms.html b/less/tests/forms.html
index a63d728a0..ea85411c9 100644
--- a/less/tests/forms.html
+++ b/less/tests/forms.html
@@ -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>