MDL-55071 theme_boost: Use stylefmt to fix css formating issues
[moodle.git] / theme / boost / scss / moodle / forms.scss
CommitLineData
536f0460
DW
1/**
2 * Moodle forms HTML isn't changeable via renderers (yet?) so this
3 * .less file imports styles from the bootstrap $variables file and
4 * adds them to the existing Moodle form CSS ids and classes.
5 *
6 */
7
536f0460
DW
8.jsenabled .mform .containsadvancedelements .advanced {
9 display: none;
10}
f4143537 11
536f0460
DW
12.mform .containsadvancedelements .advanced.show {
13 display: block;
14}
f4143537 15
536f0460
DW
16#adminsettings span.error {
17 display: inline-block;
18 border: 1px solid $state-danger-border;
19 border-radius: 4px;
20 background-color: $state-danger-bg;
21 padding: 4px;
22 margin-bottom: 4px;
23}
f4143537 24
e919c488 25.mform fieldset {
137c289a
FM
26 margin-left: $spacer * 1.5;
27 margin-bottom: $spacer / 2;
28 border-bottom: $border-width solid $table-border-color;
e919c488 29}
f4143537 30
536f0460 31.mform fieldset.collapsible legend a.fheader {
e919c488
FM
32 padding: 0 5px 0 ($spacer * 1.5);
33 margin-left: -($spacer * 1.5);
92e32fc4 34 background: url([[pix:t/expanded]]) 0 center no-repeat;
536f0460 35}
f4143537 36
536f0460 37.mform fieldset.collapsed legend a.fheader {
92e32fc4
FM
38 /*rtl:raw:
39 background-image: url([[pix:t/collapsed_rtl]]);
40 */
41 /*rtl:remove*/
536f0460
DW
42 background-image: url([[pix:t/collapsed]]);
43}
f4143537 44
536f0460
DW
45.jsenabled .mform .collapsed .fcontainer {
46 display: none;
47}
f4143537 48
91bda4cd 49#adminsettings .error {
536f0460
DW
50 color: $state-danger-text;
51}
f4143537 52
536f0460
DW
53.mform ul.file-list {
54 padding: 0;
55 margin: 0;
56 list-style: none;
57}
f4143537 58
536f0460
DW
59.mform label .req,
60.mform label .adv {
61 cursor: help;
62}
536f0460
DW
63/*rtl:ignore*/
64input#id_externalurl {
65 direction: ltr;
66}
f4143537 67
536f0460
DW
68#portfolio-add-button {
69 display: inline;
70}
71
536f0460
DW
72.form-defaultinfo,
73.form-label .form-shortname {
74 @extend .text-muted;
75}
f4143537 76
536f0460
DW
77.form-label .form-shortname {
78 font-size: $font-size-xs;
79 display: block;
80}
2c773bb3 81
2c773bb3
FM
82.form-item .form-inline {
83 display: inline;
84}
536f0460
DW
85
86.formsettingheading .form-horizontal {
87 @extend .text-muted;
88}
2c773bb3 89
536f0460
DW
90// Moodle doesn't differentiate between what Bootstrap calls
91// .uneditable-inputs and form help text. Styling them both as
92// uneditable looks ugly, styling both as form help is fairly
93// subtle in it's impact. Going for the latter as the best option.
91bda4cd 94.no-felement.fstatic {
536f0460
DW
95 @extend .text-muted;
96 padding-top: 5px;
97}
f4143537 98
91bda4cd 99.no-fitem .fstaticlabel {
536f0460
DW
100 font-weight: bold;
101}
102
103// Pale grey container for submit buttons.
536f0460
DW
104.form-buttons,
105.path-admin .buttons,
106#fitem_id_submitbutton,
107.fp-content-center form + div,
108div.backup-section + form,
109#fgroup_id_buttonar {
110 @extend .form-group;
111 padding-left: 0;
112}
f4143537 113
536f0460
DW
114.path-admin .buttons,
115.form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
116 padding-left: $display1-size;
117}
f4143537 118
2c773bb3
FM
119.form-item .form-setting .defaultsnext > input {
120 display: inline-block;
121}
f4143537 122
536f0460
DW
123.form-item .form-setting .form-checkbox.defaultsnext {
124 // Need to specify .defaultsnext and the .form-checkbox class
125 // is somewhat randomly re-used on various actual checkboxes
126 // throughout the admin forms, instead of on the wrapper div.
127 margin-top: 5px; // Push down checkboxes to align.
128 display: inline-block; // So above style sticks.
129}
130
131#adminsettings h3 {
132 // Copied from bootstrap/forms.less tag legend.
133 display: block;
134 width: 100%;
135 padding: 0;
da92b738 136 margin-bottom: $line-height-base;
536f0460 137 font-size: $font-size-lg;
da92b738 138 line-height: $line-height-base * 2;
536f0460
DW
139 border: 0;
140 border-bottom: 1px solid #e5e5e5;
141}
536f0460
DW
142
143// I think this could be avoided (or at least tidied up) ifr
144// we used HTML5 input types like url, phone, email, number etc.
145/* rtl:ignore */
146.mform .fitem .felement input[name=email],
147.mform .fitem .felement input[name=email2],
148.mform .fitem .felement input[name=url],
149.mform .fitem .felement input[name=idnumber],
150.mform .fitem .felement input[name=phone1],
151.mform .fitem .felement input[name=phone2] {
152 text-align: left;
153 direction: ltr;
154}
113efed5 155
536f0460
DW
156/* rtl:ignore */
157#page-admin-grade-edit-scale-edit .error input#id_name {
158 margin-right: 170px;
159}
f4143537 160
536f0460
DW
161#page-grade-edit-outcome-course .courseoutcomes {
162 margin-left: auto;
163 margin-right: auto;
164 width: 100%;
165}
f4143537 166
536f0460 167#page-grade-edit-outcome-course .courseoutcomes td {
f4143537 168 text-align: center;
536f0460
DW
169}
170/* Install Process' text fields Forms, should always be justified to the left */
171/* rtl:ignore */
172#installform #id_wwwroot,
173#installform #id_dirroot,
174#installform #id_dataroot,
175#installform #id_dbhost,
176#installform #id_dbname,
177#installform #id_dbuser,
178#installform #id_dbpass,
179#installform #id_prefix {
180 direction: ltr;
181}
182
183.mdl-right > label {
184 // Workaround for repository pop-up because the : are outside the label,
185 // can/should be fixed in filemanager renderers.
186 display: inline-block;
187}
188
32e3a8dd
FM
189.singleselect {
190 max-width: 100%;
191}
192
536f0460
DW
193.form-item .form-label label {
194 margin-bottom: 0;
195}
f4143537 196
536f0460
DW
197div#dateselector-calendar-panel {
198 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
199}
200
201fieldset.coursesearchbox label {
202 display: inline;
203}
204
205/**
206 * Show the labels above text editors and file managers except on wide screens.
207 */
536f0460
DW
208
209
536f0460
DW
210/* Section and module editing forms contain special JS components for the
211 availability system (if enabled). */
63e4df60
DW
212#id_availabilityconditionsjson[aria-hidden=true],
213.availability-field [aria-hidden=true] {
214 display: none;
215}
216
217.availability-field {
536f0460
DW
218 select,
219 input[type=text] {
f4143537 220 position: relative;
536f0460
DW
221 top: 4px;
222 }
f4143537 223
536f0460
DW
224 label {
225 display: inline;
226 }
f4143537 227
536f0460
DW
228 .availability-group {
229 margin-right: 8px;
230 }
f4143537 231
536f0460
DW
232 .availability-item {
233 margin-bottom: 6px;
234 }
f4143537 235
536f0460
DW
236 .availability-none {
237 margin-left: 20px;
238 margin-bottom: 4px;
239 }
f4143537 240
536f0460
DW
241 .availability-plugincontrols {
242 padding: 2px 0px 0px 4px;
243 border: 1px solid $gray-lighter;
244 border-radius: 4px;
245 display: inline-block;
246 margin-right: 8px;
247 }
248 /* Eye icon in front of an item and delete icon after it. */
249 .availability-eye,
250 .availability-delete {
251 margin-right: 8px;
252 }
253 /* Hidden eye icon still takes up space. */
254 .availability-eye[aria-hidden=true] {
255 display: inline;
256 visibility: hidden;
257 }
258 /* Eye icons in front of child lists are aligned specially. */
259 .availability-list > .availability-eye img {
260 vertical-align: top;
261 margin-top: 12px;
262 }
263 /* Add button lines up with child elements. */
264 .availability-button {
265 margin-left: 15px;
266 }
267 /* Nested section is grey. */
268 .availability-childlist > .availability-inner {
269 display: inline-block;
270 border: 1px solid $gray-lighter;
271 border-radius: 4px;
272 padding: 6px;
273 margin-bottom: 6px;
274 }
275 /* Second (and more) levels of nested sections are white. */
276 .availability-childlist .availability-childlist > .availability-inner {
277 background: white;
278 }
279 /* Connecting text needs to be indented. */
280 .availability-connector {
281 margin-left: 20px;
282 margin-bottom: 6px;
283 }
284}
285
286/* Default form styling colours all text red. With availability conditions
287 this looks excessive as we show 'Invalid' markers in specific places. */
288.mform .error .availability-field {
289 color: $body-color;
290}
291
292/* This dialogue is used to add an availability condition. */
293.availability-dialogue {
294 .moodle-dialogue .moodle-dialogue-bd {
295 padding-left: 0;
296 padding-right: 0;
297 padding-bottom: 2px;
298 }
f4143537 299
536f0460
DW
300 ul {
301 display: block;
302 margin: 0;
303 }
f4143537 304
536f0460
DW
305 li {
306 display: block;
307 list-style-type: none;
308 padding: 0 0 4px;
309 clear: both;
310 border-bottom: 1px solid $gray-lighter;
311 margin-bottom: 4px;
312 }
f4143537 313
536f0460
DW
314 ul button {
315 float: left;
316 margin-left: 1em;
317 min-width: 140px;
318 margin-top: 4px;
319 }
f4143537 320
536f0460
DW
321 label {
322 margin-left: 170px;
323 margin-right: 1em;
324 margin-bottom: 0;
325 }
f4143537 326
536f0460
DW
327 .availability-buttons button {
328 margin-left: 1em;
329 margin-right: 1em;
330 margin-top: 4px;
331 }
332}
333
536f0460
DW
334/* Custom styles for autocomplete form element */
335.form-autocomplete-selection {
336 margin: 0.2em;
337 min-height: 21px;
338}
f4143537 339
536f0460
DW
340.form-autocomplete-multiple [role=listitem] {
341 cursor: pointer;
342}
343
344.form-autocomplete-suggestions {
345 position: absolute;
346 background-color: white;
347 border: 2px solid $gray-lighter;
348 border-radius: 3px;
349 min-width: 206px;
350 max-height: 20em;
351 overflow: auto;
352 margin: 0px;
353 padding: 0px;
91bda4cd 354 margin-top: 0.4em;
536f0460
DW
355 z-index: 1;
356}
f4143537 357
536f0460
DW
358.form-autocomplete-suggestions li {
359 list-style-type: none;
360 padding: 0.2em;
361 margin: 0;
362 cursor: pointer;
363 color: $body-color;
364}
f4143537 365
536f0460
DW
366.form-autocomplete-suggestions li:hover {
367 background-color: lighten($dropdown-link-active-bg, 15%);
368 color: $dropdown-link-active-color;
369}
f4143537 370
536f0460
DW
371.form-autocomplete-suggestions li[aria-selected=true] {
372 background-color: darken($dropdown-bg, 5%);
373 color: $gray;
374}
375
376.form-autocomplete-downarrow {
377 color: $body-color;
378 position: relative;
91bda4cd 379 top: 0.2em;
536f0460
DW
380 left: -1.5em;
381 cursor: pointer;
382}
383
384.form-autocomplete-selection:focus {
385 outline: none;
386}
f4143537 387
536f0460
DW
388.form-autocomplete-selection [data-active-selection=true] {
389 padding: 0.5em;
390 font-size: large;
391}
91bda4cd
DW
392
393select[multiple] {
394 overflow: auto;
395}