MDL-66999 theme_boost: @extend remove extends for grades
[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 .gradingform_rubric.editor {
100     .addlevel,
101     .addcriterion {
102         input {
103             // Fallback for IE8: we use Bootstrap 2's button styles normally, but
104             // IE8 ignores background-image: linear-gradient rules.
105             background: #fff none no-repeat top left;
106         }
107     }
110 #rubric-rubric {
111     &.gradingform_rubric {
112         #rubric-criteria {
113             margin-bottom: 1em;
114             $rubricPadding: 6px;
116             .criterion {
117                 .description {
118                     vertical-align: top;
119                     padding: $rubricPadding;
121                     textarea {
122                         margin-bottom: 0;
123                         height: 115px;
124                     }
125                 }
127                 .definition {
128                     textarea {
129                         width: 80%;
130                         margin-bottom: 0;
131                     }
132                 }
134                 .score {
135                     position: relative;
136                     float: left;
137                     margin-right: 28px;
139                     input {
140                         margin-bottom: 0;
141                     }
142                 }
144                 .level {
145                     vertical-align: top;
146                     padding: $rubricPadding;
148                     .delete {
149                         position: relative;
150                         width: 32px;
151                         height: 32px;
152                         margin-top: -32px;
153                         clear: both;
154                         float: right;
156                         input {
157                             display: block;
158                             position: absolute;
159                             right: 0;
160                             bottom: 0;
161                             height: 24px;
162                             width: 24px;
163                             margin: 0;
165                             &:hover {
166                                 background-color: #ddd;
167                             }
168                         }
169                     }
170                 }
172                 .scorevalue {
173                     input {
174                         // Should handle at least three chars with room to spare.
175                         float: none;
176                         width: 2em;
178                         &.hiddenelement,
179                         &.pseudotablink {
180                             // Zero out the width if it's still in the block flow for some reason
181                             // when hidden
182                             width: 0;
183                         }
184                     }
185                 }
187                 .addlevel {
188                     vertical-align: middle;
190                     input {
191                         background-position: 0 0;
192                         height: 30px;
193                         margin-right: 5px;
194                     }
195                 }
196             }
197         }
199         .addcriterion {
200             margin-left: 5px;
201             padding: 0;
203             input {
204                 margin: 0;
205                 color: inherit;
206                 text-shadow: inherit;
207                 border: 0 none;
208                 line-height: inherit;
209                 background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
210                 padding-left: 26px;
211             }
212             margin-bottom: 1em;
213         }
215         .options {
216             clear: both;
218             .option {
219                 label {
220                     margin: 0;
221                     padding: 0;
222                     font-size: inherit;
223                     font-weight: normal;
224                     line-height: 2em;
225                     color: inherit;
226                     text-shadow: none;
227                     background-color: transparent;
228                 }
230                 input {
231                     margin-left: 5px;
232                     margin-right: 12px;
233                 }
234             }
235         }
236     }
238 .grade-display {
239     .description {
240         font-size: 1rem;
241     }
243 .criterion {
244     .description {
245         font-size: 1rem;
246     }
248     .criterion-toggle {
249         .expanded-icon {
250             display: block;
251         }
253         .collapsed-icon {
254             display: none;
255         }
257         &.collapsed {
258             .expanded-icon {
259                 display: none;
260             }
262             .collapsed-icon {
263                 display: block;
264             }
265         }
266     }
269 // Set up grades layout.
270 .path-grade-edit-tree .setup-grades {
271     h4 {
272         margin: 0;
273     }
275     .column-rowspan {
276         padding: 0;
277         width: 24px;
278         min-width: 24px;
279         max-width: 24px;
280     }
282     .category td.column-name {
283         padding-left: 0;
284     }
286     td.column-name {
287         padding-left: 24px;
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-bg-accent;
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             background-color: $pagination-bg;
402         }
404         table,
405         .cell {
406             border-color: $table-border-color;
407         }
409         tr:nth-of-type(even) .cell,
410         .floater .cell,
411         .avg {
412             background-color: $gray-lightest;
413         }
415         table .clickable {
416             cursor: pointer;
417         }
418     }
421 /**
422  * User report.
423  */
424 .path-grade-report-user .user-grade {
425     border: none;
427     &.generaltable {
428         .levelodd {
429             background-color: $table-bg-accent;
430         }
432         .leveleven {
433             background-color: $table-bg;
434         }
435     }
438 /**
439  * Single view.
440  */
441 .path-grade-report-singleview input[name^="finalgrade"] {
442     width: 80px;