MDL-65031 theme_boost: gradebook notifications
[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     }
243 // Set up grades layout.
244 .path-grade-edit-tree .setup-grades {
245     h4 {
246         margin: 0;
247     }
249     .column-rowspan {
250         padding: 0;
251         width: 24px;
252         min-width: 24px;
253         max-width: 24px;
254     }
256     .category td.column-name {
257         padding-left: 0;
258     }
260     td.column-name {
261         padding-left: 24px;
262     }
264     .category input[type="text"],
265     .category .column-range,
266     .categoryitem,
267     .courseitem {
268         font-weight: bold;
269     }
271     .emptyrow {
272         display: none;
273     }
275     .gradeitemdescription {
276         font-weight: normal;
277         padding-left: 24px;
278     }
280     .column-weight {
281         white-space: nowrap;
283         &.level3 {
284             padding-left: 37px;
285         }
287         &.level4 {
288             padding-left: 66px;
289         }
291         &.level5 {
292             padding-left: 95px;
293         }
295         &.level6 {
296             padding-left: 124px;
297         }
299         &.level7 {
300             padding-left: 153px;
301         }
303         &.level8 {
304             padding-left: 182px;
305         }
307         &.level9 {
308             padding-left: 211px;
309         }
311         &.level10 {
312             padding-left: 240px;
313         }
314     }
316     .column-range {
317         &.level2 {
318             padding-left: 37px;
319         }
321         &.level3 {
322             padding-left: 66px;
323         }
325         &.level4 {
326             padding-left: 95px;
327         }
329         &.level5 {
330             padding-left: 124px;
331         }
333         &.level6 {
334             padding-left: 153px;
335         }
337         &.level7 {
338             padding-left: 182px;
339         }
341         &.level8 {
342             padding-left: 211px;
343         }
345         &.level9 {
346             padding-left: 240px;
347         }
349         &.level10 {
350             padding-left: 269px;
351         }
352     }
354     &.generaltable {
355         .levelodd {
356             background-color: $table-bg-accent;
357         }
359         .leveleven {
360             background-color: $table-bg;
361         }
362     }
365 /**
366  * Grader report.
367  */
368 .path-grade-report-grader {
369     .gradeparent {
370         table {
371             @include border-radius($border-radius);
372         }
374         tr .cell {
375             background-color: $pagination-bg;
376         }
378         table,
379         .cell {
380             border-color: $table-border-color;
381         }
383         tr:nth-of-type(even) .cell,
384         .floater .cell,
385         .avg {
386             background-color: $gray-lightest;
387         }
389         table .clickable {
390             cursor: pointer;
391         }
392     }
395 /**
396  * User report.
397  */
398 .path-grade-report-user .user-grade {
399     border: none;
401     &.generaltable {
402         .levelodd {
403             background-color: $table-bg-accent;
404         }
406         .leveleven {
407             background-color: $table-bg;
408         }
409     }
412 /**
413  * Single view.
414  */
415 .path-grade-report-singleview input[name^="finalgrade"] {
416     width: 80px;