3487e6a312a04aee95d98eb1dd1b5f7f4f7d0db3
[moodle.git] / theme / noname / 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 // Forum module
14 .path-mod-forum .forumsearch {
15     input,
16     .helptooltip {
17         margin: 0 3px;
18     }
19 }
21 .path-mod-forum .forumheaderlist,
22 .path-mod-forum .forumheaderlist td {
23     border: none;
24 }
26 .path-mod-forum {
27     .forumheaderlist {
28         thead .header,
29         tbody .discussion td {
30             white-space: normal;
31             vertical-align: top;
32             padding-left: 0.5em;
33             padding-right: 0.5em;
34         }
36         thead .header {
37             white-space: normal;
38             vertical-align: top;
39         }
41         thead .header.replies {
42             text-align: center;
43         }
44         thead .header.lastpost {
45             text-align: right;
46         }
47         thead .header th,
48         tbody .discussion td{
49             &.discussionsubscription {
50                 width: 16px;
51                 padding-left: 0.5em;
52                 padding-right: 0.5em;
53             }
54         }
55         .discussion {
56             .author, .replies, .lastpost {
57                 white-space: normal;
58             }
59             .discussionsubscription,
60             .replies {
61                 text-align: center;
62             }
63             .topic,
64             .discussionsubscription,
65             .topic.starter,
66             .picture,
67             .author,
68             .replies,
69             .lastpost {
70                 vertical-align: top;
71             }
72         }
73     }
74 }
76 .forumpost {
77     @extend .card;
78     padding: 6px;
79     .header {
80         margin-bottom: 3px;
81     }
82     .picture img {
83         margin: 3px;
84         &.userpicture {
85             margin-left: 3px;
86             margin-right: 10px;
87         }
88     }
89     .content {
90         .posting.fullpost {
91             margin-top: 8px;
92         }
93     }
94     .row {
95         .topic,
96         .content-mask,
97         .options {
98             margin-left: 48px;
99         }
100         &.side {
101             clear: both;
102         }
103     }
106 .forumpost .row .left {
107     width: 48px;
110 .forumpost .options .commands {
111     margin-left: 0;
114 .forumpost .subject {
115     font-weight: bold;
118 // Override hardcoded forum modules styling
119 .forumsearch input[type=text] {
120      margin-bottom: 0 !important;
123 #page-mod-forum-discuss .discussioncontrols {
124     width: auto;
125     margin: 0;
128 #page-footer {
129     margin-top: 1em;
130     padding: 1em 0;
131     border-top: 2px solid $table-border-color;
134 .maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
135     border: 1px dotted $table-border-color;
138 .path-grade-report-grader h1 {
139     text-align: inherit;
142 #page-mod-chat-gui_basic input#message {
143     max-width: 100%;
146 #page-mod-data-view #singleimage {
147     width: auto;
150 .path-mod-data form {
151     margin-top: 10px;
154 .template_heading {
155     margin-top: 10px;
158 .breadcrumb-button {
159     float: right;
160     margin-top: 4px;
163 .breadcrumb-button .singlebutton {
164     float: left;
165     margin-left: 4px;
168 .navbar-fixed-top,
169 .navbar-fixed-bottom {
170     z-index: 4030;
173 .ie .row-fluid .desktop-first-column {
174     margin-left: 0;
176 .langmenu form {
177     margin: 0;
179 .container-fluid {
180     max-width: 1680px;
181     margin: 0 auto;
183 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
184 canvas {
185     -ms-touch-action: auto;
188 div#dock {
189     display: none;
192 // Choice module
194 .path-mod-choice {
195     .horizontal  .choices {
196         margin: 0;
197         .option {
198             display: inline-block;
199             padding: 10px;
200         }
201     }
202     .results .data {
203         white-space: normal;
204     }
207 // Lesson module
209 .path-mod-lesson .firstpageoptions {
210     margin: auto;
211     min-width: 280px;
212     width: 60%;
215 .path-mod-lesson .centerpadded {
216     padding: 5px;
217     text-align: center;
220 .path-mod-wiki .wiki_headingtitle,
221 .path-mod-wiki .midpad,
222 .path-mod-wiki .wiki_headingtime {
223     text-align: inherit;
226 .path-mod-wiki .wiki_contentbox {
227     width: 100%;
230 // Dropdown styling.
231 .dropdown-menu {
232     > li > a {
233         padding: 3px 20px 3px 8px;
234     }
237 // Survey module
239 .path-mod-survey {
240     .surveytable {
241       > tbody > tr:nth-of-type(odd) {background-color: $table-bg;}
242       > tbody > tr:nth-of-type(even) {background-color: $table-bg-accent;}
243         .rblock label {text-align: center;}
244     }
245     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
246         text-align:center;
247     }
250 .nav .caret {
251     margin-left: 4px;
254 // Dividers
255 .nav {
256     .divider {
257         overflow: hidden;
258         width: 0;
259   //      height: $navbarHeight;
260   //      border-left: 1px solid $navbarBackground;
261    //     border-right: 1px solid $navbarBackgroundHighlight;
262     }
264 //.navbar-inverse {
265 //    .nav {
266    //     .divider {
267        //     border-left-color: $navbarInverseBackground;
268        //     border-right-color: lighten($navbarInverseBackground, 25%);
269       //  }
270  //   }
271 //}
272 .dropdown-menu {
273     .divider {
274         width: auto;
275         height: 1px;
276         border-left: 0 none;
277         border-right: 0 none;
278     }
281 // Usermenu
282 .usermenu {
283     .login {
284       //  color: $navbarText;
285         line-height: 40px;
286         a {
287             color: $dropdown-link-color;
288             &:hover,
289             &:focus {
290                 color: $dropdown-link-hover-color;
291                 text-decoration: underline;
292             }
293         }
294     }
295     .moodle-actionmenu {
297         .toggle-display {
298             display: block;
299             opacity: 1;
300             color: $dropdown-link-color;
301             line-height: 40px;
302             height: 40px;
303             &:hover {
304                 color: $dropdown-link-hover-color;
305             }
307             .userbutton {
308                 height: 40px;
309                 line-height: 40px;
310                 .avatars{
311                     display: inline-block;
312                     height: 36px;
313                     width: 36px;
314                     vertical-align: middle;
315                     margin-right: 6px;
316                     margin-left: 6px;
318                     .avatar,
319                     img {
320                         display: block;
321                     }
322                 }
323                 .usertext {
324                     display: inline-block;
325                     vertical-align: middle;
326                     line-height: 1em;
327                     color: inherit;
328                     .meta,
329                     .role {
330                         display: block;
331                         font-size: 12px;
332                         .value {
333                             font-weight: bold;
334                         }
335                     }
336                     .role {
337                         font-weight: bold;
338                     }
339                 }
340             }
342             // Hide caret when JS is disabled.
343             .caret {
344                 display: none;
345             }
346         }
349     }
351 .jsenabled {
352     .usermenu {
353         .moodle-actionmenu {
354             .toggle-display {
355                 display: block;
357                 &.textmenu {
358                     padding-left: 8px;
359                     padding-right: 8px;
360                 }
362                 // Show caret when JS is enabled.
363                 .caret {
364                     display: inline-block;
365                     position: relative;
366                     top: 9px;
367                 }
368             }
370             > .menubar {
371                 display: block;
372                 margin: 0px;
373             }
374             > .menu {
375                 min-width: 160px;
376                 .filler {
377                     display: block;
378                     @include nav-divider();
379                 }
380             }
382             &.show {
383                 background-color: $dropdown-link-active-bg;
384                 .menu {
385                     padding: 5px 0;
386                     margin: 2px 0 0;
387                     background-clip: padding-box;
388                     &:before {
389                         content: '';
390                         display: inline-block;
391                         border-left:   7px solid transparent;
392                         border-right:  7px solid transparent;
393                         border-bottom: 7px solid #ccc;
394                         border-bottom-color: $dropdown-border-color;
395                         position: absolute;
396                         top: -7px;
397                     }
398                     &:after {
399                         content: '';
400                         display: inline-block;
401                         border-left:   6px solid transparent;
402                         border-right:  6px solid transparent;
403                         border-bottom: 6px solid $dropdown-bg;
404                         position: absolute;
405                         top: -6px;
406                     }
408                     a {
409                         border-radius: 0;
411                         &:focus {
412                             text-decoration: none;
413                         }
414                         &:hover {
415                             text-decoration: none;
416                             @include gradient-y($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
417                         }
418                     }
419                     &.align-tr-br {
420                         margin-top: 2px;
421                     }
422                     @include box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
423                 }
424                 &:hover .toggle-display {}
425             }
426         }
427     }
430 .usermenu {
431     float: right;
432     > .moodle-actionmenu {
433         > .menu {
434             &:before {
435                 right: 9px;
436             }
437             &:after {
438                 right: 10px;
439             }
440         }
441         > .menubar li a {
442             text-align: right;
443         }
444     }
446 &.userloggedinas .usermenu .userbutton .avatars {
447     .avatar {
448         &.current {
449             left: 16px;
450         }
451     }
455 .userloggedinas .usermenu .userbutton .avatars {
456     .avatar {
457         &.current {
458             position: relative;
459             top: 4px;
460             left: 4px;
461             width: 20px;
462             height: 20px;
463             margin-top: 11px;
464             margin-bottom: -34px;
465             border: 1px solid #fff;
466             border-radius: 50%;
467             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
468         }
469         img {
470             width: inherit;
471             height: inherit;
472         }
473         overflow: hidden;
474     }
477 // Quiz module
479 // Question navigation block.
480 .path-mod-quiz #mod_quiz_navblock {
481     .qnbutton {
482         text-decoration: none;
483         font-size: 14px;
484         line-height: 20px;
485         font-weight: normal;
486         background-color: $body-color;
487         background-image: none;
488         height: 40px;
489         width: 30px;
490         border-radius: 3px;
491         border: 0;
492         overflow: visible;
493         margin: 0 6px 6px 0;
494     }
495     span.qnbutton {
496         cursor: default;
497         background-color: $input-bg-disabled;
498         color: $gray;
499     }
500     a.qnbutton:hover,
501     a.qnbutton:active,
502     a.qnbutton:focus {
503         text-decoration: underline;
504     }
506     .qnbutton .thispageholder {
507         border: 1px solid;
508         border-radius: 3px;
509         z-index: 1;
510     }
511     .qnbutton.thispage .thispageholder {
512         border-width: 3px;
513     }
514     .allquestionsononepage .qnbutton.thispage .thispageholder {
515         border-width: 1px;
516     }
518     .qnbutton.flagged .thispageholder {
519         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
520     }
522     .qnbutton .trafficlight {
523         border: 0;
524         background: $body-color none center/10px no-repeat scroll;
525         height: 20px;
526         margin-top: 20px;
527         border-radius: 0 0 3px 3px;
528     }
530     .qnbutton.notyetanswered .trafficlight,
531     .qnbutton.invalidanswer .trafficlight {
532         background-color: $body-color;
533     }
534     .qnbutton.invalidanswer .trafficlight {
535         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
536     }
537     .qnbutton.correct .trafficlight {
538         background-image: url([[pix:theme|mod/quiz/checkmark]]);
539         background-color: $state-success-text;
540     }
541     .qnbutton.blocked .trafficlight {
542         background-image: url([[pix:core|t/locked]]);
543         background-color: $input-bg-disabled;
544     }
545     .qnbutton.notanswered .trafficlight,
546     .qnbutton.incorrect .trafficlight {
547         background-color: $state-danger-text;
548     }
549     .qnbutton.partiallycorrect .trafficlight {
550         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
551         background-color: $state-warning-text;
552     }
553     .qnbutton.complete .trafficlight,
554     .qnbutton.answersaved .trafficlight,
555     .qnbutton.requiresgrading .trafficlight {
556         background-color: $gray-light;
557     }
560 /**
561  * Assign.
562  */
563 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
564     top: auto;
566 .path-mod-assign [data-region="grade-panel"] h3 {
567     margin: 10px 0;
568     line-height: 40px;
570 .path-mod-assign [data-region="grading-navigation"] {
571     padding: 6px;
573 .path-mod-assign [data-region="grade-actions"] {
574     padding: 10px;
576 .path-mod-assign [data-region="user-info"] .img-rounded {
577     margin-top: 0;
579 .path-mod-assign [data-region="grading-navigation-panel"] {
580     height: 85px;
582 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
583     width: auto;
584     display: inline-block;
587 /**
588  * Assign feedback.
589  */
590 .assignfeedback_editpdf_widget * {
591     box-sizing: content-box;
593 .assignfeedback_editpdf_widget button {
594     box-sizing: border-box;
596 .assignfeedback_editpdf_widget .commentcolourbutton img {
597     border-width: 0;
599 .assignfeedback_editpdf_widget .label {
600     @extend .tag;
601     @extend .tag-info;
604 .assignfeedback_editpdf_menu {
605     padding: 0;