aboutsummaryrefslogtreecommitdiff
path: root/less/forms.less
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2012-02-16 22:41:02 -0800
committerJacob Thornton <[email protected]>2012-02-16 22:41:02 -0800
commit03e6dc66c2fe14e756723395752feefb687b6526 (patch)
treeb8cfe13d72e1a780ef08dbd26e3bfe48e406c59e /less/forms.less
parent9143d8e449a852c606194ea8c529e30ea1a52ddf (diff)
parent091622644a0c619e1afbb21041c141da30df76b7 (diff)
downloadbootstrap-03e6dc66c2fe14e756723395752feefb687b6526.tar.xz
bootstrap-03e6dc66c2fe14e756723395752feefb687b6526.zip
Merge branch '2.0.1-wip'
Diffstat (limited to 'less/forms.less')
-rw-r--r--less/forms.less89
1 files changed, 48 insertions, 41 deletions
diff --git a/less/forms.less b/less/forms.less
index 9c9a9b8a9..0a5fa2b86 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -28,6 +28,12 @@ legend {
color: @grayDark;
border: 0;
border-bottom: 1px solid #eee;
+
+ // Small
+ small {
+ font-size: @baseLineHeight * .75;
+ color: @grayLight;
+ }
}
// Set font for forms
@@ -36,7 +42,13 @@ input,
button,
select,
textarea {
- #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
+ #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+ #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
@@ -84,13 +96,17 @@ input[type="radio"] {
margin: 3px 0;
*margin-top: 0; /* IE7 */
line-height: normal;
- border: 0;
cursor: pointer;
.border-radius(0);
+ border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+ border: 0;
}
// Reset the file input to browser defaults
input[type="file"] {
+ width: auto;
padding: initial;
line-height: initial;
border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
line-height: 28px;
}
+// Reset line-height for IE
+input[type="file"] {
+ line-height: 18px \9;
+}
+
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -165,9 +186,11 @@ input[type="hidden"] {
}
// Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
display: inline-block;
+ padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
@@ -175,11 +198,6 @@ input[type="hidden"] {
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
-// But don't forget to remove their padding on first-child
-.controls > .radio.inline:first-child,
-.controls > .checkbox.inline:first-child {
- padding-top: 0;
-}
@@ -198,9 +216,10 @@ textarea:focus {
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
outline: 0;
- outline: thin dotted \9; /* IE6-8 */
+ outline: thin dotted \9; /* IE6-9 */
}
input[type="file"]:focus,
+input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none); // override for file inputs
@@ -260,33 +279,6 @@ textarea[readonly] {
// FORM FIELD FEEDBACK STATES
// --------------------------
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
- // Set the text color
- > label,
- .help-block,
- .help-inline {
- color: @textColor;
- }
- // Style inputs accordingly
- input,
- select,
- textarea {
- color: @textColor;
- border-color: @borderColor;
- &:focus {
- border-color: darken(@borderColor, 10%);
- .box-shadow(0 0 6px lighten(@borderColor, 20%));
- }
- }
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: @textColor;
- background-color: @backgroundColor;
- border-color: @textColor;
- }
-}
// Warning
.control-group.warning {
.formFieldState(@warningText, @warningText, @warningBackground);
@@ -344,6 +336,7 @@ select:focus:required:invalid {
// ---------
.help-block {
+ display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
@@ -412,6 +405,7 @@ select:focus:required:invalid {
.border-radius(3px 0 0 3px);
}
.uneditable-input {
+ border-left-color: #eee;
border-right-color: #ccc;
}
.add-on {
@@ -461,6 +455,10 @@ select:focus:required:invalid {
display: inline-block;
margin-bottom: 0;
}
+ // Re-hide hidden elements due to specifity
+ .hide {
+ display: none;
+ }
}
.form-search label,
.form-inline label,
@@ -477,28 +475,37 @@ select:focus:required:invalid {
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+ margin-bottom: 0;
+ vertical-align: middle;
+}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+ margin-top: @baseLineHeight;
+ -webkit-margin-top-collapse: separate;
+}
+
// Horizontal-specific styles
// --------------------------
.form-horizontal {
- // Legend collapses margin, so we're relegated to padding
- legend + .control-group {
- margin-top: @baseLineHeight;
- -webkit-margin-top-collapse: separate;
- }
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
- .control-group > label {
+ .control-label {
float: left;
width: 140px;
padding-top: 5px;