MDL-55802 theme_noname: Navbar is responsive and better styled
[moodle.git] / theme / noname / scss / moodle / modules.scss
CommitLineData
536f0460
DW
1/* modules.less */
2
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
7
8select {
9 width: auto;
10}
11
12// Forum module
13
14.path-mod-forum .forumsearch {
15 input,
16 .helptooltip {
17 margin: 0 3px;
18 }
19}
20
21.path-mod-forum .forumheaderlist,
22.path-mod-forum .forumheaderlist td {
23 border: none;
24}
25
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 }
35
36 thead .header {
37 white-space: normal;
38 vertical-align: top;
39 }
40
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}
75
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 }
104}
105
106.forumpost .row .left {
107 width: 48px;
108}
109
110.forumpost .options .commands {
111 margin-left: 0;
112}
113
114.forumpost .subject {
115 font-weight: bold;
116}
117
118// Override hardcoded forum modules styling
119.forumsearch input[type=text] {
120 margin-bottom: 0 !important;
121}
122
123#page-mod-forum-discuss .discussioncontrols {
124 width: auto;
125 margin: 0;
126}
127
128#page-footer {
536f0460
DW
129 border-top: 2px solid $table-border-color;
130}
131
132.maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
133 border: 1px dotted $table-border-color;
134}
135
136.path-grade-report-grader h1 {
137 text-align: inherit;
138}
139
140#page-mod-chat-gui_basic input#message {
141 max-width: 100%;
142}
143
144#page-mod-data-view #singleimage {
145 width: auto;
146}
147
148.path-mod-data form {
149 margin-top: 10px;
150}
151
152.template_heading {
153 margin-top: 10px;
154}
155
156.breadcrumb-button {
157 float: right;
158 margin-top: 4px;
159}
160
161.breadcrumb-button .singlebutton {
162 float: left;
163 margin-left: 4px;
164}
165
166.navbar-fixed-top,
167.navbar-fixed-bottom {
168 z-index: 4030;
169}
170
171.ie .row-fluid .desktop-first-column {
172 margin-left: 0;
173}
174.langmenu form {
175 margin: 0;
176}
177.container-fluid {
178 max-width: 1680px;
179 margin: 0 auto;
180}
181// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
182canvas {
183 -ms-touch-action: auto;
184}
185
186div#dock {
187 display: none;
188}
189
190// Choice module
191
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 }
203}
204
205// Lesson module
206
207.path-mod-lesson .firstpageoptions {
208 margin: auto;
209 min-width: 280px;
210 width: 60%;
211}
212
213.path-mod-lesson .centerpadded {
214 padding: 5px;
215 text-align: center;
216}
217
218.path-mod-wiki .wiki_headingtitle,
219.path-mod-wiki .midpad,
220.path-mod-wiki .wiki_headingtime {
221 text-align: inherit;
222}
223
224.path-mod-wiki .wiki_contentbox {
225 width: 100%;
226}
227
228// Dropdown styling.
229.dropdown-menu {
230 > li > a {
231 padding: 3px 20px 3px 8px;
232 }
233}
234
235// Survey module
236
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 }
246}
247
248.nav .caret {
249 margin-left: 4px;
250}
251
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 }
261}
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 }
277}
278
279// Usermenu
280.usermenu {
281 .login {
5f18da12 282 line-height: 2.25rem;
536f0460 283 a {
5f18da12 284 color: $link-color;
536f0460
DW
285 &:hover,
286 &:focus {
5f18da12 287 color: $link-hover-color;
536f0460
DW
288 text-decoration: underline;
289 }
290 }
291 }
292 .moodle-actionmenu {
293
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 }
303
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;
314
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 }
336 }
337 }
338
339 // Hide caret when JS is disabled.
340 .caret {
341 display: none;
342 }
343 }
344
345
536f0460
DW
346 }
347}
348.jsenabled {
349 .usermenu {
350 .moodle-actionmenu {
351 .toggle-display {
352 display: block;
353
354 &.textmenu {
355 padding-left: 8px;
356 padding-right: 8px;
357 }
358
359 // Show caret when JS is enabled.
360 .caret {
361 display: inline-block;
362 position: relative;
363 top: 9px;
364 }
365 }
366
367 > .menubar {
368 display: block;
369 margin: 0px;
370 }
371 > .menu {
372 min-width: 160px;
373 .filler {
374 display: block;
375 @include nav-divider();
376 }
377 }
378
379 &.show {
380 background-color: $dropdown-link-active-bg;
381 .menu {
382 padding: 5px 0;
383 margin: 2px 0 0;
384 background-clip: padding-box;
385 &:before {
386 content: '';
387 display: inline-block;
388 border-left: 7px solid transparent;
389 border-right: 7px solid transparent;
390 border-bottom: 7px solid #ccc;
391 border-bottom-color: $dropdown-border-color;
392 position: absolute;
393 top: -7px;
394 }
395 &:after {
396 content: '';
397 display: inline-block;
398 border-left: 6px solid transparent;
399 border-right: 6px solid transparent;
400 border-bottom: 6px solid $dropdown-bg;
401 position: absolute;
402 top: -6px;
403 }
404
405 a {
406 border-radius: 0;
407
408 &:focus {
409 text-decoration: none;
410 }
411 &:hover {
412 text-decoration: none;
da92b738 413 @include gradient-y($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
536f0460
DW
414 }
415 }
416 &.align-tr-br {
417 margin-top: 2px;
418 }
419 @include box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
420 }
421 &:hover .toggle-display {}
422 }
423 }
424 }
425}
426
427.usermenu {
428 float: right;
429 > .moodle-actionmenu {
430 > .menu {
431 &:before {
432 right: 9px;
433 }
434 &:after {
435 right: 10px;
436 }
437 }
438 > .menubar li a {
439 text-align: right;
440 }
441 }
442}
443&.userloggedinas .usermenu .userbutton .avatars {
444 .avatar {
445 &.current {
446 left: 16px;
447 }
448 }
449}
450
451
452.userloggedinas .usermenu .userbutton .avatars {
453 .avatar {
454 &.current {
455 position: relative;
456 top: 4px;
457 left: 4px;
458 width: 20px;
459 height: 20px;
460 margin-top: 11px;
461 margin-bottom: -34px;
462 border: 1px solid #fff;
463 border-radius: 50%;
464 box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
465 }
466 img {
467 width: inherit;
468 height: inherit;
469 }
470 overflow: hidden;
471 }
472}
473
474// Quiz module
475
476// Question navigation block.
477.path-mod-quiz #mod_quiz_navblock {
478 .qnbutton {
479 text-decoration: none;
480 font-size: 14px;
481 line-height: 20px;
482 font-weight: normal;
483 background-color: $body-color;
484 background-image: none;
485 height: 40px;
486 width: 30px;
487 border-radius: 3px;
488 border: 0;
489 overflow: visible;
490 margin: 0 6px 6px 0;
491 }
492 span.qnbutton {
493 cursor: default;
494 background-color: $input-bg-disabled;
495 color: $gray;
496 }
497 a.qnbutton:hover,
498 a.qnbutton:active,
499 a.qnbutton:focus {
500 text-decoration: underline;
501 }
502
503 .qnbutton .thispageholder {
504 border: 1px solid;
505 border-radius: 3px;
506 z-index: 1;
507 }
508 .qnbutton.thispage .thispageholder {
509 border-width: 3px;
510 }
511 .allquestionsononepage .qnbutton.thispage .thispageholder {
512 border-width: 1px;
513 }
514
515 .qnbutton.flagged .thispageholder {
516 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
517 }
518
519 .qnbutton .trafficlight {
520 border: 0;
521 background: $body-color none center/10px no-repeat scroll;
522 height: 20px;
523 margin-top: 20px;
524 border-radius: 0 0 3px 3px;
525 }
526
527 .qnbutton.notyetanswered .trafficlight,
528 .qnbutton.invalidanswer .trafficlight {
529 background-color: $body-color;
530 }
531 .qnbutton.invalidanswer .trafficlight {
532 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
533 }
534 .qnbutton.correct .trafficlight {
535 background-image: url([[pix:theme|mod/quiz/checkmark]]);
536 background-color: $state-success-text;
537 }
538 .qnbutton.blocked .trafficlight {
539 background-image: url([[pix:core|t/locked]]);
540 background-color: $input-bg-disabled;
541 }
542 .qnbutton.notanswered .trafficlight,
543 .qnbutton.incorrect .trafficlight {
544 background-color: $state-danger-text;
545 }
546 .qnbutton.partiallycorrect .trafficlight {
547 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
548 background-color: $state-warning-text;
549 }
550 .qnbutton.complete .trafficlight,
551 .qnbutton.answersaved .trafficlight,
552 .qnbutton.requiresgrading .trafficlight {
553 background-color: $gray-light;
554 }
555}
bffc0ef1
FM
556
557/**
558 * Assign.
559 */
560.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
561 top: auto;
562}
563.path-mod-assign [data-region="grade-panel"] h3 {
564 margin: 10px 0;
565 line-height: 40px;
566}
567.path-mod-assign [data-region="grading-navigation"] {
568 padding: 6px;
569}
570.path-mod-assign [data-region="grade-actions"] {
571 padding: 10px;
572}
573.path-mod-assign [data-region="user-info"] .img-rounded {
574 margin-top: 0;
575}
576.path-mod-assign [data-region="grading-navigation-panel"] {
577 height: 85px;
578}
579.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
580 width: auto;
581 display: inline-block;
582}
583
584/**
585 * Assign feedback.
586 */
587.assignfeedback_editpdf_widget * {
588 box-sizing: content-box;
589}
590.assignfeedback_editpdf_widget button {
591 box-sizing: border-box;
592}
593.assignfeedback_editpdf_widget .commentcolourbutton img {
594 border-width: 0;
595}
596.assignfeedback_editpdf_widget .label {
597 @extend .tag;
598 @extend .tag-info;
599}
600
601.assignfeedback_editpdf_menu {
602 padding: 0;
603}