_forms.scss 7.22 KB
Newer Older
Naomi Guyer's avatar
Naomi Guyer committed
1

Pat Kira's avatar
Pat Kira committed
2
3

.message {
Pat Kira's avatar
Pat Kira committed
4
5
6
    font-size: 0.9em;
    color: $gray;
    margin-left: 20px;
Pat Kira's avatar
Pat Kira committed
7
}
Pat Kira's avatar
Pat Kira committed
8

Pat Kira's avatar
Pat Kira committed
9
.pieform-fieldset {
Pat Kira's avatar
Pat Kira committed
10
11
12
    .html {
        @include clearfix;
    }
Pat Kira's avatar
Pat Kira committed
13
14
}

Pat Kira's avatar
Pat Kira committed
15
16
17
18
19
label.sr-only + div.mce-tinymce {
    max-width: 100%;
    width: 100%;
}

Naomi Guyer's avatar
Naomi Guyer committed
20
21
22
23
24
25
26
27
28
.pseudolabel {
    vertical-align: top;
    padding-right: 10px;
    display: inline-block;
}

label,
.pseudolabel {
    @extend .control-label;
Pat Kira's avatar
Pat Kira committed
29
    min-width: 230px;
Naomi Guyer's avatar
Naomi Guyer committed
30
31
32
    max-width: 100%;
    padding-right: 10px;
    font-weight:normal;
Naomi Guyer's avatar
Naomi Guyer committed
33
34
35
    &.btn {
        min-width: 0;
    }
Naomi Guyer's avatar
Naomi Guyer committed
36
37
    .col-md-2 & {
        min-width:0;
Pat Kira's avatar
Pat Kira committed
38
    }
Naomi Guyer's avatar
Naomi Guyer committed
39
}
Pat Kira's avatar
Pat Kira committed
40

Naomi Guyer's avatar
Naomi Guyer committed
41
42
43
44
.stacked-label {
    display: inline-block;
    @media (min-width: $screen-sm-min) {
        width:200px;
Pat Kira's avatar
Pat Kira committed
45
    }
Pat Kira's avatar
Pat Kira committed
46
47
}

Naomi Guyer's avatar
Naomi Guyer committed
48

Naomi Guyer's avatar
Naomi Guyer committed
49
50
51
.as-panel form {
    margin-top:0;
}
Pat Kira's avatar
Pat Kira committed
52

Naomi Guyer's avatar
Naomi Guyer committed
53
54
55
56
.main table form {
    margin:0;
}

Pat Kira's avatar
Pat Kira committed
57
input + label {
Pat Kira's avatar
Pat Kira committed
58
    font-weight: normal;
Pat Kira's avatar
Pat Kira committed
59
60
61
62
63
64
}

input[type=text],
input[type=password],
textarea,
select {
Pat Kira's avatar
Pat Kira committed
65
    @extend .form-control;
Pat Kira's avatar
Pat Kira committed
66
67
68
}

.form-group {
Pat Kira's avatar
Pat Kira committed
69
70
71
72
73
74
75
76
77
78
79
80
81
82
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
    padding: 20px 0;
    position: relative;

    &.input-small,
    &:last-child {
        border: 0;
    }
    &.tab-pane, 
    &.collapsible-group {
        border: 0;
        padding: 0;
    }
83
84
85
86
87
    h3 {
        font-size: $font-size-large;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid $gray-lighter;
Pat Kira's avatar
Pat Kira committed
88
    } 
Pat Kira's avatar
Pat Kira committed
89

Naomi Guyer's avatar
Naomi Guyer committed
90
91
92
93
    .file-wrapper,
    .tag-wrapper input,
    .mce-tinymce,
    .table-selectedlist,
94
    .about-text,
95
96
97
98
99
100
    input[type=text],
    input[type=password],
    input[type=file],
    textarea,
    select {
        max-width: 85%;
Pat Kira's avatar
Pat Kira committed
101
        display: inline-block;
102
        @media (min-width: $screen-sm-min) {
Pat Kira's avatar
Pat Kira committed
103
            width: 420px;
Naomi Guyer's avatar
Naomi Guyer committed
104
105
        }
        @media (min-width: $screen-lg-min) {
106
107
108
109
            width: 500px;
        }
    }

Pat Kira's avatar
Pat Kira committed
110
111
    @media (min-width: $screen-sm-min) {
        &.input-small {
Pat Kira's avatar
Pat Kira committed
112
            max-width: 100%;
Pat Kira's avatar
Pat Kira committed
113
114
115
116
117
118
            width: 25%;
            .input-small {
                margin:0;
            }
        }
    }
Naomi Guyer's avatar
Naomi Guyer committed
119
120
121
122
123
124

    .pseudolabel ~ .radio:not(.form-group){
        &:nth-child(n+3) {
            @extend .align-with-input;
        }
    }
Pat Kira's avatar
Pat Kira committed
125
    
Naomi Guyer's avatar
Naomi Guyer committed
126
    .form-group.radio,
Pat Kira's avatar
Pat Kira committed
127
128
129
130
    .radio {
        @media (min-width: $screen-sm-min) {
            margin-top: 0;
            display: inline-block;
131
        }
Pat Kira's avatar
Pat Kira committed
132
133
        input[type=radio] {
            margin-top: 5px;
Pat Kira's avatar
Pat Kira committed
134
135
            margin-left: 0;
        }
Pat Kira's avatar
Pat Kira committed
136
137
138
139
140
    }

    &.checkbox {
        label {
            padding-left: 0;
Pat Kira's avatar
Pat Kira committed
141
142
        }
        .checkbox {
Pat Kira's avatar
Pat Kira committed
143
            display: inline-block;
Pat Kira's avatar
Pat Kira committed
144
        }
Pat Kira's avatar
Pat Kira committed
145
146
        input[type=checkbox] {
            margin-left: 0;
Pat Kira's avatar
Pat Kira committed
147
        }
Pat Kira's avatar
Pat Kira committed
148
    }
149

Pat Kira's avatar
Pat Kira committed
150
151
152
153
154
155
156
    .help {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top:-20px;
    }

Naomi Guyer's avatar
Naomi Guyer committed
157
158
159
160
161
162
163
    &.calendar {
        .calendar {
            margin-left: 0;
            width: 165px;
        }
    }

164
165
166
167
168
169
170
171
172
173
174
175
    // reset bootstrap button style for cancel button
    &.submitcancel {
        .cancel {
            background-color: transparent;
            border: none;
            text-decoration: underline;
            color: $link-color;
            &:hover {
                color: $link-hover-color;
            }
        }
    }
Naomi Guyer's avatar
Naomi Guyer committed
176
177
178
179
180
181

    &.filebrowser {
        label {
            vertical-align: top;
        }
    }
Pat Kira's avatar
Pat Kira committed
182

Pat Kira's avatar
Pat Kira committed
183
184
185
186
187
188
189
190
    .errmsg {
        @extend .align-with-input;
        color: $brand-danger;
        font-size: $font-size-base - 1;
        display: block;
        padding-top: 10px;
        
        @media (min-width: $screen-md-min) {
Pat Kira's avatar
Pat Kira committed
191
            margin-left: 230px;
Pat Kira's avatar
Pat Kira committed
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
        }
    }
    &.checkbox {
         .description {
            margin-left:0;
            max-width: 700px;
         }
    }
    .description {
        @extend .align-with-input;
        color: $gray-light;
        font-style: italic;
        font-size: $font-size-base - 1;
        max-width: 500px;
        display: block;
        padding-top: 10px;

        @media (min-width: $screen-md-min) {
Pat Kira's avatar
Pat Kira committed
210
            margin-left: 230px;
Pat Kira's avatar
Pat Kira committed
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
        }

        @media (min-width: $screen-md-min) and (max-width: $screen-lg-min){
            margin-left: 0;
        }
    }
    &.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%;
                }
            }
        }
    }
    .requiredmarker {
        color: $brand-danger;
Pat Kira's avatar
Pat Kira committed
234
    }
Pat Kira's avatar
Pat Kira committed
235
}
Pat Kira's avatar
Pat Kira committed
236

Pat Kira's avatar
Pat Kira committed
237
// remove styles on outer element as class is duplicated to form element
Pat Kira's avatar
Pat Kira committed
238
239
240
241
242
243
244
245
246
.form-group.btn,
.form-group-inline.btn {
    background: none;
    border: none;
    padding-left: 0;
    &:hover {
        background: none;
        border: none;
    }
Pat Kira's avatar
Pat Kira committed
247
}
Pat Kira's avatar
Pat Kira committed
248

249
250
251
252
253
254
255
.form-group-inline {
    &.select,
    &.text {
        margin-right: 10px;
    }
}

Pat Kira's avatar
Pat Kira committed
256
257
.wysiwyg label,
.textarea label {
Pat Kira's avatar
Pat Kira committed
258
    vertical-align: top;
Pat Kira's avatar
Pat Kira committed
259
260
261
262
}

// hide unwanted elements
.nav-tabs + .submit,
263
.tab-content legend {
Pat Kira's avatar
Pat Kira committed
264
    display: none;
Pat Kira's avatar
Pat Kira committed
265
266
}
.radio-aligned {
Pat Kira's avatar
Pat Kira committed
267
    display: inline-block;
Pat Kira's avatar
Pat Kira committed
268
269
}
.no-radio {
Pat Kira's avatar
Pat Kira committed
270
    margin-left: 19px;
Pat Kira's avatar
Pat Kira committed
271
272
273
}

.aligned-list {
Pat Kira's avatar
Pat Kira committed
274
275
276
    display: block;
    @media (min-width: $screen-sm-min) {
        display: inline-block;
Pat Kira's avatar
Pat Kira committed
277
        width: 420px;
Naomi Guyer's avatar
Naomi Guyer committed
278
279
    }
    @media (min-width: $screen-lg-min) {
Pat Kira's avatar
Pat Kira committed
280
281
        width: 500px;
    }
Pat Kira's avatar
Pat Kira committed
282
283
284
}

.align-with-input {
Pat Kira's avatar
Pat Kira committed
285
286
287
    display: inline-block;
    margin-left: 0;
    @media (min-width: $screen-sm-min) {
Pat Kira's avatar
Pat Kira committed
288
        margin-left: 230px;
Pat Kira's avatar
Pat Kira committed
289
    }
Pat Kira's avatar
Pat Kira committed
290
291
}

Pat Kira's avatar
Pat Kira committed
292
293
294
295
296
297
298
299
300
.sidebar-content {
    .errmsg {
        margin-left: 0;
    }
}

.calendar .calendar,
.tag .description,
.form-group .description {
301
    @extend .align-with-input;
Pat Kira's avatar
Pat Kira committed
302
    color: $gray-light;
Pat Kira's avatar
Pat Kira committed
303
304
305
    font-size: $font-size-base - 1;
    display: block;
    padding-top: 10px;
Pat Kira's avatar
Pat Kira committed
306

307
    @media (min-width: $screen-md-min) {
Pat Kira's avatar
Pat Kira committed
308
        margin-left: 230px;
309
    }
Pat Kira's avatar
Pat Kira committed
310
311
}

Pat Kira's avatar
Pat Kira committed
312
313
314
315
.resizable-textarea {
    display: inline-block;
    width: 85%;
    @media (min-width: $screen-sm-min) {
Pat Kira's avatar
Pat Kira committed
316
        width: 420px;
Pat Kira's avatar
Pat Kira committed
317
318
319
320
321
322
323
324
    }
    @media (min-width: $screen-lg-min) {
        width: 500px;
    }
    .textarea {
        @media (min-width: $screen-sm-min) {
            max-width: 100%;
        }
Pat Kira's avatar
Pat Kira committed
325
    }
Pat Kira's avatar
Pat Kira committed
326
}
Pat Kira's avatar
Pat Kira committed
327

328
// Style for input field after select box 
Pat Kira's avatar
Pat Kira committed
329
.select-with-input {
330
331
332
333
334
335
336
337
338
339
340
    select {
        display: block;
        margin-right: 15px;
        @media (min-width: $screen-sm-min) {
            display: inline-block;
        }
    }
    input[type=text] {
        margin-top: 15px;
        width: 85%;
        @media (min-width: $screen-sm-min) {
Naomi Guyer's avatar
Naomi Guyer committed
341
342
            display: block;
            width: 450px;
Pat Kira's avatar
Pat Kira committed
343
            margin-left: 230px;
344
        }
Naomi Guyer's avatar
Naomi Guyer committed
345
        @media (min-width: $screen-lg-min) {
346
            display: inline-block;
Naomi Guyer's avatar
Naomi Guyer committed
347
348
            width: 314px;
            margin-left: 0;
349
350
351
352
        }
    }
}

Pat Kira's avatar
Pat Kira committed
353
354
355
.form-notifications {
    .form-group .select {
        width: 250px;
Pat Kira's avatar
Pat Kira committed
356
357
358
    }
}

Naomi Guyer's avatar
Naomi Guyer committed
359

Naomi Guyer's avatar
Naomi Guyer committed
360
361
362
363
.form-inline {
    &.form-select-filter {
        label {
            min-width: auto !important;
Pat Kira's avatar
Pat Kira committed
364
            width: auto !important;
Naomi Guyer's avatar
Naomi Guyer committed
365
366
367
368
        }
        select {
            width: 250px;
        }
Pat Kira's avatar
Pat Kira committed
369
    }
Pat Kira's avatar
Pat Kira committed
370
371
372
373
374
}

.form-createfolder {
    margin-top: 30px;
    input.text {
Pat Kira's avatar
Pat Kira committed
375
        width: 230px;
Pat Kira's avatar
Pat Kira committed
376
377
378
    }
}

Pat Kira's avatar
Pat Kira committed
379
380
381
382
383
.input-xs {
    height: auto;
    padding: 0 6px;
}

Naomi Guyer's avatar
Naomi Guyer committed
384
385
386
387
388
389
390
.inline {
    label {
        line-height: 33px;
        max-width: 30%;
    }
    label, input, select {
        display:inline-block;
Pat Kira's avatar
Pat Kira committed
391
        max-width: 230px;
Naomi Guyer's avatar
Naomi Guyer committed
392
393
        min-width:0;
    }
Naomi Guyer's avatar
Naomi Guyer committed
394
}
Pat Kira's avatar
Pat Kira committed
395

Naomi Guyer's avatar
Naomi Guyer committed
396
397
398
399
400
401
402
403
404
405
406

.input-group.with-help {
    select:not(:first-child),
    input:not(:first-child) {
        @include border-right-radius(3px);
    }
}

.btn input {
    margin-top: 0;
}