Statistics
| Branch: | Tag: | Revision:

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
}