Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
forms.less 8.11 KiB
1 
// Forms.less
2 
// Base styles for various input types, form layouts, and states
3 
// -------------------------------------------------------------
4
5
6 
// GENERAL STYLES
7 
// --------------
8
9 
// Make all forms have space below them
10 
form {
11 
  margin-bottom: @baseLineHeight;
12 
}
13
14 
// Groups of fields with labels on top (legends)
15 
legend {
16 
  display: block;
17 
  width: 100%;
18 
  margin-bottom: @baseLineHeight * 1.5;
19 
  font-size: @baseFontSize * 1.5;
20 
  line-height: @baseLineHeight * 2;
21 
  color: @grayDark;
22 
  border-bottom: 1px solid #eee;
23 
}
24
25 
// Set font for forms
26 
label,
27 
input,
28 
select,
29 
textarea {
30 
  #font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
31 
}
32
33 
// Identify controls by their labels
34 
label {
35 
  display: block;
36 
  margin-bottom: 5px;
37 
  color: @grayDark;
38 
}
39
40 
// Inputs, Textareas, Selects
41 
input,
42 
textarea,
43 
select,
44 
.uneditable-input {
45 
  display: inline-block;
46 
  width: 210px;
47 
  height: @baseLineHeight;
48 
  padding: 4px;
49 
  font-size: @baseFontSize;
50 
  line-height: @baseLineHeight;
51 
  color: @gray;
52 
  border: 1px solid #ccc;
53 
  .border-radius(3px);
54 
}
55
56 
/* Mini reset for unique input types */
57 
input[type=checkbox],
58 
input[type=radio] {
59 
  width: auto;
60 
  height: auto;
61 
  padding: 0;
62 
  margin: 3px 0;
63 
  *margin-top: 0; /* IE6-7 */
64 
  line-height: normal;
65 
  border: none;
66 
  cursor: pointer;
67 
}
68
69 
// Reset the file input to browser defaults
70 
input[type=file] {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
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: @baseLineHeight * 1.5; // 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: @baseLineHeight * 1.5; } // Make multiple select elements height not fixed select[multiple] { height: inherit; background-color: @white; // Fixes Chromium bug? } textarea { height: auto; } // FOCUS STATE // ----------- input, textarea { .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); @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 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; } 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; } .input-medium { width: 150px; } .input-large { width: 210px; } .input-xlarge { width: 270px; }
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
.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, .uneditable-input { // 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; } // 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, textarea { color: @textColor; border-color: @borderColor; &:focus { border-color: darken(@borderColor, 10%);