Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / less / forms.less @ cf4c546f

History | View | Annotate | Download (9.2 kB)

1 13858d75 Kostas Papadimitriou
/* Forms.less
2 13858d75 Kostas Papadimitriou
 * Base styles for various input types, form layouts, and states
3 13858d75 Kostas Papadimitriou
 * ------------------------------------------------------------- */
4 13858d75 Kostas Papadimitriou
5 13858d75 Kostas Papadimitriou
6 13858d75 Kostas Papadimitriou
// FORM STYLES
7 13858d75 Kostas Papadimitriou
// -----------
8 13858d75 Kostas Papadimitriou
9 13858d75 Kostas Papadimitriou
form {
10 13858d75 Kostas Papadimitriou
  margin-bottom: @baseline;
11 13858d75 Kostas Papadimitriou
}
12 13858d75 Kostas Papadimitriou
13 13858d75 Kostas Papadimitriou
// Groups of fields with labels on top (legends)
14 13858d75 Kostas Papadimitriou
fieldset {
15 13858d75 Kostas Papadimitriou
  margin-bottom: @baseline;
16 13858d75 Kostas Papadimitriou
  padding-top: @baseline;
17 13858d75 Kostas Papadimitriou
  legend {
18 13858d75 Kostas Papadimitriou
    display: block;
19 13858d75 Kostas Papadimitriou
    padding-left: 150px;
20 13858d75 Kostas Papadimitriou
    font-size: @basefont * 1.5;
21 13858d75 Kostas Papadimitriou
    line-height: 1;
22 13858d75 Kostas Papadimitriou
    color: @grayDark;
23 13858d75 Kostas Papadimitriou
    *padding: 0 0 5px 145px; /* IE6-7 */
24 13858d75 Kostas Papadimitriou
    *line-height: 1.5; /* IE6-7 */
25 13858d75 Kostas Papadimitriou
  }
26 13858d75 Kostas Papadimitriou
}
27 13858d75 Kostas Papadimitriou
28 13858d75 Kostas Papadimitriou
// Parent element that clears floats and wraps labels and fields together
29 13858d75 Kostas Papadimitriou
form .clearfix {
30 13858d75 Kostas Papadimitriou
  margin-bottom: @baseline;
31 13858d75 Kostas Papadimitriou
  .clearfix()
32 13858d75 Kostas Papadimitriou
}
33 13858d75 Kostas Papadimitriou
34 13858d75 Kostas Papadimitriou
// Set font for forms
35 13858d75 Kostas Papadimitriou
label,
36 13858d75 Kostas Papadimitriou
input,
37 13858d75 Kostas Papadimitriou
select,
38 13858d75 Kostas Papadimitriou
textarea {
39 13858d75 Kostas Papadimitriou
  #font > .sans-serif(normal,13px,normal);
40 13858d75 Kostas Papadimitriou
}
41 13858d75 Kostas Papadimitriou
42 13858d75 Kostas Papadimitriou
// Float labels left
43 13858d75 Kostas Papadimitriou
label {
44 13858d75 Kostas Papadimitriou
  padding-top: 6px;
45 13858d75 Kostas Papadimitriou
  font-size: @basefont;
46 13858d75 Kostas Papadimitriou
  line-height: @baseline;
47 13858d75 Kostas Papadimitriou
  float: left;
48 13858d75 Kostas Papadimitriou
  width: 130px;
49 13858d75 Kostas Papadimitriou
  text-align: right;
50 13858d75 Kostas Papadimitriou
  color: @grayDark;
51 13858d75 Kostas Papadimitriou
}
52 13858d75 Kostas Papadimitriou
53 13858d75 Kostas Papadimitriou
// Shift over the inside div to align all label's relevant content
54 13858d75 Kostas Papadimitriou
form .input {
55 13858d75 Kostas Papadimitriou
  margin-left: 150px;
56 13858d75 Kostas Papadimitriou
}
57 13858d75 Kostas Papadimitriou
58 13858d75 Kostas Papadimitriou
// Checkboxs and radio buttons
59 13858d75 Kostas Papadimitriou
input[type=checkbox],
60 13858d75 Kostas Papadimitriou
input[type=radio] {
61 13858d75 Kostas Papadimitriou
  cursor: pointer;
62 13858d75 Kostas Papadimitriou
}
63 13858d75 Kostas Papadimitriou
64 13858d75 Kostas Papadimitriou
// Inputs, Textareas, Selects
65 13858d75 Kostas Papadimitriou
input,
66 13858d75 Kostas Papadimitriou
textarea,
67 13858d75 Kostas Papadimitriou
select,
68 13858d75 Kostas Papadimitriou
.uneditable-input {
69 13858d75 Kostas Papadimitriou
  display: inline-block;
70 13858d75 Kostas Papadimitriou
  width: 210px;
71 13858d75 Kostas Papadimitriou
  height: @baseline;
72 13858d75 Kostas Papadimitriou
  padding: 4px;
73 13858d75 Kostas Papadimitriou
  font-size: @basefont;
74 13858d75 Kostas Papadimitriou
  line-height: @baseline;
75 13858d75 Kostas Papadimitriou
  color: @gray;
76 13858d75 Kostas Papadimitriou
  border: 1px solid #ccc;
77 13858d75 Kostas Papadimitriou
  .border-radius(3px);
78 13858d75 Kostas Papadimitriou
}
79 13858d75 Kostas Papadimitriou
80 13858d75 Kostas Papadimitriou
// remove padding from select
81 13858d75 Kostas Papadimitriou
select {
82 13858d75 Kostas Papadimitriou
  padding: initial;
83 13858d75 Kostas Papadimitriou
}
84 13858d75 Kostas Papadimitriou
85 13858d75 Kostas Papadimitriou
// mini reset for non-html5 file types
86 13858d75 Kostas Papadimitriou
input[type=checkbox],
87 13858d75 Kostas Papadimitriou
input[type=radio] {
88 13858d75 Kostas Papadimitriou
  width: auto;
89 13858d75 Kostas Papadimitriou
  height: auto;
90 13858d75 Kostas Papadimitriou
  padding: 0;
91 13858d75 Kostas Papadimitriou
  margin: 3px 0;
92 13858d75 Kostas Papadimitriou
  *margin-top: 0; /* IE6-7 */
93 13858d75 Kostas Papadimitriou
  line-height: normal;
94 13858d75 Kostas Papadimitriou
  border: none;
95 13858d75 Kostas Papadimitriou
}
96 13858d75 Kostas Papadimitriou
97 13858d75 Kostas Papadimitriou
input[type=file] {
98 13858d75 Kostas Papadimitriou
  background-color: @white;
99 13858d75 Kostas Papadimitriou
  padding: initial;
100 13858d75 Kostas Papadimitriou
  border: initial;
101 13858d75 Kostas Papadimitriou
  line-height: initial;
102 13858d75 Kostas Papadimitriou
  .box-shadow(none);
103 13858d75 Kostas Papadimitriou
}
104 13858d75 Kostas Papadimitriou
105 13858d75 Kostas Papadimitriou
input[type=button],
106 13858d75 Kostas Papadimitriou
input[type=reset],
107 13858d75 Kostas Papadimitriou
input[type=submit] {
108 13858d75 Kostas Papadimitriou
  width: auto;
109 13858d75 Kostas Papadimitriou
  height: auto;
110 13858d75 Kostas Papadimitriou
}
111 13858d75 Kostas Papadimitriou
112 13858d75 Kostas Papadimitriou
select,
113 13858d75 Kostas Papadimitriou
input[type=file] {
114 13858d75 Kostas Papadimitriou
  height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
115 13858d75 Kostas Papadimitriou
  *height: auto; // Reset for IE7
116 13858d75 Kostas Papadimitriou
  line-height: @baseline * 1.5;
117 13858d75 Kostas Papadimitriou
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
118 13858d75 Kostas Papadimitriou
}
119 13858d75 Kostas Papadimitriou
120 13858d75 Kostas Papadimitriou
// Make multiple select elements height not fixed
121 13858d75 Kostas Papadimitriou
select[multiple] {
122 13858d75 Kostas Papadimitriou
  height: inherit;
123 13858d75 Kostas Papadimitriou
  background-color: @white; // Fixes Chromium bug of unreadable items
124 13858d75 Kostas Papadimitriou
}
125 13858d75 Kostas Papadimitriou
126 13858d75 Kostas Papadimitriou
textarea {
127 13858d75 Kostas Papadimitriou
  height: auto;
128 13858d75 Kostas Papadimitriou
}
129 13858d75 Kostas Papadimitriou
130 13858d75 Kostas Papadimitriou
// For text that needs to appear as an input but should not be an input
131 13858d75 Kostas Papadimitriou
.uneditable-input {
132 13858d75 Kostas Papadimitriou
  background-color: @white;
133 13858d75 Kostas Papadimitriou
  display: block;
134 13858d75 Kostas Papadimitriou
  border-color: #eee;
135 13858d75 Kostas Papadimitriou
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
136 13858d75 Kostas Papadimitriou
  cursor: not-allowed;
137 13858d75 Kostas Papadimitriou
}
138 13858d75 Kostas Papadimitriou
139 13858d75 Kostas Papadimitriou
// Placeholder text gets special styles; can't be bundled together though for some reason
140 13858d75 Kostas Papadimitriou
:-moz-placeholder {
141 13858d75 Kostas Papadimitriou
  color: @grayLight;
142 13858d75 Kostas Papadimitriou
}
143 13858d75 Kostas Papadimitriou
::-webkit-input-placeholder {
144 13858d75 Kostas Papadimitriou
  color: @grayLight;
145 13858d75 Kostas Papadimitriou
}
146 13858d75 Kostas Papadimitriou
147 13858d75 Kostas Papadimitriou
// Focus states
148 13858d75 Kostas Papadimitriou
input,
149 13858d75 Kostas Papadimitriou
textarea {
150 13858d75 Kostas Papadimitriou
  @transition: border linear .2s, box-shadow linear .2s;
151 13858d75 Kostas Papadimitriou
  .transition(@transition);
152 13858d75 Kostas Papadimitriou
  .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
153 13858d75 Kostas Papadimitriou
}
154 13858d75 Kostas Papadimitriou
input:focus,
155 13858d75 Kostas Papadimitriou
textarea:focus {
156 13858d75 Kostas Papadimitriou
  outline: 0;
157 13858d75 Kostas Papadimitriou
  border-color: rgba(82,168,236,.8);
158 13858d75 Kostas Papadimitriou
  @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
159 13858d75 Kostas Papadimitriou
  .box-shadow(@shadow);
160 13858d75 Kostas Papadimitriou
}
161 13858d75 Kostas Papadimitriou
input[type=file]:focus,
162 13858d75 Kostas Papadimitriou
input[type=checkbox]:focus,
163 13858d75 Kostas Papadimitriou
select:focus {
164 13858d75 Kostas Papadimitriou
  .box-shadow(none); // override for file inputs
165 13858d75 Kostas Papadimitriou
  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
166 13858d75 Kostas Papadimitriou
}
167 13858d75 Kostas Papadimitriou
168 13858d75 Kostas Papadimitriou
169 13858d75 Kostas Papadimitriou
// FORM FIELD FEEDBACK STATES
170 13858d75 Kostas Papadimitriou
// --------------------------
171 13858d75 Kostas Papadimitriou
172 13858d75 Kostas Papadimitriou
// Mixin for form field states
173 13858d75 Kostas Papadimitriou
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
174 13858d75 Kostas Papadimitriou
  // Set the text color
175 13858d75 Kostas Papadimitriou
  > label,
176 13858d75 Kostas Papadimitriou
  .help-block,
177 13858d75 Kostas Papadimitriou
  .help-inline {
178 13858d75 Kostas Papadimitriou
    color: @textColor;
179 13858d75 Kostas Papadimitriou
  }
180 13858d75 Kostas Papadimitriou
  // Style inputs accordingly
181 13858d75 Kostas Papadimitriou
  input,
182 13858d75 Kostas Papadimitriou
  textarea {
183 13858d75 Kostas Papadimitriou
    color: @textColor;
184 13858d75 Kostas Papadimitriou
    border-color: @borderColor;
185 13858d75 Kostas Papadimitriou
    &:focus {
186 13858d75 Kostas Papadimitriou
      border-color: darken(@borderColor, 10%);
187 13858d75 Kostas Papadimitriou
      .box-shadow(0 0 6px lighten(@borderColor, 20%));
188 13858d75 Kostas Papadimitriou
    }
189 13858d75 Kostas Papadimitriou
  }
190 13858d75 Kostas Papadimitriou
  // Give a small background color for input-prepend/-append
191 13858d75 Kostas Papadimitriou
  .input-prepend .add-on,
192 13858d75 Kostas Papadimitriou
  .input-append .add-on {
193 13858d75 Kostas Papadimitriou
    color: @textColor;
194 13858d75 Kostas Papadimitriou
    background-color: @backgroundColor;
195 13858d75 Kostas Papadimitriou
    border-color: @textColor;
196 13858d75 Kostas Papadimitriou
  }
197 13858d75 Kostas Papadimitriou
}
198 13858d75 Kostas Papadimitriou
// Error
199 13858d75 Kostas Papadimitriou
form .clearfix.error {
200 13858d75 Kostas Papadimitriou
  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
201 13858d75 Kostas Papadimitriou
}
202 13858d75 Kostas Papadimitriou
// Warning
203 13858d75 Kostas Papadimitriou
form .clearfix.warning {
204 13858d75 Kostas Papadimitriou
  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
205 13858d75 Kostas Papadimitriou
}
206 13858d75 Kostas Papadimitriou
// Success
207 13858d75 Kostas Papadimitriou
form .clearfix.success {
208 13858d75 Kostas Papadimitriou
  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
209 13858d75 Kostas Papadimitriou
}
210 13858d75 Kostas Papadimitriou
211 13858d75 Kostas Papadimitriou
212 13858d75 Kostas Papadimitriou
// Form element sizes
213 13858d75 Kostas Papadimitriou
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
214 13858d75 Kostas Papadimitriou
.input-mini,
215 13858d75 Kostas Papadimitriou
input.mini,
216 13858d75 Kostas Papadimitriou
textarea.mini,
217 13858d75 Kostas Papadimitriou
select.mini {
218 13858d75 Kostas Papadimitriou
  width: 60px;
219 13858d75 Kostas Papadimitriou
}
220 13858d75 Kostas Papadimitriou
.input-small,
221 13858d75 Kostas Papadimitriou
input.small,
222 13858d75 Kostas Papadimitriou
textarea.small,
223 13858d75 Kostas Papadimitriou
select.small {
224 13858d75 Kostas Papadimitriou
  width: 90px;
225 13858d75 Kostas Papadimitriou
}
226 13858d75 Kostas Papadimitriou
.input-medium,
227 13858d75 Kostas Papadimitriou
input.medium,
228 13858d75 Kostas Papadimitriou
textarea.medium,
229 13858d75 Kostas Papadimitriou
select.medium {
230 13858d75 Kostas Papadimitriou
  width: 150px;
231 13858d75 Kostas Papadimitriou
}
232 13858d75 Kostas Papadimitriou
.input-large,
233 13858d75 Kostas Papadimitriou
input.large,
234 13858d75 Kostas Papadimitriou
textarea.large,
235 13858d75 Kostas Papadimitriou
select.large {
236 13858d75 Kostas Papadimitriou
  width: 210px;
237 13858d75 Kostas Papadimitriou
}
238 13858d75 Kostas Papadimitriou
.input-xlarge,
239 13858d75 Kostas Papadimitriou
input.xlarge,
240 13858d75 Kostas Papadimitriou
textarea.xlarge,
241 13858d75 Kostas Papadimitriou
select.xlarge {
242 13858d75 Kostas Papadimitriou
  width: 270px;
243 13858d75 Kostas Papadimitriou
}
244 13858d75 Kostas Papadimitriou
.input-xxlarge,
245 13858d75 Kostas Papadimitriou
input.xxlarge,
246 13858d75 Kostas Papadimitriou
textarea.xxlarge,
247 13858d75 Kostas Papadimitriou
select.xxlarge {
248 13858d75 Kostas Papadimitriou
  width: 530px;
249 13858d75 Kostas Papadimitriou
}
250 13858d75 Kostas Papadimitriou
textarea.xxlarge {
251 13858d75 Kostas Papadimitriou
  overflow-y: auto;
252 13858d75 Kostas Papadimitriou
}
253 13858d75 Kostas Papadimitriou
254 13858d75 Kostas Papadimitriou
// Grid style input sizes
255 13858d75 Kostas Papadimitriou
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
256 13858d75 Kostas Papadimitriou
.formColumns(@columnSpan: 1) {
257 13858d75 Kostas Papadimitriou
  display: inline-block;
258 13858d75 Kostas Papadimitriou
  float: none;
259 13858d75 Kostas Papadimitriou
  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
260 13858d75 Kostas Papadimitriou
  margin-left: 0;
261 13858d75 Kostas Papadimitriou
}
262 13858d75 Kostas Papadimitriou
input,
263 13858d75 Kostas Papadimitriou
textarea {
264 13858d75 Kostas Papadimitriou
  // Default columns
265 13858d75 Kostas Papadimitriou
  &.span1     { .formColumns(1); }
266 13858d75 Kostas Papadimitriou
  &.span2     { .formColumns(2); }
267 13858d75 Kostas Papadimitriou
  &.span3     { .formColumns(3); }
268 13858d75 Kostas Papadimitriou
  &.span4     { .formColumns(4); }
269 13858d75 Kostas Papadimitriou
  &.span5     { .formColumns(5); }
270 13858d75 Kostas Papadimitriou
  &.span6     { .formColumns(6); }
271 13858d75 Kostas Papadimitriou
  &.span7     { .formColumns(7); }
272 13858d75 Kostas Papadimitriou
  &.span8     { .formColumns(8); }
273 13858d75 Kostas Papadimitriou
  &.span9     { .formColumns(9); }
274 13858d75 Kostas Papadimitriou
  &.span10    { .formColumns(10); }
275 13858d75 Kostas Papadimitriou
  &.span11    { .formColumns(11); }
276 13858d75 Kostas Papadimitriou
  &.span12    { .formColumns(12); }
277 13858d75 Kostas Papadimitriou
  &.span13    { .formColumns(13); }
278 13858d75 Kostas Papadimitriou
  &.span14    { .formColumns(14); }
279 13858d75 Kostas Papadimitriou
  &.span15    { .formColumns(15); }
280 13858d75 Kostas Papadimitriou
  &.span16    { .formColumns(16); }
281 13858d75 Kostas Papadimitriou
}
282 13858d75 Kostas Papadimitriou
283 13858d75 Kostas Papadimitriou
// Disabled and read-only inputs
284 13858d75 Kostas Papadimitriou
input[disabled],
285 13858d75 Kostas Papadimitriou
select[disabled],
286 13858d75 Kostas Papadimitriou
textarea[disabled],
287 13858d75 Kostas Papadimitriou
input[readonly],
288 13858d75 Kostas Papadimitriou
select[readonly],
289 13858d75 Kostas Papadimitriou
textarea[readonly] {
290 13858d75 Kostas Papadimitriou
  background-color: #f5f5f5;
291 13858d75 Kostas Papadimitriou
  border-color: #ddd;
292 13858d75 Kostas Papadimitriou
  cursor: not-allowed;
293 13858d75 Kostas Papadimitriou
}
294 13858d75 Kostas Papadimitriou
295 13858d75 Kostas Papadimitriou
// Actions (the buttons)
296 13858d75 Kostas Papadimitriou
.actions {
297 13858d75 Kostas Papadimitriou
  background: #f5f5f5;
298 13858d75 Kostas Papadimitriou
  margin-top: @baseline;
299 13858d75 Kostas Papadimitriou
  margin-bottom: @baseline;
300 13858d75 Kostas Papadimitriou
  padding: (@baseline - 1) 20px @baseline 150px;
301 13858d75 Kostas Papadimitriou
  border-top: 1px solid #ddd;
302 13858d75 Kostas Papadimitriou
  .border-radius(0 0 3px 3px);
303 13858d75 Kostas Papadimitriou
  .secondary-action {
304 13858d75 Kostas Papadimitriou
    float: right;
305 13858d75 Kostas Papadimitriou
    a {
306 13858d75 Kostas Papadimitriou
      line-height: 30px;
307 13858d75 Kostas Papadimitriou
      &:hover {
308 13858d75 Kostas Papadimitriou
        text-decoration: underline;
309 13858d75 Kostas Papadimitriou
      }
310 13858d75 Kostas Papadimitriou
    }
311 13858d75 Kostas Papadimitriou
  }
312 13858d75 Kostas Papadimitriou
}
313 13858d75 Kostas Papadimitriou
314 13858d75 Kostas Papadimitriou
// Help Text
315 13858d75 Kostas Papadimitriou
// TODO: Do we need to set basefont and baseline here?
316 13858d75 Kostas Papadimitriou
.help-inline,
317 13858d75 Kostas Papadimitriou
.help-block {
318 13858d75 Kostas Papadimitriou
  font-size: @basefont;
319 13858d75 Kostas Papadimitriou
  line-height: @baseline;
320 13858d75 Kostas Papadimitriou
  color: @grayLight;
321 13858d75 Kostas Papadimitriou
}
322 13858d75 Kostas Papadimitriou
.help-inline {
323 13858d75 Kostas Papadimitriou
  padding-left: 5px;
324 13858d75 Kostas Papadimitriou
  *position: relative; /* IE6-7 */
325 13858d75 Kostas Papadimitriou
  *top: -5px; /* IE6-7 */
326 13858d75 Kostas Papadimitriou
}
327 13858d75 Kostas Papadimitriou
328 13858d75 Kostas Papadimitriou
// Big blocks of help text
329 13858d75 Kostas Papadimitriou
.help-block {
330 13858d75 Kostas Papadimitriou
  display: block;
331 13858d75 Kostas Papadimitriou
  max-width: 600px;
332 13858d75 Kostas Papadimitriou
}
333 13858d75 Kostas Papadimitriou
334 13858d75 Kostas Papadimitriou
// Inline Fields (input fields that appear as inline objects
335 13858d75 Kostas Papadimitriou
.inline-inputs {
336 13858d75 Kostas Papadimitriou
  color: @gray;
337 13858d75 Kostas Papadimitriou
  span {
338 13858d75 Kostas Papadimitriou
    padding: 0 2px 0 1px;
339 13858d75 Kostas Papadimitriou
  }
340 13858d75 Kostas Papadimitriou
}
341 13858d75 Kostas Papadimitriou
342 13858d75 Kostas Papadimitriou
// Allow us to put symbols and text within the input field for a cleaner look
343 13858d75 Kostas Papadimitriou
.input-prepend,
344 13858d75 Kostas Papadimitriou
.input-append {
345 13858d75 Kostas Papadimitriou
  input {
346 13858d75 Kostas Papadimitriou
    .border-radius(0 3px 3px 0);
347 13858d75 Kostas Papadimitriou
  }
348 13858d75 Kostas Papadimitriou
  .add-on {
349 13858d75 Kostas Papadimitriou
    position: relative;
350 13858d75 Kostas Papadimitriou
    background: #f5f5f5;
351 13858d75 Kostas Papadimitriou
    border: 1px solid #ccc;
352 13858d75 Kostas Papadimitriou
    z-index: 2;
353 13858d75 Kostas Papadimitriou
    float: left;
354 13858d75 Kostas Papadimitriou
    display: block;
355 13858d75 Kostas Papadimitriou
    width: auto;
356 13858d75 Kostas Papadimitriou
    min-width: 16px;
357 13858d75 Kostas Papadimitriou
    height: 18px;
358 13858d75 Kostas Papadimitriou
    padding: 4px 4px 4px 5px;
359 13858d75 Kostas Papadimitriou
    margin-right: -1px;
360 13858d75 Kostas Papadimitriou
    font-weight: normal;
361 13858d75 Kostas Papadimitriou
    line-height: 18px;
362 13858d75 Kostas Papadimitriou
    color: @grayLight;
363 13858d75 Kostas Papadimitriou
    text-align: center;
364 13858d75 Kostas Papadimitriou
    text-shadow: 0 1px 0 @white;
365 13858d75 Kostas Papadimitriou
    .border-radius(3px 0 0 3px);
366 13858d75 Kostas Papadimitriou
  }
367 13858d75 Kostas Papadimitriou
  .active {
368 13858d75 Kostas Papadimitriou
    background: lighten(@green, 30);
369 13858d75 Kostas Papadimitriou
    border-color: @green;
370 13858d75 Kostas Papadimitriou
  }
371 13858d75 Kostas Papadimitriou
}
372 13858d75 Kostas Papadimitriou
.input-prepend {
373 13858d75 Kostas Papadimitriou
  .add-on {
374 13858d75 Kostas Papadimitriou
    *margin-top: 1px; /* IE6-7 */
375 13858d75 Kostas Papadimitriou
  }
376 13858d75 Kostas Papadimitriou
}
377 13858d75 Kostas Papadimitriou
.input-append {
378 13858d75 Kostas Papadimitriou
  input {
379 13858d75 Kostas Papadimitriou
    float: left;
380 13858d75 Kostas Papadimitriou
    .border-radius(3px 0 0 3px);
381 13858d75 Kostas Papadimitriou
  }
382 13858d75 Kostas Papadimitriou
  .add-on {
383 13858d75 Kostas Papadimitriou
    .border-radius(0 3px 3px 0);
384 13858d75 Kostas Papadimitriou
    margin-right: 0;
385 13858d75 Kostas Papadimitriou
    margin-left: -1px;
386 13858d75 Kostas Papadimitriou
  }
387 13858d75 Kostas Papadimitriou
}
388 13858d75 Kostas Papadimitriou
389 13858d75 Kostas Papadimitriou
// Stacked options for forms (radio buttons or checkboxes)
390 13858d75 Kostas Papadimitriou
.inputs-list {
391 13858d75 Kostas Papadimitriou
  margin: 0 0 5px;
392 13858d75 Kostas Papadimitriou
  width: 100%;
393 13858d75 Kostas Papadimitriou
  li {
394 13858d75 Kostas Papadimitriou
    display: block;
395 13858d75 Kostas Papadimitriou
    padding: 0;
396 13858d75 Kostas Papadimitriou
    width: 100%;
397 13858d75 Kostas Papadimitriou
  }
398 13858d75 Kostas Papadimitriou
  label {
399 13858d75 Kostas Papadimitriou
    display: block;
400 13858d75 Kostas Papadimitriou
    float: none;
401 13858d75 Kostas Papadimitriou
    width: auto;
402 13858d75 Kostas Papadimitriou
    padding: 0;
403 13858d75 Kostas Papadimitriou
    margin-left: 20px;
404 13858d75 Kostas Papadimitriou
    line-height: @baseline;
405 13858d75 Kostas Papadimitriou
    text-align: left;
406 13858d75 Kostas Papadimitriou
    white-space: normal;
407 13858d75 Kostas Papadimitriou
    strong {
408 13858d75 Kostas Papadimitriou
      color: @gray;
409 13858d75 Kostas Papadimitriou
    }
410 13858d75 Kostas Papadimitriou
    small {
411 13858d75 Kostas Papadimitriou
      font-size: @basefont - 2;
412 13858d75 Kostas Papadimitriou
      font-weight: normal;
413 13858d75 Kostas Papadimitriou
    }
414 13858d75 Kostas Papadimitriou
  }
415 13858d75 Kostas Papadimitriou
  .inputs-list {
416 13858d75 Kostas Papadimitriou
    margin-left: 25px;
417 13858d75 Kostas Papadimitriou
    margin-bottom: 10px;
418 13858d75 Kostas Papadimitriou
    padding-top: 0;
419 13858d75 Kostas Papadimitriou
  }
420 13858d75 Kostas Papadimitriou
  &:first-child {
421 13858d75 Kostas Papadimitriou
    padding-top: 6px;
422 13858d75 Kostas Papadimitriou
  }
423 13858d75 Kostas Papadimitriou
  li + li {
424 13858d75 Kostas Papadimitriou
    padding-top: 2px;
425 13858d75 Kostas Papadimitriou
  }
426 13858d75 Kostas Papadimitriou
  input[type=radio],
427 13858d75 Kostas Papadimitriou
  input[type=checkbox] {
428 13858d75 Kostas Papadimitriou
    margin-bottom: 0;
429 13858d75 Kostas Papadimitriou
    margin-left: -20px;
430 13858d75 Kostas Papadimitriou
    float: left;
431 13858d75 Kostas Papadimitriou
  }
432 13858d75 Kostas Papadimitriou
}
433 13858d75 Kostas Papadimitriou
434 13858d75 Kostas Papadimitriou
// Stacked forms
435 13858d75 Kostas Papadimitriou
.form-stacked {
436 13858d75 Kostas Papadimitriou
  padding-left: 20px;
437 13858d75 Kostas Papadimitriou
  fieldset {
438 13858d75 Kostas Papadimitriou
    padding-top: @baseline / 2;
439 13858d75 Kostas Papadimitriou
  }
440 13858d75 Kostas Papadimitriou
  legend {
441 13858d75 Kostas Papadimitriou
    padding-left: 0;
442 13858d75 Kostas Papadimitriou
  }
443 13858d75 Kostas Papadimitriou
  label {
444 13858d75 Kostas Papadimitriou
    display: block;
445 13858d75 Kostas Papadimitriou
    float: none;
446 13858d75 Kostas Papadimitriou
    width: auto;
447 13858d75 Kostas Papadimitriou
    font-weight: bold;
448 13858d75 Kostas Papadimitriou
    text-align: left;
449 13858d75 Kostas Papadimitriou
    line-height: 20px;
450 13858d75 Kostas Papadimitriou
    padding-top: 0;
451 13858d75 Kostas Papadimitriou
  }
452 13858d75 Kostas Papadimitriou
  .clearfix {
453 13858d75 Kostas Papadimitriou
    margin-bottom: @baseline / 2;
454 13858d75 Kostas Papadimitriou
    div.input {
455 13858d75 Kostas Papadimitriou
      margin-left: 0;
456 13858d75 Kostas Papadimitriou
    }
457 13858d75 Kostas Papadimitriou
  }
458 13858d75 Kostas Papadimitriou
  .inputs-list {
459 13858d75 Kostas Papadimitriou
    margin-bottom: 0;
460 13858d75 Kostas Papadimitriou
    li {
461 13858d75 Kostas Papadimitriou
      padding-top: 0;
462 13858d75 Kostas Papadimitriou
      label {
463 13858d75 Kostas Papadimitriou
        font-weight: normal;
464 13858d75 Kostas Papadimitriou
        padding-top: 0;
465 13858d75 Kostas Papadimitriou
      }
466 13858d75 Kostas Papadimitriou
    }
467 13858d75 Kostas Papadimitriou
  }
468 13858d75 Kostas Papadimitriou
  div.clearfix.error {
469 13858d75 Kostas Papadimitriou
    padding-top: 10px;
470 13858d75 Kostas Papadimitriou
    padding-bottom: 10px;
471 13858d75 Kostas Papadimitriou
    padding-left: 10px;
472 13858d75 Kostas Papadimitriou
    margin-top: 0;
473 13858d75 Kostas Papadimitriou
    margin-left: -10px;
474 13858d75 Kostas Papadimitriou
  }
475 13858d75 Kostas Papadimitriou
  .actions {
476 13858d75 Kostas Papadimitriou
    margin-left: -20px;
477 13858d75 Kostas Papadimitriou
    padding-left: 20px;
478 13858d75 Kostas Papadimitriou
  }
479 13858d75 Kostas Papadimitriou
}