/* Forms.less
* Base styles for various input types, form layouts, and states * ------------------------------------------------------------- */
// FORM STYLES // ———–
form {
margin-bottom: @baseline;
}
// Groups of fields with labels on top (legends) fieldset {
margin-bottom: @baseline; padding-top: @baseline; legend { display: block; margin-left: 150px; font-size: 20px; line-height: 1; *margin: 0 0 5px 145px; /* IE6-7 */ *line-height: 1.5; /* IE6-7 */ color: @grayDark; }
}
// Parent element that clears floats and wraps labels and fields together .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; font-size: 13px; line-height: 18px; float: left; width: 130px; 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, input {
cursor: pointer;
}
// Inputs, Textareas, Selects input, input, textarea, select, .uneditable-input {
display: inline-block; width: 210px; padding: 4px; font-size: 13px; line-height: @baseline; height: @baseline; color: @gray; border: 1px solid #ccc; .border-radius(3px);
} select, input {
height: @baseline * 1.5; line-height: @baseline * 1.5;
} textarea {
height: auto;
} .uneditable-input {
background-color: #eee; display: block; 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;
} ::-webkit-input-placeholder {
color: @grayLight;
}
// Focus states input, input, select, textarea {
@transition: border linear .2s, box-shadow linear .2s; .transition(@transition); .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
} input:focus, input:focus, textarea:focus {
outline: none; border-color: rgba(82,168,236,.8); @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow);
}
// Error styles form div.error {
background: lighten(@red, 57%); padding: 10px 0; margin: -10px 0 10px; .border-radius(4px); @error-text: desaturate(lighten(@red, 25%), 25%); > label, span.help-inline, span.help-block { color: @red; } input[type=text], input[type=password], textarea { border-color: @error-text; .box-shadow(0 0 3px rgba(171,41,32,.25)); &:focus { border-color: darken(@error-text, 10%); .box-shadow(0 0 6px rgba(171,41,32,.5)); } } .input-prepend, .input-append { span.add-on { background: lighten(@red, 50%); border-color: @error-text; color: darken(@error-text, 10%); } }
}
// Form element sizes .input-mini, input.mini, textarea.mini, select.mini {
width: 60px;
} .input-small, input.small, textarea.small, select.small {
width: 90px;
} .input-medium, input.medium, textarea.medium, select.medium {
width: 150px;
} .input-large, input.large, textarea.large, select.large {
width: 210px;
} .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
width: 270px;
} .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
width: 530px;
} textarea.xxlarge {
overflow-y: scroll;
}
// Turn off focus for disabled (read-only) form elements input:focus, textarea:focus, input.disabled {
background: #f5f5f5; border-color: #ddd; .box-shadow(none);
}
// Actions (the buttons) .actions {
background: #f5f5f5; margin-top: @baseline; margin-bottom: @baseline; padding: (@baseline - 1) 20px @baseline 150px; border-top: 1px solid #ddd; .border-radius(0 0 3px 3px); .secondary-action { float: right; a { line-height: 30px; &:hover { text-decoration: underline; } } }
}
// Help Text .help-inline, .help-block {
font-size: 12px; line-height: @baseline; color: @grayLight;
} .help-inline {
padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */
}
// Big blocks of help text .help-block {
display: block; max-width: 600px;
}
// Inline Fields (input fields that appear as inline objects .inline-inputs {
color: @gray; span, input[type=text] { display: inline-block; } input.mini { width: 60px; } input.small { width: 90px; } span { padding: 0 2px 0 1px; }
}
// Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append {
input[type=text], input[type=password] { .border-radius(0 3px 3px 0); } .add-on { background: #f5f5f5; float: left; display: block; width: auto; min-width: 16px; padding: 4px 4px 4px 5px; color: @grayLight; font-weight: normal; line-height: 18px; height: 18px; text-align: center; text-shadow: 0 1px 0 #fff; border: 1px solid #ccc; border-right-width: 0; .border-radius(3px 0 0 3px); } .active { background: lighten(@green, 30); border-color: @green; }
} .input-prepend {
.add-on { *margin-top: 1px; /* IE6-7 */ }
} .input-append {
input[type=text], input[type=password] { float: left; .border-radius(3px 0 0 3px); } .add-on { .border-radius(0 3px 3px 0); border-right-width: 1px; border-left-width: 0; }
}
// Stacked options for forms (radio buttons or checkboxes) .inputs-list {
margin: 0 0 5px; width: 100%; li { display: block; padding: 0; width: 100%; label { display: block; float: none; width: auto; padding: 0; line-height: @baseline; text-align: left; white-space: normal; strong { color: @gray; } small { font-size: 12px; font-weight: normal; } } ul.inputs-list { margin-left: 25px; margin-bottom: 10px; padding-top: 0; } &:first-child { padding-top: 5px; } } input[type=radio], input[type=checkbox] { margin-bottom: 0; }
}
// Stacked forms .form-stacked {
padding-left: 20px; fieldset { padding-top: @baseline / 2; } legend { margin-left: 0; } label { display: block; float: none; width: auto; font-weight: bold; text-align: left; line-height: 20px; padding-top: 0; } .clearfix { margin-bottom: @baseline / 2; div.input { margin-left: 0; } } .inputs-list { margin-bottom: 0; li { padding-top: 0; label { font-weight: normal; padding-top: 0; } } } div.error { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 0; margin-left: -10px; } .actions { margin-left: -20px; padding-left: 20px; }
}