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