MDL-55802 output: Hide site name and user name on xs screens
[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 .container-fluid {
178     max-width: 1680px;
179     margin: 0 auto;
181 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
182 canvas {
183     -ms-touch-action: auto;
186 div#dock {
187     display: none;
190 // Choice module
192 .path-mod-choice {
193     .horizontal  .choices {
194         margin: 0;
195         .option {
196             display: inline-block;
197             padding: 10px;
198         }
199     }
200     .results .data {
201         white-space: normal;
202     }
205 // Lesson module
207 .path-mod-lesson .firstpageoptions {
208     margin: auto;
209     min-width: 280px;
210     width: 60%;
213 .path-mod-lesson .centerpadded {
214     padding: 5px;
215     text-align: center;
218 .path-mod-wiki .wiki_headingtitle,
219 .path-mod-wiki .midpad,
220 .path-mod-wiki .wiki_headingtime {
221     text-align: inherit;
224 .path-mod-wiki .wiki_contentbox {
225     width: 100%;
228 // Dropdown styling.
229 .dropdown-menu {
230     > li > a {
231         padding: 3px 20px 3px 8px;
232     }
235 // Survey module
237 .path-mod-survey {
238     .surveytable {
239       > tbody > tr:nth-of-type(odd) {background-color: $table-bg;}
240       > tbody > tr:nth-of-type(even) {background-color: $table-bg-accent;}
241         .rblock label {text-align: center;}
242     }
243     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
244         text-align:center;
245     }
248 .nav .caret {
249     margin-left: 4px;
252 // Dividers
253 .nav {
254     .divider {
255         overflow: hidden;
256         width: 0;
257   //      height: $navbarHeight;
258   //      border-left: 1px solid $navbarBackground;
259    //     border-right: 1px solid $navbarBackgroundHighlight;
260     }
262 //.navbar-inverse {
263 //    .nav {
264    //     .divider {
265        //     border-left-color: $navbarInverseBackground;
266        //     border-right-color: lighten($navbarInverseBackground, 25%);
267       //  }
268  //   }
269 //}
270 .dropdown-menu {
271     .divider {
272         width: auto;
273         height: 1px;
274         border-left: 0 none;
275         border-right: 0 none;
276     }
279 // Usermenu
280 .usermenu {
281     .login {
282         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     }
292     .moodle-actionmenu {
294         .toggle-display {
295             display: block;
296             opacity: 1;
297             color: $dropdown-link-color;
298             line-height: 40px;
299             height: 40px;
300             &:hover {
301                 color: $dropdown-link-hover-color;
302             }
304             .userbutton {
305                 height: 40px;
306                 line-height: 40px;
307                 .avatars{
308                     display: inline-block;
309                     height: 36px;
310                     width: 36px;
311                     vertical-align: middle;
312                     margin-right: 6px;
313                     margin-left: 6px;
315                     .avatar,
316                     img {
317                         display: block;
318                     }
319                 }
320                 .usertext {
321                     display: inline-block;
322                     vertical-align: middle;
323                     line-height: 1em;
324                     color: inherit;
325                     .meta,
326                     .role {
327                         display: block;
328                         font-size: 12px;
329                         .value {
330                             font-weight: bold;
331                         }
332                     }
333                     .role {
334                         font-weight: bold;
335                     }
337                 }
339             }
341             // Hide caret when JS is disabled.
342             .caret {
343                 display: none;
344             }
345         }
348     }
350 @include media-breakpoint-down(sm) {
351     .usertext {
352         display: none;
353     }
355 .jsenabled {
356     .usermenu {
357         .moodle-actionmenu {
358             .toggle-display {
359                 display: block;
361                 &.textmenu {
362                     padding-left: 8px;
363                     padding-right: 8px;
364                 }
366                 // Show caret when JS is enabled.
367                 .caret {
368                     display: inline-block;
369                     position: relative;
370                     top: 9px;
371                 }
372             }
374             > .menubar {
375                 display: block;
376                 margin: 0px;
377             }
378             > .menu {
379                 min-width: 160px;
380                 .filler {
381                     display: block;
382                     @include nav-divider();
383                 }
384             }
386             &.show {
387                 background-color: $dropdown-link-active-bg;
388                 .menu {
389                     padding: 5px 0;
390                     margin: 2px 0 0;
391                     background-clip: padding-box;
392                     &:before {
393                         content: '';
394                         display: inline-block;
395                         border-left:   7px solid transparent;
396                         border-right:  7px solid transparent;
397                         border-bottom: 7px solid #ccc;
398                         border-bottom-color: $dropdown-border-color;
399                         position: absolute;
400                         top: -7px;
401                     }
402                     &:after {
403                         content: '';
404                         display: inline-block;
405                         border-left:   6px solid transparent;
406                         border-right:  6px solid transparent;
407                         border-bottom: 6px solid $dropdown-bg;
408                         position: absolute;
409                         top: -6px;
410                     }
412                     a {
413                         border-radius: 0;
415                         &:focus {
416                             text-decoration: none;
417                         }
418                         &:hover {
419                             text-decoration: none;
420                             @include gradient-y($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
421                         }
422                     }
423                     &.align-tr-br {
424                         margin-top: 2px;
425                     }
426                     @include box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
427                 }
428                 &:hover .toggle-display {}
429             }
430         }
431     }
434 .usermenu {
435     float: right;
436     > .moodle-actionmenu {
437         > .menu {
438             &:before {
439                 right: 9px;
440             }
441             &:after {
442                 right: 10px;
443             }
444         }
445         > .menubar li a {
446             text-align: right;
447         }
448     }
450 &.userloggedinas .usermenu .userbutton .avatars {
451     .avatar {
452         &.current {
453             left: 16px;
454         }
455     }
459 .userloggedinas .usermenu .userbutton .avatars {
460     .avatar {
461         &.current {
462             position: relative;
463             top: 4px;
464             left: 4px;
465             width: 20px;
466             height: 20px;
467             margin-top: 11px;
468             margin-bottom: -34px;
469             border: 1px solid #fff;
470             border-radius: 50%;
471             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
472         }
473         img {
474             width: inherit;
475             height: inherit;
476         }
477         overflow: hidden;
478     }
481 // Quiz module
483 // Question navigation block.
484 .path-mod-quiz #mod_quiz_navblock {
485     .qnbutton {
486         text-decoration: none;
487         font-size: 14px;
488         line-height: 20px;
489         font-weight: normal;
490         background-color: $body-color;
491         background-image: none;
492         height: 40px;
493         width: 30px;
494         border-radius: 3px;
495         border: 0;
496         overflow: visible;
497         margin: 0 6px 6px 0;
498     }
499     span.qnbutton {
500         cursor: default;
501         background-color: $input-bg-disabled;
502         color: $gray;
503     }
504     a.qnbutton:hover,
505     a.qnbutton:active,
506     a.qnbutton:focus {
507         text-decoration: underline;
508     }
510     .qnbutton .thispageholder {
511         border: 1px solid;
512         border-radius: 3px;
513         z-index: 1;
514     }
515     .qnbutton.thispage .thispageholder {
516         border-width: 3px;
517     }
518     .allquestionsononepage .qnbutton.thispage .thispageholder {
519         border-width: 1px;
520     }
522     .qnbutton.flagged .thispageholder {
523         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
524     }
526     .qnbutton .trafficlight {
527         border: 0;
528         background: $body-color none center/10px no-repeat scroll;
529         height: 20px;
530         margin-top: 20px;
531         border-radius: 0 0 3px 3px;
532     }
534     .qnbutton.notyetanswered .trafficlight,
535     .qnbutton.invalidanswer .trafficlight {
536         background-color: $body-color;
537     }
538     .qnbutton.invalidanswer .trafficlight {
539         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
540     }
541     .qnbutton.correct .trafficlight {
542         background-image: url([[pix:theme|mod/quiz/checkmark]]);
543         background-color: $state-success-text;
544     }
545     .qnbutton.blocked .trafficlight {
546         background-image: url([[pix:core|t/locked]]);
547         background-color: $input-bg-disabled;
548     }
549     .qnbutton.notanswered .trafficlight,
550     .qnbutton.incorrect .trafficlight {
551         background-color: $state-danger-text;
552     }
553     .qnbutton.partiallycorrect .trafficlight {
554         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
555         background-color: $state-warning-text;
556     }
557     .qnbutton.complete .trafficlight,
558     .qnbutton.answersaved .trafficlight,
559     .qnbutton.requiresgrading .trafficlight {
560         background-color: $gray-light;
561     }
564 /**
565  * Assign.
566  */
567 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
568     top: auto;
570 .path-mod-assign [data-region="grade-panel"] h3 {
571     margin: 10px 0;
572     line-height: 40px;
574 .path-mod-assign [data-region="grading-navigation"] {
575     padding: 6px;
577 .path-mod-assign [data-region="grade-actions"] {
578     padding: 10px;
580 .path-mod-assign [data-region="user-info"] .img-rounded {
581     margin-top: 0;
583 .path-mod-assign [data-region="grading-navigation-panel"] {
584     height: 85px;
586 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
587     width: auto;
588     display: inline-block;
591 /**
592  * Assign feedback.
593  */
594 .assignfeedback_editpdf_widget * {
595     box-sizing: content-box;
597 .assignfeedback_editpdf_widget button {
598     box-sizing: border-box;
600 .assignfeedback_editpdf_widget .commentcolourbutton img {
601     border-width: 0;
603 .assignfeedback_editpdf_widget .label {
604     @extend .tag;
605     @extend .tag-info;
608 .assignfeedback_editpdf_menu {
609     padding: 0;