aboutsummaryrefslogtreecommitdiff
path: root/lib/forms.less
diff options
context:
space:
mode:
Diffstat (limited to 'lib/forms.less')
-rw-r--r--lib/forms.less22
1 files changed, 17 insertions, 5 deletions
diff --git a/lib/forms.less b/lib/forms.less
index 4a1c359e3..f958693fc 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -1,14 +1,14 @@
-/*
- * Forms.less
+/* Forms.less
* Base styles for various input types, form layouts, and states
- */
+ * ------------------------------------------------------------- */
-/* Global form styles
--------------------------------------------------- */
+// FORM STYLES
+// -----------
form {
margin-bottom: @baseline;
+
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
@@ -21,14 +21,17 @@ form {
color: @grayDark;
}
}
+
// Parent element that clears floats and wraps labels and fields together
div.clearfix {
margin-bottom: @baseline;
}
+
// Set font for forms
label, input, select, textarea {
#font > .sans-serif(normal,13px,normal);
}
+
// Float labels left
label {
padding-top: 6px;
@@ -39,15 +42,18 @@ form {
text-align: right;
color: @grayDark;
}
+
// Shift over the inside div to align all label's relevant content
div.input {
margin-left: 150px;
}
+
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
cursor: pointer;
}
+
// Inputs, Textareas, Selects
input[type=text],
input[type=password],
@@ -79,6 +85,7 @@ form {
border-color: #ccc;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
}
+
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
@@ -86,6 +93,7 @@ form {
::-webkit-input-placeholder {
color: @grayLight;
}
+
// Focus states
input[type=text],
input[type=password],
@@ -102,6 +110,7 @@ form {
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
}
+
// Error styles
div.error {
background: lighten(@red, 57%);
@@ -133,6 +142,7 @@ form {
}
}
}
+
// Form element sizes
.input-mini, input.mini, textarea.mini, select.mini {
width: 60px;
@@ -155,6 +165,7 @@ form {
textarea.xxlarge {
overflow-y: scroll;
}
+
// Turn off focus for disabled (read-only) form elements
input[readonly]:focus,
textarea[readonly]:focus,
@@ -194,6 +205,7 @@ div.actions {
.help-inline {
padding-left: 5px;
}
+
// Big blocks of help text
.help-block {
display: block;