MDL-56846 mod_survey: Fix styles in boost
[moodle.git] / theme / boost / scss / moodle / modules.scss
1 /* modules.less */
3 // The home for small tweaks to modules that don't require
4 // changes drastic enough to pull in the full module css
5 // and replace it completely
6 // Plus some misc. odds and ends
8 select {
9     width: auto;
10 }
12 // Feedback module
13 .path-mod-feedback .itemactions {
14     float: right;
15 }
16 .path-mod-feedback .itemhandle {
17     position: absolute;
18     right: 1rem;
19 }
21 // Forum module
23 .path-mod-forum .forumsearch {
24     input,
25     .helptooltip {
26         margin: 0 3px;
27     }
28 }
30 .path-mod-forum .forumheaderlist,
31 .path-mod-forum .forumheaderlist td {
32     border: none;
33 }
35 .path-mod-forum {
36     .forumheaderlist {
37         thead .header,
38         tbody .discussion td {
39             white-space: normal;
40             vertical-align: top;
41             padding-left: 0.5em;
42             padding-right: 0.5em;
43         }
45         thead .header {
46             white-space: normal;
47             vertical-align: top;
48         }
50         thead .header.replies {
51             text-align: center;
52         }
54         thead .header.lastpost {
55             text-align: right;
56         }
58         thead .header th,
59         tbody .discussion td {
60             &.discussionsubscription {
61                 width: 16px;
62                 padding-left: 0.5em;
63                 padding-right: 0.5em;
64             }
65         }
67         .discussion {
68             .author,
69             .replies,
70             .lastpost {
71                 white-space: normal;
72             }
74             .discussionsubscription,
75             .replies {
76                 text-align: center;
77             }
79             .topic,
80             .discussionsubscription,
81             .topic.starter,
82             .picture,
83             .author,
84             .replies,
85             .lastpost {
86                 vertical-align: top;
87             }
88         }
89     }
90 }
92 .forumpost {
93     @extend .card;
94     padding: 6px;
96     .header {
97         margin-bottom: 3px;
98     }
100     .picture img {
101         margin: 3px;
103         &.userpicture {
104             margin-left: 3px;
105             margin-right: 10px;
106         }
107     }
109     .content {
110         .posting.fullpost {
111             margin-top: 8px;
112         }
113     }
115     .row {
116         .topic,
117         .content-mask,
118         .options {
119             margin-left: 48px;
120         }
122         &.side {
123             clear: both;
124         }
125     }
128 .forumpost .row .left {
129     width: 48px;
132 .forumpost .options .commands {
133     margin-left: 0;
136 .forumpost .subject {
137     font-weight: bold;
140 // Override hardcoded forum modules styling
141 .forumsearch input[type=text] {
142     margin-bottom: 0;
145 #page-mod-forum-discuss .discussioncontrols {
146     width: auto;
147     margin: 0;
150 .maincalendar .calendarmonth td,
151 .maincalendar .calendarmonth th {
152     border: 1px dotted $table-border-color;
155 .path-grade-report-grader h1 {
156     text-align: inherit;
159 #page-mod-chat-gui_basic input#message {
160     max-width: 100%;
163 #page-mod-data-view #singleimage {
164     width: auto;
167 .path-mod-data form {
168     margin-top: 10px;
171 .template_heading {
172     margin-top: 10px;
175 .breadcrumb-button {
176     float: right;
177     margin-top: 4px;
180 .breadcrumb-button .singlebutton {
181     float: left;
182     margin-left: 4px;
185 .navbar-fixed-top,
186 .navbar-fixed-bottom {
187     z-index: 4030;
190 .ie .row-fluid .desktop-first-column {
191     margin-left: 0;
194 .langmenu form {
195     margin: 0;
197 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
198 canvas {
199     -ms-touch-action: auto;
202 div#dock {
203     display: none;
206 // Choice module
208 .path-mod-choice {
209     .horizontal  .choices {
210         margin: 0;
212         .option {
213             display: inline-block;
214             padding: 10px;
215         }
216     }
218     .results .data {
219         white-space: normal;
220     }
223 // Lesson module
225 /** General styles (scope: all of lesson) **/
226 .path-mod-lesson .invisiblefieldset.fieldsetfix {
227     display: block;
230 .path-mod-wiki .wiki_headingtitle,
231 .path-mod-wiki .midpad,
232 .path-mod-wiki .wiki_headingtime {
233     text-align: inherit;
236 .path-mod-wiki .wiki_contentbox {
237     width: 100%;
240 // Dropdown styling.
241 .dropdown-menu {
242     margin-top: 11px;
245 // Survey module
247 .path-mod-survey {
248     .surveytable {
249         > tbody > tr:nth-of-type(odd) {
250             background-color: $table-bg;
251         }
253         > tbody > tr:nth-of-type(even) {
254             background-color: $table-bg-accent;
255         }
257         .rblock label {
258             text-align: center;
259         }
260     }
264 .nav .caret {
265     margin-left: 4px;
268 // Dividers
269 .nav {
270     .divider {
271         overflow: hidden;
272         width: 0;
273     }
276 // Usermenu
277 .usermenu {
278     float: right;
280     .login {
281         line-height: 2.25rem;
283         a {
284             color: $link-color;
285             &:hover,
286             &:focus {
287                 color: $link-hover-color;
288                 text-decoration: underline;
289             }
290         }
291     }
294 .userloggedinas,
295 .userswitchedrole {
296     .usermenu {
297         .usertext {
298             float: left;
299             text-align: right;
300             margin-right: $spacer / 2;
301             height: 35px;
302             .meta {
303                 display: block;
304                 font-size: $font-size-sm;
305             }
306         }
307         .avatar {
308             img {
309                 margin: 0;
310             }
311         }
312     }
315 .userloggedinas .usermenu {
316     .userbutton .avatars {
317         position: relative;
318         display: inline-block;
319         .avatar {
320             &.current {
321                 display: inline-block;
322                 position: absolute;
323                 bottom: 0;
324                 right: 0;
325                 width: 20px;
326                 height: 20px;
327                 border-radius: 50%;
328                 img {
329                     vertical-align: baseline;
330                 }
331             }
332             img {
333                 width: inherit;
334                 height: inherit;
335             }
336         }
337         .realuser {
338             width: 35px;
339             height: 35px;
340             display: inline-block;
341         }
342     }
345 @include media-breakpoint-down(sm) {
346     .usertext {
347         display: none;
348     }
351 // Quiz module
353 // Question navigation block.
354 .path-mod-quiz #mod_quiz_navblock {
355     .qnbutton {
356         text-decoration: none;
357         font-size: 14px;
358         line-height: 20px;
359         font-weight: normal;
360         background-color: $body-color;
361         background-image: none;
362         height: 40px;
363         width: 30px;
364         border-radius: 3px;
365         border: 0;
366         overflow: visible;
367         margin: 0 6px 6px 0;
368     }
370     span.qnbutton {
371         cursor: default;
372         background-color: $input-bg-disabled;
373         color: $gray;
374     }
376     a.qnbutton:hover,
377     a.qnbutton:active,
378     a.qnbutton:focus {
379         text-decoration: underline;
380     }
382     .qnbutton .thispageholder {
383         border: 1px solid;
384         border-radius: 3px;
385         z-index: 1;
386     }
388     .qnbutton.thispage .thispageholder {
389         border-width: 3px;
390     }
392     .allquestionsononepage .qnbutton.thispage .thispageholder {
393         border-width: 1px;
394     }
396     .qnbutton.flagged .thispageholder {
397         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
398     }
400     .qnbutton .trafficlight {
401         border: 0;
402         background: $body-color none center / 10px no-repeat scroll;
403         height: 20px;
404         margin-top: 20px;
405         border-radius: 0 0 3px 3px;
406     }
408     .qnbutton.notyetanswered .trafficlight,
409     .qnbutton.invalidanswer .trafficlight {
410         background-color: $body-color;
411     }
413     .qnbutton.invalidanswer .trafficlight {
414         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
415     }
417     .qnbutton.correct .trafficlight {
418         background-image: url([[pix:theme|mod/quiz/checkmark]]);
419         background-color: $state-success-text;
420     }
422     .qnbutton.blocked .trafficlight {
423         background-image: url([[pix:core|t/locked]]);
424         background-color: $input-bg-disabled;
425     }
427     .qnbutton.notanswered .trafficlight,
428     .qnbutton.incorrect .trafficlight {
429         background-color: $state-danger-text;
430     }
432     .qnbutton.partiallycorrect .trafficlight {
433         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
434         background-color: $state-warning-text;
435     }
437     .qnbutton.complete .trafficlight,
438     .qnbutton.answersaved .trafficlight,
439     .qnbutton.requiresgrading .trafficlight {
440         background-color: $gray-light;
441     }
444 /**
445  * Assign.
446  */
447 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
448     top: auto;
450 .path-mod-assign .no-overflow {
451     overflow: initial;
454 .path-mod-assign [data-region="grade-panel"] .has-popout {
455     background-color: $card-bg;
457     @include border-radius($card-border-radius);
458     border: $card-border-width solid $card-border-color;
461 .path-mod-assign [data-region="grade-panel"] .popout {
462     background-color: $modal-content-bg;
465 .path-mod-assign [data-region="grade-panel"] .col-md-3 {
466     width: 100%;
469 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
470     @extend .modal-header;
471     font-size: 1.5rem;
474 .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
475     margin-top: 0.5rem;
478 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
479     margin-top: 0;
482 .path-mod-assign [data-region="grade-panel"] h3 {
483     margin: 10px 0;
484     line-height: 40px;
487 .path-mod-assign [data-region="assignment-info"] {
488     overflow-y: hidden;
491 .path-mod-assign [data-region="grading-navigation"] {
492     padding: 6px;
493     overflow-y: hidden;
496 .path-mod-assign [data-region="grade-actions"] {
497     padding: 10px;
500 .path-mod-assign [data-region="user-info"] .img-rounded {
501     margin-top: 0;
504 .path-mod-assign [data-region="grading-navigation-panel"] {
505     height: 85px;
508 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
509     width: auto;
510     display: inline-block;
513 /**
514  * Assign feedback.
515  */
516 .assignfeedback_editpdf_widget * {
517     box-sizing: content-box;
520 .assignfeedback_editpdf_widget button {
521     box-sizing: border-box;
524 .assignfeedback_editpdf_widget .commentcolourbutton img {
525     border-width: 0;
528 .assignfeedback_editpdf_widget .label {
529     @extend .tag;
530     @extend .tag-info;
533 .assignfeedback_editpdf_menu {
534     padding: 0;