_form-group.scss 11.2 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;
150
        position: static;
Naomi Guyer's avatar
Naomi Guyer committed
151

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

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

    &.last {
        border:0;
    }
Naomi Guyer's avatar
Naomi Guyer committed
168

169
170
171
172
    &.with-text-input {
        padding-bottom: 0;
    }

Naomi Guyer's avatar
Naomi Guyer committed
173
174
175
176
177
178
179
180
181
182
    &.login {
        input {
            &[type=text],
            &[type=password] {
                max-width:100%;
            }
        }
    }

    &.input-small,
183
    &.input-group,
Naomi Guyer's avatar
Naomi Guyer committed
184
185
186
187
    &:last-child {
        border: 0;
    }

188
    &.tab-pane,
Naomi Guyer's avatar
Naomi Guyer committed
189
190
191
192
193
    &.collapsible-group {
        border: 0;
        padding: 0;
    }

194
195
196
197
198
199
    &.with-padding {
        .form-group {
            padding: 20px 0;
        }
    }

200
201
202
203
204
205
206
207
    &.checkboxes {
        .btn-group {
            margin: 10px 0;
            display: block;
        }
         input[type=checkbox] {
            margin-left: 0;
        }
Naomi Guyer's avatar
Naomi Guyer committed
208
209
210
211
212
        &.stacked {
            .checkboxes-option {
                margin-left: 0;
            }
        }
213
214
215
216
217
218
        .checkboxes-option {
            margin-left: 265px;
            display: inline-block;
        }
    }

Naomi Guyer's avatar
Naomi Guyer committed
219
220
221
222
223
224
    &.checkbox {
        label {
            padding-left: 0;
        }
        .checkbox {
            display: inline-block;
Liam Sharpe's avatar
Liam Sharpe committed
225
            position: relative;
Naomi Guyer's avatar
Naomi Guyer committed
226
227
228
229
230
231
232
233
234
235
236
237
238
        }
        input[type=checkbox] {
            margin-left: 0;
        }
    }

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

239
240
241
242
    &.submit {
        border-bottom: none;
    }

Naomi Guyer's avatar
Naomi Guyer committed
243
244
    // reset bootstrap button style for cancel button
    &.submitcancel {
245
        border-bottom: none;
Naomi Guyer's avatar
Naomi Guyer committed
246
247
248
249
250
251
252
253
254
255
256
257
        .cancel {
            background-color: transparent;
            border: none;
            text-decoration: underline;
            color: $link-color;
            &:hover {
                color: $link-hover-color;
            }
        }
    }

    &.filebrowser {
258
        border-bottom-width: 0;
Naomi Guyer's avatar
Naomi Guyer committed
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
        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%;
                }
            }
        }
    }
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306

    &.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;
307
308
309
        h4 {
            margin: 0;
        }
310
    }
Naomi Guyer's avatar
Naomi Guyer committed
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
    &.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;
            }
        }
    }

330
331
332
333
334
335
336
337
338
339
    // c.f edit group
   &.five-across {
        label {
            clear:both;
            width:100%;
        }
        input[type=text],
        input[type=password],
        select {
            @media (min-width: $screen-sm-min) {
340
                width: 155px;
341
342
343
344
345
346
347
348
349
350
351
            }
            @media (min-width: $screen-lg-min) {
                width: 150px;
            }
        }
        select {
            margin-left: 5px;
        }
        label + select {
            margin-left: 0px; // padding provided by label instead
        }
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
        &.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;
374
                    color: $theme-text-midtone-color;
375
376
377
                }
                &.customrowtitle {
                    width: 70px;
378
379
380
381
382
                    margin-top: 28px;
                    @media (max-width: $screen-xs-max) {
                        width: 100%;
                        margin-top: 15px;
                    }
383
384
                }
            }
385
386
387
388
        }
    }

    h4,
Naomi Guyer's avatar
Naomi Guyer committed
389
    h3 {
390
391
        padding-bottom: 5px;
        margin-bottom: 20px;
392
393
394
        &.filter-result-heading {
            margin-bottom: 0;
        }
395
396
    }
      h3 {
Naomi Guyer's avatar
Naomi Guyer committed
397
398
        font-size: $font-size-large;
        padding-bottom: 10px;
399
400
    }

Naomi Guyer's avatar
Naomi Guyer committed
401

402
    .form-control {
Naomi Guyer's avatar
Naomi Guyer committed
403
404
        display: inline-block;
        @media (min-width: $screen-sm-min) {
Pat Kira's avatar
Pat Kira committed
405
            width: 370px;
406
407
            max-width: 85%;
            .columns3 &,
Naomi Guyer's avatar
Naomi Guyer committed
408
            .form-inline & {
409
410
                max-width:100%;
            }
Naomi Guyer's avatar
Naomi Guyer committed
411
412
413
            .form-inline & {
                width: 100%;
            }
414
415
416
417
418
419
        }
        @media (min-width: $screen-lg-min) {
            width: 500px;
        }
    }

420
421
422
    .form-condensed & {
        .form-control:not(.with-dropdown):not(.dropdown-connect) {
            width: auto;
423
424
425
426
            &.fullwidth {
                width: 100%;
                max-width: 100%;
            }
427
428
429
        }
    }

430
431
432
433
    .modal .fieldset & {
        border-bottom: 1px solid #f0f0f0;;
    }

434
435
436
437
438
439
440
441
442
    &.wysiwyg {

        .has-help &,
        .tab-content & {
             > .mce-container {
                max-width: 90%
            }
        }
    }
443
444
445
446
447
448
449
    .mce-tinymce {
        @media (min-width: $screen-sm-min) {
            width: 420px;
            max-width: 100%;
            .columns3 & {
                max-width: 100%;
            }
Naomi Guyer's avatar
Naomi Guyer committed
450
451
452
453
454
455
        }
        @media (min-width: $screen-lg-min) {
            width: 500px;
        }
    }

456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
    &.radio {
        .pseudolabel {
            @media (max-width: $screen-sm-min) {
                min-width: auto;
            }
        }
        .pseudolabel,
        .radio-wrapper {
            @media (min-width: $screen-sm-min) {
                display: table-cell;
            }
        }
        .modal-docked & {
            .pseudolabel,
            .radio-wrapper {
                @media (max-width: $screen-md-min) {
                    display: block;
                }
            }
Naomi Guyer's avatar
Naomi Guyer committed
475
476
        }
    }
477

Naomi Guyer's avatar
Naomi Guyer committed
478
479
480
481
482
483
484
485
486
487
488
489
    .form-group.radio,
    .radio {
        @media (min-width: $screen-sm-min) {
            margin-top: 0;
        }
        input[type=radio] {
            margin-top: 5px;
            margin-left: 0;
        }
    }

    .help {
490
491
492
493
494
495
        margin-top: 5px;
        float:right; // can't use absolute because it messes up the pop out
    }

    .wysiwyg + .help {
        transform: translate(0px, -180px);
Naomi Guyer's avatar
Naomi Guyer committed
496
497
    }

498
499
500
501
502
503
504
505
    .help-inline {
        .help {
            top: auto;
            margin-top: 0;
            right:auto;
        }
    }

Naomi Guyer's avatar
Naomi Guyer committed
506
507
508
509
510
511
    .errmsg {
        @extend .align-with-input;
        color: $brand-danger;
        font-size: $font-size-base - 1;
        display: block;
        padding-top: 10px;
512

Naomi Guyer's avatar
Naomi Guyer committed
513
        @media (min-width: $screen-md-min) {
514
            margin-left: 265px;
Naomi Guyer's avatar
Naomi Guyer committed
515
516
517
518
519
520
521
522
523
524
525
526
        }
    }

    .description:not(.html) {
        color: $gray-light;
        font-style: italic;
        font-size: $font-size-base - 1;
        max-width: 90%;
        display: block;
        padding-top: 10px;
    }
    .requiredmarker {
527
        color: darken($brand-danger, 5%);
Naomi Guyer's avatar
Naomi Guyer committed
528
529
530
531
532
533
534
535
536
537
538
539
    }

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

.panel .form-group-nested {
    padding-bottom: 20px;
543
}
544

545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
// Style placeholder text
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #777 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #777 !important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #777 !important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #777 !important;
}