weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / grade.scss
1 // The class gradetreebox matches the pages displaying the gradebook
2 // "Gradebook setup" > "Simple view" and "Full view".
3 .gradetreebox {
4     h4 {
5         // Force back the base font-size to minimise width.
6         font-size: $font-size-base;
7     }
9     th.cell,
10     input[type=text] {
11         // Fallback on the minimum width.
12         width: auto;
13     }
15     input[type=text],
16     select {
17         // Remove the bottom margin to gain height.
18         margin-bottom: 0;
19     }
20 }
22 // Grade upgrade notice.
23 .core_grades_notices {
24     .singlebutton {
25         display: inline-block;
26     }
27 }
29 .path-grade-report #maincontent + .urlselect {
30     position: absolute;
31     left: 40vw;
32 }
34 .path-grade-report-grader {
35     #region-main {
36         overflow-x: visible;
37         min-width: 100%;
38         width: auto;
39         display: inline-flex;
40         flex-direction: column;
41         & > .card {
42             width: auto;
43             overflow-x: initial;
44         }
45         div[role="main"] {
46             flex: 1 1 auto;
47         }
48     }
49     [data-region="blocks-column"] {
50         width: 100%;
51         clear: both;
52     }
53 }
55 // Rubrics
56 #page-grade-grading-manage {
57     #activemethodselector {
58         label {
59             display: inline-block;
60         }
62         .helptooltip {
63             margin-right: 0.5em;
64         }
65     }
67     .actions {
68         display: block;
69         text-align: center;
70         margin-bottom: 1em;
72         .action {
73             display: inline-block;
74             position: relative;
75             vertical-align: top;
76             width: 150px;
77             text-align: center;
78             overflow: hidden;
79             margin: 0.5em;
80             padding: 1em;
81             border: 1px solid #aaa;
83             .action-text {
84                 position: relative;
85                 top: 0.4em;
86                 font-size: 14px;
87                 white-space: normal;
88             }
89         }
90     }
91 }
93 #page-grade-grading-form-rubric-edit {
94     .gradingform_rubric_editform .status {
95         font-size: 70%;
96     }
97 }
99 #rubric-rubric {
100     &.gradingform_rubric {
101         #rubric-criteria {
102             margin-bottom: 1em;
103             $rubricPadding: 6px;
105             .criterion {
106                 .description {
107                     vertical-align: top;
108                     padding: $rubricPadding;
110                     textarea {
111                         margin-bottom: 0;
112                         height: 115px;
113                     }
114                 }
116                 .definition {
117                     textarea {
118                         width: 80%;
119                         margin-bottom: 0;
120                     }
121                 }
123                 .score {
124                     position: relative;
125                     float: left;
126                     margin-right: 28px;
128                     input {
129                         margin-bottom: 0;
130                     }
131                 }
133                 .level {
134                     vertical-align: top;
135                     padding: $rubricPadding;
137                     .delete {
138                         position: relative;
139                         width: 32px;
140                         height: 32px;
141                         margin-top: -32px;
142                         clear: both;
143                         float: right;
145                         input {
146                             display: block;
147                             position: absolute;
148                             right: 0;
149                             bottom: 0;
150                             height: 24px;
151                             width: 24px;
152                             margin: 0;
154                             &:hover {
155                                 background-color: #ddd;
156                             }
157                         }
158                     }
159                 }
161                 .scorevalue {
162                     input {
163                         // Should handle at least three chars with room to spare.
164                         float: none;
165                         width: 2em;
167                         &.hiddenelement,
168                         &.pseudotablink {
169                             // Zero out the width if it's still in the block flow for some reason
170                             // when hidden
171                             width: 0;
172                         }
173                     }
174                 }
176                 .addlevel {
177                     vertical-align: top;
178                     padding-top: 6px;
180                     input {
181                         height: 30px;
182                         line-height: 1rem;
183                     }
184                 }
185             }
186         }
188         .addcriterion {
189             margin-left: 5px;
190             padding: 0;
192             input {
193                 margin: 0;
194                 color: inherit;
195                 text-shadow: inherit;
196                 border: 0 none;
197                 line-height: inherit;
198                 background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
199                 padding-left: 26px;
200             }
201             margin-bottom: 1em;
202         }
204         .options {
205             clear: both;
207             .option {
208                 label {
209                     margin: 0;
210                     padding: 0;
211                     font-size: inherit;
212                     font-weight: normal;
213                     line-height: 2em;
214                     color: inherit;
215                     text-shadow: none;
216                     background-color: transparent;
217                 }
219                 input {
220                     margin-left: 5px;
221                     margin-right: 12px;
222                 }
223             }
224         }
225     }
227 .grade-display {
228     .description {
229         font-size: 1rem;
230     }
232 .criterion {
233     .description {
234         font-size: 1rem;
235     }
237     .criterion-toggle {
238         .expanded-icon {
239             display: block;
240         }
242         .collapsed-icon {
243             display: none;
244         }
246         &.collapsed {
247             .expanded-icon {
248                 display: none;
249             }
251             .collapsed-icon {
252                 display: block;
253             }
254         }
255     }
258 // Set up grades layout.
259 .path-grade-edit-tree .setup-grades {
260     h4 {
261         margin: 0;
262     }
264     .column-rowspan {
265         padding: 0;
266         width: 24px;
267         min-width: 24px;
268         max-width: 24px;
269     }
271     .category td.column-name {
272         padding-left: 0;
273     }
275     td.column-name {
276         padding-left: 24px;
277     }
279     td.movehere {
280         padding: 0;
281     }
283     td.movehere a.movehere {
284         display: block;
285         width: 100%;
286         height: 2rem;
287         border: 2px dashed $gray-800;
288     }
290     .category input[type="text"],
291     .category .column-range,
292     .categoryitem,
293     .courseitem {
294         font-weight: bold;
295     }
297     .emptyrow {
298         display: none;
299     }
301     .gradeitemdescription {
302         font-weight: normal;
303         padding-left: 24px;
304     }
306     .column-weight {
307         white-space: nowrap;
309         &.level3 {
310             padding-left: 37px;
311         }
313         &.level4 {
314             padding-left: 66px;
315         }
317         &.level5 {
318             padding-left: 95px;
319         }
321         &.level6 {
322             padding-left: 124px;
323         }
325         &.level7 {
326             padding-left: 153px;
327         }
329         &.level8 {
330             padding-left: 182px;
331         }
333         &.level9 {
334             padding-left: 211px;
335         }
337         &.level10 {
338             padding-left: 240px;
339         }
340     }
342     .column-range {
343         &.level2 {
344             padding-left: 37px;
345         }
347         &.level3 {
348             padding-left: 66px;
349         }
351         &.level4 {
352             padding-left: 95px;
353         }
355         &.level5 {
356             padding-left: 124px;
357         }
359         &.level6 {
360             padding-left: 153px;
361         }
363         &.level7 {
364             padding-left: 182px;
365         }
367         &.level8 {
368             padding-left: 211px;
369         }
371         &.level9 {
372             padding-left: 240px;
373         }
375         &.level10 {
376             padding-left: 269px;
377         }
378     }
380     &.generaltable {
381         .levelodd {
382             background-color: $table-accent-bg;
383         }
385         .leveleven {
386             background-color: $table-bg;
387         }
388     }
391 /**
392  * Grader report.
393  */
394 .path-grade-report-grader {
395     .gradeparent {
396         table {
397             @include border-radius($border-radius);
398         }
400         tr .cell,
401         .floater .cell {
402             background-color: $pagination-bg;
403         }
405         table,
406         .cell {
407             border-color: $table-border-color;
408         }
410         .userrow.odd .cell,
411         .floater .cell.odd,
412         .heading .cell,
413         .cell.category,
414         .avg .cell {
415             background-color: $gray-100;
416         }
418         table .clickable {
419             cursor: pointer;
420         }
421     }
424 /**
425  * User report.
426  */
427 .path-grade-report-user .user-grade {
428     border: none;
430     &.generaltable {
431         .levelodd {
432             background-color: $table-accent-bg;
433         }
435         .leveleven {
436             background-color: $table-bg;
437         }
438     }
440     .column-contributiontocoursetotal,
441     .column-range,
442     .column-percentage,
443     .column-weight {
444         /*rtl:ignore*/
445         direction: ltr;
446     }
449 /**
450  * Single view.
451  */
452 .path-grade-report-singleview input[name^="finalgrade"] {
453     width: 80px;