MDL-52095 themes: Padding to the left on RTL langs
[moodle.git] / theme / bootstrapbase / less / moodle / modules.less
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
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 .path-mod-feedback .feedback_bar_image {
77     height: 5px; // we should remove the bar height specification in core
78 }
80 .forumpost {
81     .well;
82     padding: 6px;
83     .header {
84         margin-bottom: 3px;
85     }
86     .picture img {
87         margin: 3px;
88         &.userpicture {
89             margin-left: 3px;
90             margin-right: 10px;
91         }
92     }
93     .content {
94         .posting.fullpost {
95             margin-top: 8px;
96         }
97     }
98     .row {
99         .topic,
100         .content-mask,
101         .options {
102             margin-left: 48px;
103         }
104         &.side {
105             clear: both;
106         }
107     }
110 .dir-rtl .forumpost {
111     .picture img {
112         &.userpicture {
113             margin-left: 10px;
114             margin-right: 3px;
115         }
116     }
117     .row {
118         .topic,
119         .content-mask,
120         .options {
121             margin-left: 0;
122             margin-right: 48px;
123         }
124     }
127 .forumpost .row .left {
128     width: 48px;
131 .forumpost .options .commands {
132     margin-left: 0;
135 .forumpost .subject {
136     font-weight: bold;
139 // Override hardcoded forum modules styling
140 .forumsearch input[type=text] {
141      margin-bottom: 0 !important;
144 #page-mod-forum-discuss .discussioncontrols {
145     width: auto;
146     margin: 0;
149 #page-footer {
150     margin-top: 1em;
151     padding: 1em 0;
152     border-top: 2px solid @tableBorder;
155 .maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
156     border: 1px dotted @tableBorder;
159 .path-grade-report-grader h1 {
160     text-align: inherit;
163 #page-mod-chat-gui_basic input#message {
164     max-width: 100%;
167 #page-mod-data-view #singleimage {
168     width: auto;
171 .path-mod-data form {
172     margin-top: 10px;
175 .template_heading {
176     margin-top: 10px;
179 .breadcrumb-button {
180     float: right;
181     margin-top: 4px;
184 .breadcrumb-button .singlebutton {
185     float: left;
186     margin-left: 4px;
189 .dir-rtl {
190     .nav-tabs > li,
191     .nav-pills > li {
192         float: right;
193     }
195 .dir-rtl .navbar .brand {
196     padding: 10px 0 10px 20px;
197     float: right;
200 .navbar-inverse .logininfo a {
201     color: @navbarInverseLinkColor;
203 .navbar-inverse .logininfo a:hover {
204     background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
205     color: @navbarInverseLinkColorHover;
208 .navbar-fixed-top,
209 .navbar-fixed-bottom {
210     z-index: 4030;
213 .dir-rtl .breadcrumb-button,
214 .dir-rtl .navbar .btn-navbar {
215     float: left;
218 .dir-rtl .breadcrumb-button .singlebutton {
219     float: right;
220     margin-right: 4px;
221     margin-left: 0;
223 .dir-rtl .breadcrumb-button .singlebutton div,
224 .dir-rtl .breadcrumb-button .singlebutton div input[type="submit"] {
225     margin-right: 5px;
226     margin-left: 0;
229 .ie .row-fluid .desktop-first-column {
230     margin-left: 0;
232 .langmenu form {
233     margin: 0;
235 .container-fluid {
236     max-width: 1680px;
237     margin: 0 auto;
239 // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
240 canvas {
241     -ms-touch-action: auto;
244 div#dock {
245     display: none;
248 .path-mod-choice {
249     .horizontal  .choices {
250         margin: 0;
251         .option {
252             display: inline-block;
253             padding: 10px;
254         }
255     }
256     .results .data {
257         white-space: normal;
258     }
261 .path-mod-lesson .firstpageoptions {
262     margin: auto;
263     min-width: 280px;
264     width: 60%;
267 .path-mod-lesson .centerpadded {
268     padding: 5px;
269     text-align: center;
272 .path-mod-wiki .wiki_headingtitle,
273 .path-mod-wiki .midpad,
274 .path-mod-wiki .wiki_headingtime {
275     text-align: inherit;
278 .path-mod-wiki .wiki_contentbox {
279     width: 100%;
282 // Dropdown styling.
283 .dropdown-menu {
284     > li > a {
285         padding: 3px 20px 3px 8px;
286     }
288 .dir-rtl .dropdown-menu {
289     > li > a {
290         padding: 3px 8px 3px 20px;
291     }
293 .dir-rtl .dropdown-submenu > .dropdown-menu {
294   .border-radius(6px 0px 6px 6px);
298 // Survey module
300 .path-mod-survey {
301     .surveytable {
302       > tbody > tr:nth-of-type(odd) {background-color: @tableBackground;}
303       > tbody > tr:nth-of-type(even) {background-color: @tableBackgroundAccent;}
304         .rblock label {text-align: center;}
305     }
306     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
307         text-align:center;
308     }
310 // rtl overrides
311 .dir-rtl {
312     &.path-mod-forum .forumheaderlist {
313         thead .header.lastpost {
314             text-align: left;
315         }
316         .discussion {
317             .lastpost {
318                 text-align: left;
319             }
320         }
321     }
324 .nav .caret {
325     margin-left: 4px;
327 .dir-rtl .nav .caret {
328     margin-right: 4px;
331 // Dividers
332 .nav {
333     .divider {
334         overflow: hidden;
335         width: 0;
336         height: @navbarHeight;
337         border-left: 1px solid @navbarBackground;
338         border-right: 1px solid @navbarBackgroundHighlight;
339     }
341 .navbar-inverse {
342     .nav {
343         .divider {
344             border-left-color: @navbarInverseBackground;
345             border-right-color: lighten(@navbarInverseBackground, 25%);
346         }
347     }
349 .dropdown-menu {
350     .divider {
351         width: auto;
352         height: 1px;
353         border-left: 0 none;
354         border-right: 0 none;
355     }
358 // Usermenu
359 .usermenu {
360     .login {
361         color: @navbarText;
362         line-height: 40px;
363         a {
364             color: @linkColor;
365             &:hover,
366             &:focus {
367                 color: @linkColorHover;
368                 text-decoration: underline;
369             }
370         }
371     }
372     .moodle-actionmenu {
374         .toggle-display {
375             display: block;
376             opacity: 1;
377             color: @navbarLinkColor;
378             line-height: 40px;
379             height: 40px;
380             &:hover {
381                 color: @navbarLinkColorHover;
382             }
384             .userbutton {
385                 height: 40px;
386                 line-height: 40px;
387                 .avatars{
388                     display: inline-block;
389                     height: 36px;
390                     width: 36px;
391                     vertical-align: middle;
392                     margin-right: 6px;
393                     margin-left: 6px;
395                     .avatar,
396                     img {
397                         display: block;
398                     }
399                 }
400                 .usertext {
401                     display: inline-block;
402                     vertical-align: middle;
403                     line-height: 1em;
404                     color: inherit;
405                     .meta,
406                     .role {
407                         display: block;
408                         font-size: 12px;
409                         .value {
410                             font-weight: bold;
411                         }
412                     }
413                     .role {
414                         font-weight: bold;
415                     }
416                 }
417             }
419             // Hide caret when JS is disabled.
420             .caret {
421                 display: none;
422             }
423         }
426         // A little bit of visual feedback for the action menu when Javascript is disabled.
427         .menu {
428             .menu-action.icon {
429                 img {
430                     border-radius: 0;
431                     background: transparent;
432                     box-shadow: none;
433                 }
434                 &:hover img {
435                     background: #fff;
436                     border-radius: 4px;
437                     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
438                 }
439             }
440         }
441         &[data-enhanced] .menu {
442             .menu-action.icon,
443             .menu-action.icon:hover {
444                 img {
445                     border-radius: 0;
446                     background: transparent;
447                     box-shadow: none;
448                 }
449             }
450         }
452     }
454 .navbar-inverse {
455     .usermenu {
456         .login {
457             color: @navbarInverseText;
458             a {
459                 color: @navbarInverseLinkColor;
460                 &:hover {
461                     color: @navbarInverseLinkColorHover;
462                 }
463             }
464         }
465         .moodle-actionmenu {
466             .toggle-display {
467                 color: @navbarInverseLinkColor;
468             }
469             .userbutton {
470                 .usertext {
471                     color: @navbarInverseLinkColor;
472                     .meta {
473                         color: @navbarInverseText;
474                         .value {
475                             color: @navbarInverseLinkColor;
476                         }
477                     }
478                 }
479             }
480             &:hover {
481                 .usertext {
482                     color: @navbarInverseLinkColorHover;
483                     .meta {
484                         color: @navbarInverseText;
485                         .value {
486                             color: @navbarInverseLinkColorHover;
487                         }
488                     }
489                 }
490             }
491             &[data-enhanced] .toggle-display.textmenu {
492                 .caret {
493                     border-top-color: @navbarInverseLinkColorHover;
494                 }
495             }
497             // A little bit of visual feedback for the action menu when Javascript is disabled.
498             .menu {
499                 .menu-action.icon {
500                     img {
501                         border-radius: 0;
502                         background: transparent;
503                         box-shadow: none;
504                     }
505                     &:hover img {
506                         background: #333;
507                         border-radius: 4px;
508                         box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
509                     }
510                 }
511             }
512             &[data-enhanced] .menu {
513                 .menu-action.icon,
514                 .menu-action.icon:hover {
515                     img {
516                         border-radius: 0;
517                         background: transparent;
518                         box-shadow: none;
519                     }
520                 }
521             }
522         }
523     }
526 .jsenabled {
527     .usermenu {
528         .moodle-actionmenu {
529             .toggle-display {
530                 display: block;
532                 &.textmenu {
533                     padding-left: 8px;
534                     padding-right: 8px;
535                 }
537                 // Show caret when JS is enabled.
538                 .caret {
539                     display: inline-block;
540                     position: relative;
541                     top: 9px;
542                 }
543             }
545             > .menubar {
546                 display: block;
547                 margin: 0px 0px 2px 0px;
548             }
549             > .menu {
550                 min-width: 160px;
551                 .filler {
552                     display: block;
553                     .nav-divider();
554                 }
555             }
557             &.show {
558                 background-color: @navbarLinkBackgroundActive;
559                 .menu {
560                     padding: 5px 0;
561                     margin: 2px 0 0;
562                     background-clip: padding-box;
563                     &:before {
564                         content: '';
565                         display: inline-block;
566                         border-left:   7px solid transparent;
567                         border-right:  7px solid transparent;
568                         border-bottom: 7px solid #ccc;
569                         border-bottom-color: @dropdownBorder;
570                         position: absolute;
571                         top: -7px;
572                     }
573                     &:after {
574                         content: '';
575                         display: inline-block;
576                         border-left:   6px solid transparent;
577                         border-right:  6px solid transparent;
578                         border-bottom: 6px solid @dropdownBackground;
579                         position: absolute;
580                         top: -6px;
581                     }
583                     a {
584                         border-radius: 0;
586                         &:focus {
587                             text-decoration: none;
588                         }
589                         &:hover {
590                             text-decoration: none;
591                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
592                         }
593                     }
594                     &.align-tr-br {
595                         margin-top: 2px;
596                     }
597                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
598                 }
599                 &:hover .toggle-display {}
600             }
601         }
602     }
603     .navbar-inverse {
604         .usermenu {
605             .moodle-actionmenu {
607                 &.show {
608                     background-color: @navbarInverseLinkBackgroundActive;
609                 }
610             }
611         }
612     }
615 .dir-ltr {
616     .usermenu {
617         float: right;
618         > .moodle-actionmenu {
619             > .menu {
620                 &:before {
621                     right: 9px;
622                 }
623                 &:after {
624                     right: 10px;
625                 }
626             }
627             > .menubar li a {
628                 text-align: right;
629             }
630         }
631     }
632     &.userloggedinas .usermenu .userbutton .avatars {
633         .avatar {
634             &.current {
635                 left: 16px;
636             }
637         }
638     }
641 .dir-rtl {
642     .usermenu {
643         float: left;
644         > .moodle-actionmenu {
645             > .menu {
646                 margin-right: 0px;
647                 &:before {
648                     left: 9px;
649                 }
650                 &:after {
651                     left: 10px;
652                 }
653             }
654             > .menubar li a {
655                 text-align: left;
656             }
657         }
658     }
659     &.userloggedinas .usermenu .userbutton .avatars {
660         .avatar {
661             &.current {
662                 left: -14px;
663             }
664         }
665     }
669 .userloggedinas .usermenu .userbutton .avatars {
670     .avatar {
671         &.current {
672             position: relative;
673             top: 4px;
674             left: 4px;
675             width: 20px;
676             height: 20px;
677             margin-top: 11px;
678             margin-bottom: -34px;
679             border: 1px solid #fff;
680             border-radius: 50%;
681             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
682         }
683         img {
684             width: inherit;
685             height: inherit;
686         }
687         overflow: hidden;
688     }