a97af4d458a450fba5d14382841dcb7b8c2d6e9e
[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     .category input[type="text"],
280     .category .column-range,
281     .categoryitem,
282     .courseitem {
283         font-weight: bold;
284     }
286     .emptyrow {
287         display: none;
288     }
290     .gradeitemdescription {
291         font-weight: normal;
292         padding-left: 24px;
293     }
295     .column-weight {
296         white-space: nowrap;
298         &.level3 {
299             padding-left: 37px;
300         }
302         &.level4 {
303             padding-left: 66px;
304         }
306         &.level5 {
307             padding-left: 95px;
308         }
310         &.level6 {
311             padding-left: 124px;
312         }
314         &.level7 {
315             padding-left: 153px;
316         }
318         &.level8 {
319             padding-left: 182px;
320         }
322         &.level9 {
323             padding-left: 211px;
324         }
326         &.level10 {
327             padding-left: 240px;
328         }
329     }
331     .column-range {
332         &.level2 {
333             padding-left: 37px;
334         }
336         &.level3 {
337             padding-left: 66px;
338         }
340         &.level4 {
341             padding-left: 95px;
342         }
344         &.level5 {
345             padding-left: 124px;
346         }
348         &.level6 {
349             padding-left: 153px;
350         }
352         &.level7 {
353             padding-left: 182px;
354         }
356         &.level8 {
357             padding-left: 211px;
358         }
360         &.level9 {
361             padding-left: 240px;
362         }
364         &.level10 {
365             padding-left: 269px;
366         }
367     }
369     &.generaltable {
370         .levelodd {
371             background-color: $table-accent-bg;
372         }
374         .leveleven {
375             background-color: $table-bg;
376         }
377     }
380 /**
381  * Grader report.
382  */
383 .path-grade-report-grader {
384     .gradeparent {
385         table {
386             @include border-radius($border-radius);
387         }
389         tr .cell,
390         .floater .cell {
391             background-color: $pagination-bg;
392         }
394         table,
395         .cell {
396             border-color: $table-border-color;
397         }
399         .userrow.odd .cell,
400         .floater .cell.odd,
401         .heading .cell,
402         .cell.category,
403         .avg .cell {
404             background-color: $gray-100;
405         }
407         table .clickable {
408             cursor: pointer;
409         }
410     }
413 /**
414  * User report.
415  */
416 .path-grade-report-user .user-grade {
417     border: none;
419     &.generaltable {
420         .levelodd {
421             background-color: $table-accent-bg;
422         }
424         .leveleven {
425             background-color: $table-bg;
426         }
427     }
430 /**
431  * Single view.
432  */
433 .path-grade-report-singleview input[name^="finalgrade"] {
434     width: 80px;