_form-group.scss 9.68 KB
Newer Older
Naomi Guyer's avatar
Naomi Guyer committed
1
// remove styles on outer element as class is duplicated to form element
Liam Sharpe's avatar
Liam Sharpe committed
2
.form-group.btn:not(.checkbox),
Naomi Guyer's avatar
Naomi Guyer committed
3
4
5
6
7
8
9
10
11
12
.form-group-inline.btn {
    background: none;
    border: none;
    padding-left: 0;
    &:hover {
        background: none;
        border: none;
    }
}

Robert Lyon's avatar
Robert Lyon committed
13
14
15
16
17
18
19
20
21
.stacked .with-heading > .form-group {
    &.select {
        label {
            display: block;
            font-weight: bold;
        }
    }
}

Naomi Guyer's avatar
Naomi Guyer committed
22
.form-group {
Naomi Guyer's avatar
Naomi Guyer committed
23
24
25
26
27
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
    padding: 20px 0;
    position: relative;

Robert Lyon's avatar
Robert Lyon committed
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    @media (min-width: $screen-sm-min) {
        &.input-pair {
            max-width: 48%;
            padding-top: 0;
            padding-bottom: 0;
        }
        &.input-pair ~ .input-pair {
            border-left: 1px solid #eaeaea;
            padding-left: 20px;
            margin-left: 15px;
            padding-top: 0;
        }
    }

42
43
44
45
46
47
    // Reset form-group for btn-group-top
    &.group-request {
        border-bottom: 0;
        padding: 0;
    }

Robert Lyon's avatar
Robert Lyon committed
48
49
50
51
52
53
54
55
    &.input-pair {
        padding-top: 10px;
        .select2 {
            max-width: 100%;
            width: 100%;
        }
    }

56
57
58
    .form-group {
        padding: 0;
    }
59
60
61
62
63
    &.nojs-hidden-block {
        .js & {
            display: none
        }
    }
64
65
    &.fieldset,
    .form-group-nested & {
66
67
68
69
70
        .form-group {
           padding: 20px 0;
        }
    }

Robert Lyon's avatar
Robert Lyon committed
71
72
73
74
75
    .form-simple & {
        border: 0;
        label {
            min-width: 100px;
        }
76
77
78
        .form-switch label {
            min-width: auto;
        }
Robert Lyon's avatar
Robert Lyon committed
79
80
    }

81
82
83
    .form-condensed & {
        padding: 7px 0;
        border: 0;
Liam Sharpe's avatar
Liam Sharpe committed
84
         .form-group { //nested form groups
85
86
            padding: 0;
        }
87
        &.fieldset {
88
            .form-group {
Liam Sharpe's avatar
Liam Sharpe committed
89
               padding: 20px 0;
90
91
92
93
            }
        }
    }

94
95
96
97
98
99
    &.bytes {
        .pseudolabel {
            display: none;
        }
    }

100
101
102
103
104
105
106
107
    &.file {
        input {
            @include box-shadow(none);
            border: 0;
            line-height: 14px;
        }
    }

Naomi Guyer's avatar
Naomi Guyer committed
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
    &.fake-form {
        border: 0;
        padding: 0;
        .collapsible-group .panel.collapsible & {
            border: 0;
            padding: 0;
        }
    }

    // this is a weird and somewhat broken case where form renderers are being use to render regular html
    &.html form {
        display: block;
        .form-group,
        .collapsible-group .panel.collapsible & .form-group {
            border: 0;
            padding: 0;
        }
    }

Naomi Guyer's avatar
Naomi Guyer committed
127
128
129
130
    &.button,
    &.submit {
        background: transparent;
        padding: 0;
Naomi Guyer's avatar
Naomi Guyer committed
131
        padding-top: $grid-gutter-width;
Naomi Guyer's avatar
Naomi Guyer committed
132
        border: 0;
Naomi Guyer's avatar
Naomi Guyer committed
133
134
135
        .form-inline & {
            padding: 0;
        }
Naomi Guyer's avatar
Naomi Guyer committed
136
    }
Naomi Guyer's avatar
Naomi Guyer committed
137

Naomi Guyer's avatar
Naomi Guyer committed
138
    //used when adding email addresses to profiles (anywhere else?)
Naomi Guyer's avatar
Naomi Guyer committed
139
140
141
142
143
144
145
146
147
    .message {
        font-size: 0.9em;
        color: $gray;
    }

    .form-inline & {
        padding: 0;
    }

148
149
    .modal-body & {
        padding: 10px 0;
Naomi Guyer's avatar
Naomi Guyer committed
150

151
152
153
154
155
        .description:not(.html) {
            padding-top: 5px;
        }
    }

Naomi Guyer's avatar
Naomi Guyer committed
156
157
    &.hide-label,
    .hide-label & {
158
        label {
Naomi Guyer's avatar
Naomi Guyer committed
159
            @include sr-only;
160
161
162
163
164
165
        }
    }

    &.last {
        border:0;
    }
Naomi Guyer's avatar
Naomi Guyer committed
166
167
168
169
170
171
172
173
174
175
176

    &.login {
        input {
            &[type=text],
            &[type=password] {
                max-width:100%;
            }
        }
    }

    &.input-small,
177
    &.input-group,
Naomi Guyer's avatar
Naomi Guyer committed
178
179
180
181
    &:last-child {
        border: 0;
    }

182
    &.tab-pane,
Naomi Guyer's avatar
Naomi Guyer committed
183
184
185
186
187
    &.collapsible-group {
        border: 0;
        padding: 0;
    }

188
189
190
191
192
193
194
195
    &.checkboxes {
        .btn-group {
            margin: 10px 0;
            display: block;
        }
         input[type=checkbox] {
            margin-left: 0;
        }
Naomi Guyer's avatar
Naomi Guyer committed
196
197
198
199
200
        &.stacked {
            .checkboxes-option {
                margin-left: 0;
            }
        }
201
202
203
204
205
206
        .checkboxes-option {
            margin-left: 265px;
            display: inline-block;
        }
    }

Naomi Guyer's avatar
Naomi Guyer committed
207
208
209
210
211
212
    &.checkbox {
        label {
            padding-left: 0;
        }
        .checkbox {
            display: inline-block;
Liam Sharpe's avatar
Liam Sharpe committed
213
            position: relative;
Naomi Guyer's avatar
Naomi Guyer committed
214
215
216
217
218
219
220
221
222
223
224
225
226
        }
        input[type=checkbox] {
            margin-left: 0;
        }
    }

    &.calendar {
        .calendar {
            margin-left: 0;
            width: 165px;
        }
    }

227
228
229
230
    &.submit {
        border-bottom: none;
    }

Naomi Guyer's avatar
Naomi Guyer committed
231
232
    // reset bootstrap button style for cancel button
    &.submitcancel {
233
        border-bottom: none;
Naomi Guyer's avatar
Naomi Guyer committed
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
        .cancel {
            background-color: transparent;
            border: none;
            text-decoration: underline;
            color: $link-color;
            &:hover {
                color: $link-hover-color;
            }
        }
    }

    &.filebrowser {
        label {
            vertical-align: top;
        }
    }

     &.checkbox {
         .description {
            margin-left:0;
            max-width: 700px;
         }
    }

     &.tags {
        .tag-wrapper {
            display: block;
            @media (min-width: $screen-sm-min) {
                display: inline-block;
            }
            input {
                max-width: 85%;
                display: inline-block;
                @media (min-width: $screen-sm-min) {
                    max-width: 100%;
                }
            }
        }
    }
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294

    &.color {
        label {
            &:first-child {
                display: block;
                @media (min-width: $screen-sm-min) {
                    display: inline-block;
                }
            }
            &:not(:first-child) {
                min-width: inherit;
            }
        }
        input {
            &.color {
                max-width: 240px;
            }
        }
    }
    &.html {
        border-bottom: none;
    }
Naomi Guyer's avatar
Naomi Guyer committed
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
    &.double {
        .description {
            margin-left: 0;
            max-width:90%;
        }
        input[type=text],
        input[type=password],
        select {
            max-width: 45%;
            display: inline-block;
            @media (min-width: $screen-sm-min) {
                width: 150px;
            }
            @media (min-width: $screen-lg-min) {
                width: 150px;
            }
        }
    }

314
315
316
317
318
319
320
321
322
323
    // c.f edit group
   &.five-across {
        label {
            clear:both;
            width:100%;
        }
        input[type=text],
        input[type=password],
        select {
            @media (min-width: $screen-sm-min) {
324
                width: 155px;
325
326
327
328
329
330
331
332
333
334
335
            }
            @media (min-width: $screen-lg-min) {
                width: 150px;
            }
        }
        select {
            margin-left: 5px;
        }
        label + select {
            margin-left: 0px; // padding provided by label instead
        }
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
        &.multi-label {
            &.customrow {
                padding: 5px 0;
            }

             > .field {
                width: 167px;

                &.field-selectnumcols {
                    width: 123px;
                }

                .selectnumcols {
                    width: 107px;
                }

                select {
                    max-width: 90%;
                }

                label {
                    font-size: 0.8em;
                    color: #888;
                }
                &.customrowtitle {
                    width: 70px;
                    margin-top:30px;
                }
            }
365
366
367
368
        }
    }

    h4,
Naomi Guyer's avatar
Naomi Guyer committed
369
    h3 {
370
371
372
373
        padding-bottom: 5px;
        margin-bottom: 20px;
    }
      h3 {
Naomi Guyer's avatar
Naomi Guyer committed
374
375
        font-size: $font-size-large;
        padding-bottom: 10px;
376
377
    }

Naomi Guyer's avatar
Naomi Guyer committed
378

379
    .form-control {
Naomi Guyer's avatar
Naomi Guyer committed
380
381
382
        display: inline-block;
        @media (min-width: $screen-sm-min) {
            width: 420px;
383
384
            max-width: 85%;
            .columns3 &,
Naomi Guyer's avatar
Naomi Guyer committed
385
            .form-inline & {
386
387
                max-width:100%;
            }
Naomi Guyer's avatar
Naomi Guyer committed
388
389
390
            .form-inline & {
                width: 100%;
            }
391
392
393
394
395
396
        }
        @media (min-width: $screen-lg-min) {
            width: 500px;
        }
    }

397
398
399
    .form-condensed & {
        .form-control:not(.with-dropdown):not(.dropdown-connect) {
            width: auto;
400
401
402
403
            &.fullwidth {
                width: 100%;
                max-width: 100%;
            }
404
405
406
        }
    }

407
408
409
410
    .modal .fieldset & {
        border-bottom: 1px solid #f0f0f0;;
    }

411
412
413
414
415
416
417
418
419
    &.wysiwyg {

        .has-help &,
        .tab-content & {
             > .mce-container {
                max-width: 90%
            }
        }
    }
420
421
422
423
424
425
426
    .mce-tinymce {
        @media (min-width: $screen-sm-min) {
            width: 420px;
            max-width: 100%;
            .columns3 & {
                max-width: 100%;
            }
Naomi Guyer's avatar
Naomi Guyer committed
427
428
429
430
431
432
433
434
435
436
437
        }
        @media (min-width: $screen-lg-min) {
            width: 500px;
        }
    }

    .pseudolabel ~ .radio:not(.form-group){
        &:nth-child(n+3) {
            @extend .align-with-input;
        }
    }
438

Naomi Guyer's avatar
Naomi Guyer committed
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
    .form-group.radio,
    .radio {
        @media (min-width: $screen-sm-min) {
            margin-top: 0;
            display: inline-block;
        }
        input[type=radio] {
            margin-top: 5px;
            margin-left: 0;
        }
    }

    .help {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top:-20px;
    }

    .errmsg {
        @extend .align-with-input;
        color: $brand-danger;
        font-size: $font-size-base - 1;
        display: block;
        padding-top: 10px;
464

Naomi Guyer's avatar
Naomi Guyer committed
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
        @media (min-width: $screen-md-min) {
            margin-left: 230px;
        }
    }

    .description:not(.html) {
        color: $gray-light;
        font-style: italic;
        font-size: $font-size-base - 1;
        max-width: 90%;
        display: block;
        padding-top: 10px;
    }
    .requiredmarker {
        color: $brand-danger;
    }

    @media (min-width: $screen-sm-min) {
        &.input-small {
            max-width: 100%;
            width: 25%;
            .input-small {
                margin:0;
            }
        }
    }
}