forms.less 7.90 KiB
/* Forms.less
 * Base styles for various input types, form layouts, and states
 * ------------------------------------------------------------- */
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
  margin-bottom: @baseLineHeight;
// Groups of fields with labels on top (legends)
legend {
  display: block;
  width: 100%;
  margin-bottom: @baseLineHeight * 1.5;
  font-size: @baseFontSize * 1.5;
  line-height: @baseLineHeight * 2;
  color: @grayDark;
  border-bottom: 1px solid #eee;
// Set font for forms
label,
input,
select,
textarea {
  #font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
// Identify controls by their labels
label {
  display: block;
  margin-bottom: 5px;
  color: @grayDark;
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
  cursor: pointer;
// Inputs, Textareas, Selects
input,
textarea,
select,
.uneditable-input {
  display: inline-block;
  width: 210px;
  height: @baseLineHeight;
  padding: 4px;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @gray;
  border: 1px solid #ccc;
  .border-radius(3px);
/* Mini reset for unique input types */
input[type=checkbox],
input[type=radio] {
  width: auto;
  height: auto;
  padding: 0;
  margin: 3px 0;
  *margin-top: 0; /* IE6-7 */
  line-height: normal;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
border: none; } // Reset the file input to browser defaults input[type=file] { background-color: @white; padding: initial; border: initial; line-height: initial; .box-shadow(none); } // Help out input buttons input[type=button], input[type=reset], input[type=submit] { width: auto; height: auto; } select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ } // Make multiple select elements height not fixed select[multiple] { background-color: @white; // Fixes Chromium bug? height: inherit; } textarea { height: auto; } // FOCUS STATE // ----------- input, textarea { @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); } input:focus, textarea:focus { outline: 0; 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); } input[type=file]:focus, input[type=checkbox]:focus, select:focus { .box-shadow(none); // override for file inputs outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline } // INPUT SIZES // ----------- // General classes for quick sizes .input-mini { width: 60px; } .input-small { width: 90px; }
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
.input-medium { width: 150px; } .input-large { width: 210px; } .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } // Grid style input sizes // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border .formColumns(@columnSpan: 1) { display: inline-block; float: none; width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1)); margin-left: 0; } input, textarea, select { // Default columns &.span1 { .formColumns(1); } &.span2 { .formColumns(2); } &.span3 { .formColumns(3); } &.span4 { .formColumns(4); } &.span5 { .formColumns(5); } &.span6 { .formColumns(6); } &.span7 { .formColumns(7); } &.span8 { .formColumns(8); } &.span9 { .formColumns(9); } &.span10 { .formColumns(10); } &.span11 { .formColumns(11); } &.span12 { .formColumns(12); } &.span13 { .formColumns(13); } &.span14 { .formColumns(14); } &.span15 { .formColumns(15); } &.span16 { .formColumns(16); } } // 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; cursor: not-allowed; } // ERROR STATE // ----------- // Set color of error text @error-text: desaturate(lighten(@red, 25%), 25%); // 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); > label, span.help-inline, span.help-block { color: @red;
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
} input, textarea, select { 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 ACTIONS // ------------ .form-actions { padding: (@baseLineHeight - 1) 20px @baseLineHeight; margin-top: @baseLineHeight; 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 { background-color: @white; display: block; 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 :-moz-placeholder { color: @grayLight; } ::-webkit-input-placeholder { color: @grayLight; } // HELP TEXT // --------- .help-text { margin-top: 5px; margin-bottom: 0; color: @grayLight; } .help-inline { display: inline; padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ }
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
// Big blocks of help text .help-block { display: block; max-width: 600px; } // INLINE FIELDS // ------------- .inline-inputs { color: @gray; span, input { display: inline-block; } input.mini { width: 60px; } input.small { width: 90px; } span { padding: 0 2px 0 1px; } } // INPUT GROUPS // ------------ // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { input { .border-radius(0 3px 3px 0); } .add-on { position: relative; background: #f5f5f5; border: 1px solid #ccc; z-index: 2; float: left; display: block; width: auto; min-width: 16px; height: @baseLineHeight; padding: 4px 4px 4px 5px; margin-right: -1px; font-weight: normal; line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; .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 { float: left; .border-radius(3px 0 0 3px); }
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
.add-on { .border-radius(0 3px 3px 0); margin-right: 0; margin-left: -1px; } } // SEARCH FORM // ----------- .form-search .search-query { .border-radius(14px); } // HORIZONTAL & VERTICAL FORMS // --------------------------- // Common properties // ----------------- // Margin to space out fieldsets .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 // -------------------------- // Float the labels left .form-horizontal .control-group > label { float: left; width: 130px; padding-top: 5px; text-align: right; } // Move over all input controls and content .form-horizontal .controls { margin-left: 150px; } // Move the options list down to align with labels .form-horizontal .control-list { padding-top: 6px; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls .form-horizontal .form-actions { padding-left: 150px; }