MDL-55417 forms: Change iscancel property to issecondary for submit buttons
[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 {
129 margin-top: 1em;
130 padding: 1em 0;
131 border-top: 2px solid $table-border-color;
132}
133
134.maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
135 border: 1px dotted $table-border-color;
136}
137
138.path-grade-report-grader h1 {
139 text-align: inherit;
140}
141
142#page-mod-chat-gui_basic input#message {
143 max-width: 100%;
144}
145
146#page-mod-data-view #singleimage {
147 width: auto;
148}
149
150.path-mod-data form {
151 margin-top: 10px;
152}
153
154.template_heading {
155 margin-top: 10px;
156}
157
158.breadcrumb-button {
159 float: right;
160 margin-top: 4px;
161}
162
163.breadcrumb-button .singlebutton {
164 float: left;
165 margin-left: 4px;
166}
167
168.navbar-fixed-top,
169.navbar-fixed-bottom {
170 z-index: 4030;
171}
172
173.ie .row-fluid .desktop-first-column {
174 margin-left: 0;
175}
176.langmenu form {
177 margin: 0;
178}
179.container-fluid {
180 max-width: 1680px;
181 margin: 0 auto;
182}
183// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
184canvas {
185 -ms-touch-action: auto;
186}
187
188div#dock {
189 display: none;
190}
191
192// Choice module
193
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 }
205}
206
207// Lesson module
208
209.path-mod-lesson .firstpageoptions {
210 margin: auto;
211 min-width: 280px;
212 width: 60%;
213}
214
215.path-mod-lesson .centerpadded {
216 padding: 5px;
217 text-align: center;
218}
219
220.path-mod-wiki .wiki_headingtitle,
221.path-mod-wiki .midpad,
222.path-mod-wiki .wiki_headingtime {
223 text-align: inherit;
224}
225
226.path-mod-wiki .wiki_contentbox {
227 width: 100%;
228}
229
230// Dropdown styling.
231.dropdown-menu {
232 > li > a {
233 padding: 3px 20px 3px 8px;
234 }
235}
236
237// Survey module
238
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 }
248}
249
250.nav .caret {
251 margin-left: 4px;
252}
253
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 }
263}
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 }
279}
280
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 {
296
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 }
306
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;
317
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 }
341
342 // Hide caret when JS is disabled.
343 .caret {
344 display: none;
345 }
346 }
347
348
349 // A little bit of visual feedback for the action menu when Javascript is disabled.
350 .menu {
351 .menu-action.icon {
352 img {
353 border-radius: 0;
354 background: transparent;
355 box-shadow: none;
356 }
357 &:hover img {
358 background: #fff;
359 border-radius: 4px;
360 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
361 }
362 }
363 }
364 &[data-enhanced] .menu {
365 .menu-action.icon,
366 .menu-action.icon:hover {
367 img {
368 border-radius: 0;
369 background: transparent;
370 box-shadow: none;
371 }
372 }
373 }
374
375 }
376}
377.jsenabled {
378 .usermenu {
379 .moodle-actionmenu {
380 .toggle-display {
381 display: block;
382
383 &.textmenu {
384 padding-left: 8px;
385 padding-right: 8px;
386 }
387
388 // Show caret when JS is enabled.
389 .caret {
390 display: inline-block;
391 position: relative;
392 top: 9px;
393 }
394 }
395
396 > .menubar {
397 display: block;
398 margin: 0px;
399 }
400 > .menu {
401 min-width: 160px;
402 .filler {
403 display: block;
404 @include nav-divider();
405 }
406 }
407
408 &.show {
409 background-color: $dropdown-link-active-bg;
410 .menu {
411 padding: 5px 0;
412 margin: 2px 0 0;
413 background-clip: padding-box;
414 &:before {
415 content: '';
416 display: inline-block;
417 border-left: 7px solid transparent;
418 border-right: 7px solid transparent;
419 border-bottom: 7px solid #ccc;
420 border-bottom-color: $dropdown-border-color;
421 position: absolute;
422 top: -7px;
423 }
424 &:after {
425 content: '';
426 display: inline-block;
427 border-left: 6px solid transparent;
428 border-right: 6px solid transparent;
429 border-bottom: 6px solid $dropdown-bg;
430 position: absolute;
431 top: -6px;
432 }
433
434 a {
435 border-radius: 0;
436
437 &:focus {
438 text-decoration: none;
439 }
440 &:hover {
441 text-decoration: none;
da92b738 442 @include gradient-y($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
536f0460
DW
443 }
444 }
445 &.align-tr-br {
446 margin-top: 2px;
447 }
448 @include box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
449 }
450 &:hover .toggle-display {}
451 }
452 }
453 }
454}
455
456.usermenu {
457 float: right;
458 > .moodle-actionmenu {
459 > .menu {
460 &:before {
461 right: 9px;
462 }
463 &:after {
464 right: 10px;
465 }
466 }
467 > .menubar li a {
468 text-align: right;
469 }
470 }
471}
472&.userloggedinas .usermenu .userbutton .avatars {
473 .avatar {
474 &.current {
475 left: 16px;
476 }
477 }
478}
479
480
481.userloggedinas .usermenu .userbutton .avatars {
482 .avatar {
483 &.current {
484 position: relative;
485 top: 4px;
486 left: 4px;
487 width: 20px;
488 height: 20px;
489 margin-top: 11px;
490 margin-bottom: -34px;
491 border: 1px solid #fff;
492 border-radius: 50%;
493 box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
494 }
495 img {
496 width: inherit;
497 height: inherit;
498 }
499 overflow: hidden;
500 }
501}
502
503// Quiz module
504
505// Question navigation block.
506.path-mod-quiz #mod_quiz_navblock {
507 .qnbutton {
508 text-decoration: none;
509 font-size: 14px;
510 line-height: 20px;
511 font-weight: normal;
512 background-color: $body-color;
513 background-image: none;
514 height: 40px;
515 width: 30px;
516 border-radius: 3px;
517 border: 0;
518 overflow: visible;
519 margin: 0 6px 6px 0;
520 }
521 span.qnbutton {
522 cursor: default;
523 background-color: $input-bg-disabled;
524 color: $gray;
525 }
526 a.qnbutton:hover,
527 a.qnbutton:active,
528 a.qnbutton:focus {
529 text-decoration: underline;
530 }
531
532 .qnbutton .thispageholder {
533 border: 1px solid;
534 border-radius: 3px;
535 z-index: 1;
536 }
537 .qnbutton.thispage .thispageholder {
538 border-width: 3px;
539 }
540 .allquestionsononepage .qnbutton.thispage .thispageholder {
541 border-width: 1px;
542 }
543
544 .qnbutton.flagged .thispageholder {
545 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
546 }
547
548 .qnbutton .trafficlight {
549 border: 0;
550 background: $body-color none center/10px no-repeat scroll;
551 height: 20px;
552 margin-top: 20px;
553 border-radius: 0 0 3px 3px;
554 }
555
556 .qnbutton.notyetanswered .trafficlight,
557 .qnbutton.invalidanswer .trafficlight {
558 background-color: $body-color;
559 }
560 .qnbutton.invalidanswer .trafficlight {
561 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
562 }
563 .qnbutton.correct .trafficlight {
564 background-image: url([[pix:theme|mod/quiz/checkmark]]);
565 background-color: $state-success-text;
566 }
567 .qnbutton.blocked .trafficlight {
568 background-image: url([[pix:core|t/locked]]);
569 background-color: $input-bg-disabled;
570 }
571 .qnbutton.notanswered .trafficlight,
572 .qnbutton.incorrect .trafficlight {
573 background-color: $state-danger-text;
574 }
575 .qnbutton.partiallycorrect .trafficlight {
576 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
577 background-color: $state-warning-text;
578 }
579 .qnbutton.complete .trafficlight,
580 .qnbutton.answersaved .trafficlight,
581 .qnbutton.requiresgrading .trafficlight {
582 background-color: $gray-light;
583 }
584}