-
Mark Otto authored7843a665
// Forms.less// Base styles for various input types, form layouts, and states// -------------------------------------------------------------// GENERAL STYLES// --------------// Make all forms have space below themform { margin: 0 0 @baseLineHeight;}fieldset { padding: 0; margin: 0; border: 0;}// Groups of fields with labels on top (legends)legend { display: block; width: 100%; padding: 0; margin-bottom: @baseLineHeight * 1.5; font-size: @baseFontSize * 1.5; line-height: @baseLineHeight * 2; color: @grayDark; border: 0; border-bottom: 1px solid #eee;}// Set font for formslabel,input,button,select,textarea { #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);}// Identify controls by their labelslabel { display: block; margin-bottom: 5px; color: @grayDark;}// Inputs, Textareas, Selectsinput,textarea,select,.uneditable-input { display: inline-block; width: 210px; height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; border: 1px solid #ccc; .border-radius(3px);}.uneditable-textarea { width: auto; height: auto;}// Inputs within a label7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
label input,
label textarea,
label select {
display: block;
}
// Mini reset for unique input types
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0; /* IE7 */
line-height: normal;
border: 0;
cursor: pointer;
border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only
}
// Reset the file input to browser defaults
input[type="file"] {
padding: initial;
line-height: initial;
border: initial;
background-color: @white;
background-color: initial;
.box-shadow(none);
}
// Help out input buttons
input[type="button"],
input[type="reset"],
input[type="submit"] {
width: auto;
height: auto;
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: 28px;
}
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
background-color: @white;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Remove shadow from image inputs
input[type="image"] {
.box-shadow(none);
}
// Make textarea height behave
textarea {
height: auto;
}
// Hidden inputs
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
input[type="hidden"] {
display: none;
}
// CHECKBOXES & RADIOS
// -------------------
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -18px;
}
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
}
// Radios and checkboxes on same line
.radio.inline,
.checkbox.inline {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
// FOCUS STATE
// -----------
input,
textarea {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
}
input:focus,
textarea:focus {
border-color: rgba(82,168,236,.8);
@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 */
}
input[type="file"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none); // override for file inputs
.tab-focus();
}
// INPUT SIZES
// -----------
// General classes for quick sizes
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
float: none;
margin-left: 0;
}
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.inputColumns(@columnSpan: 1) {
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
}
input,
textarea,
.uneditable-input {
// Default columns
&.span1 { .inputColumns(1); }
&.span2 { .inputColumns(2); }
&.span3 { .inputColumns(3); }
&.span4 { .inputColumns(4); }
&.span5 { .inputColumns(5); }
&.span6 { .inputColumns(6); }
&.span7 { .inputColumns(7); }
&.span8 { .inputColumns(8); }
&.span9 { .inputColumns(9); }
&.span10 { .inputColumns(10); }
&.span11 { .inputColumns(11); }
&.span12 { .inputColumns(12); }
}
.selectColumns(@columnSpan: 1) {
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
}
select {
&.span1 { .selectColumns(1); }
&.span2 { .selectColumns(2); }
&.span3 { .selectColumns(3); }
&.span4 { .selectColumns(4); }
&.span5 { .selectColumns(5); }
&.span6 { .selectColumns(6); }
&.span7 { .selectColumns(7); }
&.span8 { .selectColumns(8); }
&.span9 { .selectColumns(9); }
&.span10 { .selectColumns(10); }
&.span11 { .selectColumns(11); }
&.span12 { .selectColumns(12); }
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
border-color: #ddd;
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
cursor: not-allowed;
}
// 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);
}
// Error
.control-group.error {
.formFieldState(@errorText, @errorText, @errorBackground);
}
// Success
.control-group.success {
.formFieldState(@successText, @successText, @successBackground);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
}
}
// FORM ACTIONS
// ------------
.form-actions {
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight;
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
margin-bottom: @baseLineHeight;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
display: block;
background-color: @white;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
.placeholder(@grayLight);
// HELP TEXT
// ---------
.help-block {
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
}
.help-inline {
display: inline-block;
.ie7-inline-block();
margin-bottom: 9px;
vertical-align: middle;
padding-left: 5px;
}
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
margin-bottom: 5px;
.clearfix(); // Clear the float to prevent wrapping
input,
.uneditable-input {
.border-radius(0 3px 3px 0);
&:focus {
position: relative;
z-index: 2;
}
}
.uneditable-input {
border-left-color: #ccc;
}
.add-on {
float: left;
display: block;
width: auto;
min-width: 16px;
height: @baseLineHeight;
margin-right: -1px;
padding: 4px 4px 4px 5px;
font-weight: normal;
line-height: @baseLineHeight;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
background-color: #f5f5f5;
border: 1px solid #ccc;
.border-radius(3px 0 0 3px);
}
.active {
background-color: lighten(@green, 30);
border-color: @green;
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
}
}
.input-append {
input,
.uneditable-input {
float: left;
.border-radius(3px 0 0 3px);
}
.uneditable-input {
border-right-color: #ccc;
}
.add-on {
margin-right: 0;
margin-left: -1px;
.border-radius(0 3px 3px 0);
}
input:first-child {
// In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
// inherit the sum of its ancestors' margins.
*margin-left: -160px;
&+.add-on {
*margin-left: -21px;
}
}
}
// SEARCH FORM
// -----------
.search-query {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0; // remove the default margin on all inputs
.border-radius(14px);
}
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
.form-search,
.form-inline,
.form-horizontal {
input,
textarea,
select,
.help-inline,
.uneditable-input {
display: inline-block;
margin-bottom: 0;
}
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
}
.form-search label,
.form-inline label {
display: inline-block;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
// 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 {
float: left;
width: 140px;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
margin-left: 160px;
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: 160px;
}
}