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