_form.scss 4.17 KB
Newer Older
Liam Sharpe's avatar
Liam Sharpe committed
1
2
legend {
    border-bottom: 0;
3
    margin-bottom: 0;
Liam Sharpe's avatar
Liam Sharpe committed
4
}
5

Pat Kira's avatar
Pat Kira committed
6
input + label {
Pat Kira's avatar
Pat Kira committed
7
    font-weight: normal;
Pat Kira's avatar
Pat Kira committed
8
9
10
11
12
13
}

input[type=text],
input[type=password],
textarea,
select {
14
15
    .modal & {
        width: auto;
16
        max-width: 100%;
17
18
19
    }
}

Naomi Guyer's avatar
Naomi Guyer committed
20
21
22
23
24
label,
.pseudolabel {
    @extend .control-label;
    max-width: 100%;
    padding-right: 10px;
25
26
27
28
29
30
31
    font-weight: normal;
    .form-condensed & {
        min-width: 100px;
        &.pseudolabel {
            min-width: 265px;
        }
    }
Naomi Guyer's avatar
Naomi Guyer committed
32
33
34
    &.input-inline {
        display: inline;
    }
Naomi Guyer's avatar
Naomi Guyer committed
35
36
37
38
    &.sr-only {
        min-width: 0;
        width:0;
    }
39
40
41
    .topic & {
        font-weight: 300;
    }
42
43
44
    .form-inline & {
        min-width: 0;
    }
Naomi Guyer's avatar
Naomi Guyer committed
45
46
47
    &.btn,
    .col-md-2 {
        min-width: 0;
48
    }
Pat Kira's avatar
Pat Kira committed
49

Naomi Guyer's avatar
Naomi Guyer committed
50
51
52
53
    .column-layout &,
    .column &{
        min-width: 0;
    }
54

55
56
57
    @media (min-width: $screen-sm-min) {
        min-width: 265px;
    }
Evonne Cheung's avatar
Evonne Cheung committed
58

59
60
61
    .with-label-widthauto & {
        min-width: auto;
    }
Naomi Guyer's avatar
Naomi Guyer committed
62
}
Pat Kira's avatar
Pat Kira committed
63

Naomi Guyer's avatar
Naomi Guyer committed
64
65
66
67
68
.pseudolabel {
    vertical-align: top;
    padding-right: 10px;
    display: inline-block;
}
Pat Kira's avatar
Pat Kira committed
69

Naomi Guyer's avatar
Naomi Guyer committed
70
71
72
73
.checkbox .with-label {
    padding-left: 17px;
}

Naomi Guyer's avatar
Naomi Guyer committed
74
75
76
77
.stacked-label {
    display: inline-block;
    @media (min-width: $screen-sm-min) {
        width:200px;
Pat Kira's avatar
Pat Kira committed
78
    }
Naomi Guyer's avatar
Naomi Guyer committed
79
}
Naomi Guyer's avatar
Naomi Guyer committed
80

Naomi Guyer's avatar
Naomi Guyer committed
81
82
83
.pieform-fieldset {
    .html {
        @include clearfix;
Naomi Guyer's avatar
Naomi Guyer committed
84
    }
Pat Kira's avatar
Pat Kira committed
85
}
Pat Kira's avatar
Pat Kira committed
86

Naomi Guyer's avatar
Naomi Guyer committed
87
88
.as-panel form {
    margin-top:0;
Pat Kira's avatar
Pat Kira committed
89
}
Pat Kira's avatar
Pat Kira committed
90

Naomi Guyer's avatar
Naomi Guyer committed
91
92
.main table form {
    margin:0;
93
94
}

Pat Kira's avatar
Pat Kira committed
95
96
.wysiwyg label,
.textarea label {
Pat Kira's avatar
Pat Kira committed
97
    vertical-align: top;
Pat Kira's avatar
Pat Kira committed
98
}
99
.radio label,
Naomi Guyer's avatar
Naomi Guyer committed
100
101
102
.checkbox label {
    margin-top: 0;
}
Pat Kira's avatar
Pat Kira committed
103
104

.radio-aligned {
Pat Kira's avatar
Pat Kira committed
105
    display: inline-block;
Pat Kira's avatar
Pat Kira committed
106
107
}
.no-radio {
Naomi Guyer's avatar
Naomi Guyer committed
108
    margin-left: 16px;
Pat Kira's avatar
Pat Kira committed
109
110
}

Naomi Guyer's avatar
Naomi Guyer committed
111
112
113
114
// for multiselect buttons
.select-col {
    width : 100px;
}
Pat Kira's avatar
Pat Kira committed
115
116

.align-with-input {
Pat Kira's avatar
Pat Kira committed
117
118
119
    display: inline-block;
    margin-left: 0;
    @media (min-width: $screen-sm-min) {
Naomi Guyer's avatar
Naomi Guyer committed
120
        margin-left: 265px;
Pat Kira's avatar
Pat Kira committed
121
    }
Pat Kira's avatar
Pat Kira committed
122
123
}

124
.resizable-textarea {
125
    .textarea:not(.under-label) {
126
        @extend .align-with-input;
127
128
129
            @media (min-width: $screen-sm-min) {
                margin-top: -25px;
        }
130
131
132
    }
}

Naomi Guyer's avatar
Naomi Guyer committed
133
.form-inline {
Naomi Guyer's avatar
Naomi Guyer committed
134
    position: relative;
135
136
137
    label {
        display: block;
    }
Pat Kira's avatar
Pat Kira committed
138
139
    .form-group {
        padding: 0;
Liam Sharpe's avatar
Liam Sharpe committed
140
        border-bottom: 0px none;
Pat Kira's avatar
Pat Kira committed
141
    }
142
143
144
    &.form-inline-align-bottom .form-group{
        vertical-align: bottom;
    }
Naomi Guyer's avatar
Naomi Guyer committed
145
146
147
148
149
150
151
    &.form-short {
        select, input:not(.submit) {
            max-width:100%;
        }
        .form-group:not(.submit) {
            width: 60%;
        }
Naomi Guyer's avatar
Naomi Guyer committed
152
153
    }
}
Naomi Guyer's avatar
Naomi Guyer committed
154

155
156
157
158
.form-inline-align-bottom a {
    vertical-align: bottom;
}

159
160
161
162
163
164
165
.form-control.file {
    padding: 0;
    box-shadow: none;
    border: none;
    background-color: transparent;
}

Naomi Guyer's avatar
Naomi Guyer committed
166
167
.form-control:disabled {
    color: #aaa;
Liam Sharpe's avatar
Liam Sharpe committed
168
}
169
170
171
172

.form-message-inline  {
    vertical-align: top;
}
Robert Lyon's avatar
Robert Lyon committed
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

.date-picker {
    position: relative;
    &:before {
        font-family: "FontAwesome";
        font-size: 16px;
        content: '\f073';
        color: lighten($text-color, 20%);
        position:absolute;
        right: 10px;
        top: 5px;
        z-index: 0;
    }
    input.form-control {
        width: 100%;
        max-width:100%;
        z-index: 1;
        position:relative;
        &:not(:disabled) {
            background-color: transparent;
        }
        &:disabled {
            opacity: 0.5;
        }
    }
}

.select2.select2-container .select2-selection {
    min-height: $input-height-base; // make select2 look more like a regular select
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $input-color;
    &.select2-selection--multiple {
        &:after {
            content: "\f002";
            color: lighten($text-color, 50%);
            font-family: FontAwesome;
            font-size: 1em;
            display:inline-block;
            position:absolute;
            right: 12px;
            top: 7px;
        }
    }
}

.select2 {
    min-width: 200px;
}

.select2-dropdown .select2-search {
    position: relative;
    &:after {
        content: "\f002";
        color: lighten($text-color, 50%);
        font-family: FontAwesome;
        font-size: 1em;
        display:inline-block;
        position:absolute;
        right: 12px;
        top: 8px;
    }
}

237
238
.select2.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2.select2-container--default .select2-selection--single .select2-selection__placeholder {
Robert Lyon's avatar
Robert Lyon committed
239
240
    line-height: 34px;
}