MDL-66999 theme_boost: @extend remove extends for tables
[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             @extend .btn;
74             @extend .btn-lg;
75             display: inline-block;
76             position: relative;
77             vertical-align: top;
78             width: 150px;
79             text-align: center;
80             overflow: hidden;
81             margin: 0.5em;
82             padding: 1em;
83             border: 1px solid #aaa;
85             .action-text {
86                 position: relative;
87                 top: 0.4em;
88                 font-size: 14px;
89                 white-space: normal;
90             }
91         }
92     }
93 }
95 #page-grade-grading-form-rubric-edit {
96     .gradingform_rubric_editform .status {
97         font-size: 70%;
98     }
99 }
101 .gradingform_rubric.editor {
102     .addlevel,
103     .addcriterion {
104         input {
105             // Fallback for IE8: we use Bootstrap 2's button styles normally, but
106             // IE8 ignores background-image: linear-gradient rules.
107             background: #fff none no-repeat top left;
108         }
109     }
112 #rubric-rubric {
113     &.gradingform_rubric {
114         #rubric-criteria {
115             margin-bottom: 1em;
116             $rubricPadding: 6px;
118             .criterion {
119                 .description {
120                     vertical-align: top;
121                     padding: $rubricPadding;
123                     textarea {
124                         margin-bottom: 0;
125                         height: 115px;
126                     }
127                 }
129                 .definition {
130                     textarea {
131                         width: 80%;
132                         margin-bottom: 0;
133                     }
134                 }
136                 .score {
137                     position: relative;
138                     float: left;
139                     margin-right: 28px;
141                     input {
142                         margin-bottom: 0;
143                     }
144                 }
146                 .level {
147                     vertical-align: top;
148                     padding: $rubricPadding;
150                     .delete {
151                         position: relative;
152                         width: 32px;
153                         height: 32px;
154                         margin-top: -32px;
155                         clear: both;
156                         float: right;
158                         input {
159                             display: block;
160                             position: absolute;
161                             right: 0;
162                             bottom: 0;
163                             height: 24px;
164                             width: 24px;
165                             margin: 0;
167                             &:hover {
168                                 background-color: #ddd;
169                             }
170                         }
171                     }
172                 }
174                 .scorevalue {
175                     input {
176                         // Should handle at least three chars with room to spare.
177                         float: none;
178                         width: 2em;
180                         &.hiddenelement,
181                         &.pseudotablink {
182                             // Zero out the width if it's still in the block flow for some reason
183                             // when hidden
184                             width: 0;
185                         }
186                     }
187                 }
189                 .addlevel {
190                     vertical-align: middle;
192                     input {
193                         @extend .btn;
194                         background-position: 0 0;
195                         height: 30px;
196                         margin-right: 5px;
197                     }
198                 }
199             }
200         }
202         .addcriterion {
203             margin-left: 5px;
204             @extend .btn;
205             padding: 0;
207             input {
208                 margin: 0;
209                 color: inherit;
210                 text-shadow: inherit;
211                 border: 0 none;
212                 line-height: inherit;
213                 background: transparent url([[pix:t/add]]) no-repeat 7px 8px;
214                 padding-left: 26px;
215             }
216             margin-bottom: 1em;
217         }
219         .options {
220             clear: both;
222             .option {
223                 label {
224                     margin: 0;
225                     padding: 0;
226                     font-size: inherit;
227                     font-weight: normal;
228                     line-height: 2em;
229                     color: inherit;
230                     text-shadow: none;
231                     background-color: transparent;
232                 }
234                 input {
235                     margin-left: 5px;
236                     margin-right: 12px;
237                 }
238             }
239         }
240     }
242 .grade-display {
243     .description {
244         font-size: 1rem;
245     }
247 .criterion {
248     .description {
249         font-size: 1rem;
250     }
252     .criterion-toggle {
253         .expanded-icon {
254             display: block;
255         }
257         .collapsed-icon {
258             display: none;
259         }
261         &.collapsed {
262             .expanded-icon {
263                 display: none;
264             }
266             .collapsed-icon {
267                 display: block;
268             }
269         }
270     }
273 // Set up grades layout.
274 .path-grade-edit-tree .setup-grades {
275     h4 {
276         margin: 0;
277     }
279     .column-rowspan {
280         padding: 0;
281         width: 24px;
282         min-width: 24px;
283         max-width: 24px;
284     }
286     .category td.column-name {
287         padding-left: 0;
288     }
290     td.column-name {
291         padding-left: 24px;
292     }
294     .category input[type="text"],
295     .category .column-range,
296     .categoryitem,
297     .courseitem {
298         font-weight: bold;
299     }
301     .emptyrow {
302         display: none;
303     }
305     .gradeitemdescription {
306         font-weight: normal;
307         padding-left: 24px;
308     }
310     .column-weight {
311         white-space: nowrap;
313         &.level3 {
314             padding-left: 37px;
315         }
317         &.level4 {
318             padding-left: 66px;
319         }
321         &.level5 {
322             padding-left: 95px;
323         }
325         &.level6 {
326             padding-left: 124px;
327         }
329         &.level7 {
330             padding-left: 153px;
331         }
333         &.level8 {
334             padding-left: 182px;
335         }
337         &.level9 {
338             padding-left: 211px;
339         }
341         &.level10 {
342             padding-left: 240px;
343         }
344     }
346     .column-range {
347         &.level2 {
348             padding-left: 37px;
349         }
351         &.level3 {
352             padding-left: 66px;
353         }
355         &.level4 {
356             padding-left: 95px;
357         }
359         &.level5 {
360             padding-left: 124px;
361         }
363         &.level6 {
364             padding-left: 153px;
365         }
367         &.level7 {
368             padding-left: 182px;
369         }
371         &.level8 {
372             padding-left: 211px;
373         }
375         &.level9 {
376             padding-left: 240px;
377         }
379         &.level10 {
380             padding-left: 269px;
381         }
382     }
384     &.generaltable {
385         .levelodd {
386             background-color: $table-bg-accent;
387         }
389         .leveleven {
390             background-color: $table-bg;
391         }
392     }
395 /**
396  * Grader report.
397  */
398 .path-grade-report-grader {
399     .gradeparent {
400         table {
401             @include border-radius($border-radius);
402         }
404         tr .cell {
405             background-color: $pagination-bg;
406         }
408         table,
409         .cell {
410             border-color: $table-border-color;
411         }
413         tr:nth-of-type(even) .cell,
414         .floater .cell,
415         .avg {
416             background-color: $gray-lightest;
417         }
419         table .clickable {
420             cursor: pointer;
421         }
422     }
425 /**
426  * User report.
427  */
428 .path-grade-report-user .user-grade {
429     border: none;
431     &.generaltable {
432         .levelodd {
433             background-color: $table-bg-accent;
434         }
436         .leveleven {
437             background-color: $table-bg;
438         }
439     }
442 /**
443  * Single view.
444  */
445 .path-grade-report-singleview input[name^="finalgrade"] {
446     width: 80px;