MDL-55793 theme_noname: Use fixed width container
[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     border-top: 2px solid $table-border-color;
132 .maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
133     border: 1px dotted $table-border-color;
136 .path-grade-report-grader h1 {
137     text-align: inherit;
140 #page-mod-chat-gui_basic input#message {
141     max-width: 100%;
144 #page-mod-data-view #singleimage {
145     width: auto;
148 .path-mod-data form {
149     margin-top: 10px;
152 .template_heading {
153     margin-top: 10px;
156 .breadcrumb-button {
157     float: right;
158     margin-top: 4px;
161 .breadcrumb-button .singlebutton {
162     float: left;
163     margin-left: 4px;
166 .navbar-fixed-top,
167 .navbar-fixed-bottom {
168     z-index: 4030;
171 .ie .row-fluid .desktop-first-column {
172     margin-left: 0;
174 .langmenu form {
175     margin: 0;
177 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
178 canvas {
179     -ms-touch-action: auto;
182 div#dock {
183     display: none;
186 // Choice module
188 .path-mod-choice {
189     .horizontal  .choices {
190         margin: 0;
191         .option {
192             display: inline-block;
193             padding: 10px;
194         }
195     }
196     .results .data {
197         white-space: normal;
198     }
201 // Lesson module
203 .path-mod-lesson .firstpageoptions {
204     margin: auto;
205     min-width: 280px;
206     width: 60%;
209 .path-mod-lesson .centerpadded {
210     padding: 5px;
211     text-align: center;
214 .path-mod-wiki .wiki_headingtitle,
215 .path-mod-wiki .midpad,
216 .path-mod-wiki .wiki_headingtime {
217     text-align: inherit;
220 .path-mod-wiki .wiki_contentbox {
221     width: 100%;
224 // Survey module
226 .path-mod-survey {
227     .surveytable {
228       > tbody > tr:nth-of-type(odd) {background-color: $table-bg;}
229       > tbody > tr:nth-of-type(even) {background-color: $table-bg-accent;}
230         .rblock label {text-align: center;}
231     }
232     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
233         text-align:center;
234     }
237 .nav .caret {
238     margin-left: 4px;
241 // Dividers
242 .nav {
243     .divider {
244         overflow: hidden;
245         width: 0;
246   //      height: $navbarHeight;
247   //      border-left: 1px solid $navbarBackground;
248    //     border-right: 1px solid $navbarBackgroundHighlight;
249     }
251 //.navbar-inverse {
252 //    .nav {
253    //     .divider {
254        //     border-left-color: $navbarInverseBackground;
255        //     border-right-color: lighten($navbarInverseBackground, 25%);
256       //  }
257  //   }
258 //}
260 // Usermenu
261 .usermenu {
262     .login {
263         line-height: 2.25rem;
264         a {
265             color: $link-color;
266             &:hover,
267             &:focus {
268                 color: $link-hover-color;
269                 text-decoration: underline;
270             }
271         }
272     }
273     .moodle-actionmenu {
275         .toggle-display {
276             display: block;
277             opacity: 1;
278             color: $dropdown-link-color;
279             line-height: 40px;
280             height: 40px;
281             &:hover {
282                 color: $dropdown-link-hover-color;
283             }
285             .userbutton {
286                 height: 40px;
287                 line-height: 40px;
288                 .avatars{
289                     display: inline-block;
290                     height: 36px;
291                     width: 36px;
292                     vertical-align: middle;
293                     margin-right: 6px;
294                     margin-left: 6px;
296                     .avatar,
297                     img {
298                         display: block;
299                     }
300                 }
301                 .usertext {
302                     display: inline-block;
303                     vertical-align: middle;
304                     line-height: 1em;
305                     color: inherit;
306                     .meta,
307                     .role {
308                         display: block;
309                         font-size: 12px;
310                         .value {
311                             font-weight: bold;
312                         }
313                     }
314                     .role {
315                         font-weight: bold;
316                     }
318                 }
320             }
322             // Hide caret when JS is disabled.
323             .caret {
324                 display: none;
325             }
326         }
329     }
331 @include media-breakpoint-down(sm) {
332     .usertext {
333         display: none;
334     }
336 .jsenabled {
337     .usermenu {
338         .moodle-actionmenu {
339             .toggle-display {
340                 display: block;
342                 &.textmenu {
343                     padding-left: 8px;
344                     padding-right: 8px;
345                 }
347                 // Show caret when JS is enabled.
348                 .caret {
349                     display: inline-block;
350                     position: relative;
351                     top: 9px;
352                 }
353             }
355             > .menubar {
356                 display: block;
357                 margin: 0px;
358             }
359             > .menu {
360                 min-width: 160px;
361                 .filler {
362                     display: block;
363                     @include nav-divider();
364                 }
365             }
367             &.show {
368                 background-color: $dropdown-link-active-bg;
369                 .menu {
370                     padding: 5px 0;
371                     margin: 2px 0 0;
372                     background-clip: padding-box;
373                     &:before {
374                         content: '';
375                         display: inline-block;
376                         border-left:   7px solid transparent;
377                         border-right:  7px solid transparent;
378                         border-bottom: 7px solid #ccc;
379                         border-bottom-color: $dropdown-border-color;
380                         position: absolute;
381                         top: -7px;
382                     }
383                     &:after {
384                         content: '';
385                         display: inline-block;
386                         border-left:   6px solid transparent;
387                         border-right:  6px solid transparent;
388                         border-bottom: 6px solid $dropdown-bg;
389                         position: absolute;
390                         top: -6px;
391                     }
393                     a {
394                         border-radius: 0;
396                         &:focus {
397                             text-decoration: none;
398                         }
399                         &:hover {
400                             text-decoration: none;
401                             @include gradient-y($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
402                         }
403                     }
404                     &.align-tr-br {
405                         margin-top: 2px;
406                     }
407                     @include box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
408                 }
409                 &:hover .toggle-display {}
410             }
411         }
412     }
415 .usermenu {
416     float: right;
417     > .moodle-actionmenu {
418         > .menu {
419             &:before {
420                 right: 9px;
421             }
422             &:after {
423                 right: 10px;
424             }
425         }
426         > .menubar li a {
427             text-align: right;
428         }
429     }
431 &.userloggedinas .usermenu .userbutton .avatars {
432     .avatar {
433         &.current {
434             left: 16px;
435         }
436     }
440 .userloggedinas .usermenu .userbutton .avatars {
441     .avatar {
442         &.current {
443             position: relative;
444             top: 4px;
445             left: 4px;
446             width: 20px;
447             height: 20px;
448             margin-top: 11px;
449             margin-bottom: -34px;
450             border: 1px solid #fff;
451             border-radius: 50%;
452             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
453         }
454         img {
455             width: inherit;
456             height: inherit;
457         }
458         overflow: hidden;
459     }
462 // Quiz module
464 // Question navigation block.
465 .path-mod-quiz #mod_quiz_navblock {
466     .qnbutton {
467         text-decoration: none;
468         font-size: 14px;
469         line-height: 20px;
470         font-weight: normal;
471         background-color: $body-color;
472         background-image: none;
473         height: 40px;
474         width: 30px;
475         border-radius: 3px;
476         border: 0;
477         overflow: visible;
478         margin: 0 6px 6px 0;
479     }
480     span.qnbutton {
481         cursor: default;
482         background-color: $input-bg-disabled;
483         color: $gray;
484     }
485     a.qnbutton:hover,
486     a.qnbutton:active,
487     a.qnbutton:focus {
488         text-decoration: underline;
489     }
491     .qnbutton .thispageholder {
492         border: 1px solid;
493         border-radius: 3px;
494         z-index: 1;
495     }
496     .qnbutton.thispage .thispageholder {
497         border-width: 3px;
498     }
499     .allquestionsononepage .qnbutton.thispage .thispageholder {
500         border-width: 1px;
501     }
503     .qnbutton.flagged .thispageholder {
504         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
505     }
507     .qnbutton .trafficlight {
508         border: 0;
509         background: $body-color none center/10px no-repeat scroll;
510         height: 20px;
511         margin-top: 20px;
512         border-radius: 0 0 3px 3px;
513     }
515     .qnbutton.notyetanswered .trafficlight,
516     .qnbutton.invalidanswer .trafficlight {
517         background-color: $body-color;
518     }
519     .qnbutton.invalidanswer .trafficlight {
520         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
521     }
522     .qnbutton.correct .trafficlight {
523         background-image: url([[pix:theme|mod/quiz/checkmark]]);
524         background-color: $state-success-text;
525     }
526     .qnbutton.blocked .trafficlight {
527         background-image: url([[pix:core|t/locked]]);
528         background-color: $input-bg-disabled;
529     }
530     .qnbutton.notanswered .trafficlight,
531     .qnbutton.incorrect .trafficlight {
532         background-color: $state-danger-text;
533     }
534     .qnbutton.partiallycorrect .trafficlight {
535         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
536         background-color: $state-warning-text;
537     }
538     .qnbutton.complete .trafficlight,
539     .qnbutton.answersaved .trafficlight,
540     .qnbutton.requiresgrading .trafficlight {
541         background-color: $gray-light;
542     }
545 /**
546  * Assign.
547  */
548 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
549     top: auto;
551 .path-mod-assign [data-region="grade-panel"] h3 {
552     margin: 10px 0;
553     line-height: 40px;
555 .path-mod-assign [data-region="grading-navigation"] {
556     padding: 6px;
558 .path-mod-assign [data-region="grade-actions"] {
559     padding: 10px;
561 .path-mod-assign [data-region="user-info"] .img-rounded {
562     margin-top: 0;
564 .path-mod-assign [data-region="grading-navigation-panel"] {
565     height: 85px;
567 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
568     width: auto;
569     display: inline-block;
572 /**
573  * Assign feedback.
574  */
575 .assignfeedback_editpdf_widget * {
576     box-sizing: content-box;
578 .assignfeedback_editpdf_widget button {
579     box-sizing: border-box;
581 .assignfeedback_editpdf_widget .commentcolourbutton img {
582     border-width: 0;
584 .assignfeedback_editpdf_widget .label {
585     @extend .tag;
586     @extend .tag-info;
589 .assignfeedback_editpdf_menu {
590     padding: 0;