aboutsummaryrefslogtreecommitdiff
path: root/lib/forms.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2011-11-12 00:46:02 -0800
committerMark Otto <[email protected]>2011-11-12 00:46:02 -0800
commit1fb98bed91977b710ae321443d0819939a1a8cc7 (patch)
tree27ddc846502e2f89e3bc13e9d4fe86fa29f99e77 /lib/forms.less
parent5a702cc6eece2713ac6f6a2f6cbae1b1dd9c5a69 (diff)
downloadbootstrap-1fb98bed91977b710ae321443d0819939a1a8cc7.tar.xz
bootstrap-1fb98bed91977b710ae321443d0819939a1a8cc7.zip
updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage
Diffstat (limited to 'lib/forms.less')
-rw-r--r--lib/forms.less72
1 files changed, 36 insertions, 36 deletions
diff --git a/lib/forms.less b/lib/forms.less
index 6edf29e53..b7eb15005 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -3,6 +3,7 @@
* ------------------------------------------------------------- */
+
// GENERAL STYLES
// --------------
@@ -84,6 +85,7 @@ input[type=submit] {
height: auto;
}
+// Set the height of select and file controls to match text inputs
select,
input[type=file] {
height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
@@ -188,42 +190,47 @@ textarea[readonly] {
-// ERROR STATE
-// -----------
-
-// Set color of error text
-@error-text: desaturate(lighten(@red, 25%), 25%);
+// FORM FIELD FEEDBACK STATES
+// --------------------------
-// Style the background of control-groups with errors
-.has-error {
- background: lighten(@red, 55%);
- padding: (@baseLineHeight / 2) 0;
- margin: -10px 0 10px;
- .border-radius(4px);
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+ // Set the text color
> label,
- span.help-inline,
- span.help-block {
- color: @red;
+ .help-block,
+ .help-inline {
+ color: @textColor;
}
+ // Style inputs accordingly
input,
- textarea,
- select {
- border-color: @error-text;
- .box-shadow(0 0 3px rgba(171,41,32,.25));
+ textarea {
+ color: @textColor;
+ border-color: @borderColor;
&:focus {
- border-color: darken(@error-text, 10%);
- .box-shadow(0 0 6px rgba(171,41,32,.5));
+ border-color: darken(@borderColor, 10%);
+ .box-shadow(0 0 6px lighten(@borderColor, 20%);
}
}
- .input-prepend,
- .input-append {
- span.add-on {
- background: lighten(@red, 50%);
- border-color: @error-text;
- color: darken(@error-text, 10%);
- }
+ // 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;
}
}
+// Error
+form .clearfix.error {
+ .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+ .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+ .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
@@ -238,7 +245,6 @@ textarea[readonly] {
border-top: 1px solid #ddd;
}
-
// For text that needs to appear as an input but should not be an input
.uneditable-input {
background-color: @white;
@@ -281,6 +287,7 @@ textarea[readonly] {
}
+
// INLINE FIELDS
// -------------
@@ -301,6 +308,7 @@ textarea[readonly] {
}
+
// INPUT GROUPS
// ------------
@@ -353,7 +361,6 @@ textarea[readonly] {
-
// SEARCH FORM
// -----------
@@ -366,7 +373,6 @@ textarea[readonly] {
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
-
// Common properties
// -----------------
@@ -374,17 +380,11 @@ textarea[readonly] {
.control-group {
margin-bottom: @baseLineHeight;
}
-
// Bold the labels so they stand out
.control-group > label {
font-weight: bold;
}
-// Lists of controls (checkboxes and radios)
-.control-list {
-}
-
-
// Horizontal-specific styles
// --------------------------