MDL-63102 core_block: Reduced spacing between blocks
[moodle.git] / theme / boost / scss / moodle / core.scss
CommitLineData
536f0460
DW
1/* core.less */
2
2fd7cdbe
JO
3// When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4// Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5// want white default colour.
6$bg-inverse-link-color: #fff !default;
7
bf45d7eb 8#region-main {
ba5c5083
DW
9 overflow-x: auto;
10 overflow-y: visible;
bf45d7eb
BB
11 border: $card-border-width solid $card-border-color;
12 padding: $card-spacer-x;
8e1a1c26 13 background-color: $body-bg;
ba5c5083 14}
99061152
DW
15
16.context-header-settings-menu,
17.region-main-settings-menu {
18 float: right;
b167b415
JD
19 width: auto;
20 max-width: 4em;
99061152
DW
21 height: 2em;
22 display: block;
b167b415 23 margin-top: 4px;
99061152
DW
24}
25
26.context-header-settings-menu .dropdown-toggle > .icon,
11774d90 27#region-main-settings-menu .dropdown-toggle > .icon {
99061152 28 height: 24px;
9d67a408 29 font-size: 24px;
99061152
DW
30 width: auto;
31}
d8cfd611
DW
32/** Prevent user notifications overlapping with region main settings menu */
33#user-notifications {
34 display: block;
35 overflow: hidden;
36}
99061152 37
536f0460
DW
38/** Page layout CSS starts **/
39.layout-option-noheader #page-header,
40.layout-option-nonavbar #page-navbar,
41.layout-option-nofooter #page-footer,
42.layout-option-nocourseheader .course-content-header,
43.layout-option-nocoursefooter .course-content-footer {
f4143537 44 display: none;
536f0460
DW
45}
46
536f0460
DW
47/** Page layout CSS ends **/
48
536f0460
DW
49.mdl-left {
50 text-align: left;
51}
f4143537 52
536f0460
DW
53.mdl-right {
54 text-align: right;
55}
113efed5
FM
56
57/*rtl:ignore*/
58.text-ltr {
5142f564 59 direction: ltr !important; /* stylelint-disable-line declaration-no-important */
113efed5
FM
60}
61
536f0460
DW
62#add,
63#remove,
64.centerpara,
65.mdl-align {
66 text-align: center;
67}
f4143537 68
536f0460
DW
69a.dimmed,
70a.dimmed:link,
71a.dimmed:visited,
72a.dimmed_text,
73a.dimmed_text:link,
74a.dimmed_text:visited,
75.dimmed_text,
76.dimmed_text a,
77.dimmed_text a:link,
78.dimmed_text a:visited,
79.usersuspended,
80.usersuspended a,
81.usersuspended a:link,
82.usersuspended a:visited,
83.dimmed_category,
84.dimmed_category a {
f4143537 85 @extend .text-muted;
536f0460 86}
f4143537 87
536f0460
DW
88.unlist,
89.unlist li,
90.inline-list,
91.inline-list li,
92.block .list,
93.block .list li,
94.section li.activity,
95.section li.movehere,
96.tabtree li {
97 list-style: none;
98 margin: 0;
99 padding: 0;
100}
f4143537 101
536f0460
DW
102.inline,
103.inline-list li {
104 display: inline;
105}
f4143537 106
536f0460
DW
107.notifytiny {
108 font-size: $font-size-xs;
109}
f4143537 110
536f0460
DW
111.notifytiny li,
112.notifytiny td {
113 font-size: 100%;
114}
f4143537 115
536f0460
DW
116.red,
117.notifyproblem {
118 @extend .text-warning;
119}
f4143537 120
536f0460
DW
121.green,
122.notifysuccess {
123 @extend .text-success;
124}
f4143537 125
536f0460
DW
126.highlight {
127 @extend .text-info;
128}
f4143537 129
d91cbe1e
CB
130.fitem.advanced .text-info {
131 font-weight: bold;
132}
133
536f0460
DW
134.reportlink {
135 text-align: right;
136}
f4143537 137
536f0460
DW
138a.autolink.glossary:hover {
139 cursor: help;
140}
141/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
142.collapsibleregioncaption {
143 white-space: nowrap;
2f3f8e45 144 min-height: $line-height-base * $font-size-base;
536f0460 145}
f4143537 146
536f0460
DW
147.pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
148 cursor: pointer;
149}
f4143537 150
536f0460
DW
151.collapsibleregioncaption img {
152 vertical-align: middle;
153}
154
155.jsenabled .hiddenifjs {
156 display: none;
157}
f4143537 158
536f0460
DW
159.visibleifjs {
160 display: none;
161}
f4143537 162
536f0460
DW
163.jsenabled .visibleifjs {
164 display: inline;
165}
f4143537 166
536f0460
DW
167.jsenabled .collapsibleregion {
168 overflow: hidden;
2f3f8e45 169 box-sizing: content-box;
536f0460 170}
f4143537 171
536f0460
DW
172.jsenabled .collapsed .collapsibleregioninner {
173 visibility: hidden;
174}
f4143537 175
536f0460
DW
176.collapsible-actions {
177 display: none;
178 text-align: right;
179}
f4143537 180
536f0460
DW
181.jsenabled .collapsible-actions {
182 display: block;
183}
f4143537 184
536f0460
DW
185.collapsible-actions .collapseexpand {
186 padding-left: 20px;
187 background: url([[pix:t/collapsed]]) 2px center no-repeat;
188}
ed7844b5
FM
189/*rtl:raw:
190.collapsible-actions .collapseexpand {
536f0460
DW
191 background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
192}
ed7844b5 193*/
536f0460
DW
194.collapsible-actions .collapse-all {
195 background-image: url([[pix:t/expanded]]);
196}
f4143537 197
536f0460 198.yui-overlay .yui-widget-bd {
f4143537
DP
199 background-color: #ffee69;
200 border: 1px solid #a6982b;
201 border-top-color: #d4c237;
fde35b8f 202 color: #000;
536f0460
DW
203 left: 0;
204 padding: 2px 5px;
205 position: relative;
206 top: 0;
207 z-index: 1;
208}
f4143537 209
536f0460
DW
210.clearer {
211 background: transparent;
212 border-width: 0;
213 clear: both;
214 display: block;
215 height: 1px;
216 margin: 0;
217 padding: 0;
218}
f4143537 219
536f0460
DW
220.bold,
221.warning,
222.errorbox .title,
223.pagingbar .title,
224.pagingbar .thispage {
225 font-weight: bold;
226}
f4143537 227
91bda4cd
DW
228img.userpicture {
229 margin-right: 0.5rem;
230}
f4143537 231
536f0460
DW
232img.resize {
233 height: 1em;
234 width: 1em;
235}
f4143537 236
91bda4cd 237.action-menu .dropdown-toggle {
91bda4cd
DW
238 text-decoration: none;
239}
f4143537 240
3f0544b8
DW
241.action-menu {
242 white-space: nowrap;
243}
f4143537 244
3ec69c2e 245.block img.resize {
536f0460
DW
246 height: 0.9em;
247 width: 0.8em;
248}
249/* Icon styles */
072364df 250img.activityicon {
536f0460
DW
251 height: 24px;
252 width: 24px;
253 vertical-align: middle;
254}
f4143537 255
536f0460
DW
256.headermain {
257 font-weight: bold;
258}
f4143537 259
536f0460
DW
260#maincontent {
261 display: block;
262 height: 1px;
263 overflow: hidden;
264}
f4143537 265
536f0460
DW
266img.uihint {
267 cursor: help;
268}
f4143537 269
536f0460
DW
270#addmembersform table {
271 margin-left: auto;
272 margin-right: auto;
273}
f4143537 274
536f0460
DW
275table.flexible .emptyrow {
276 display: none;
277}
f4143537 278
536f0460
DW
279form.popupform,
280form.popupform div {
281 display: inline;
282}
f4143537 283
536f0460
DW
284.arrow_button input {
285 overflow: hidden;
286}
536f0460
DW
287.no-overflow {
288 overflow: auto;
536f0460 289}
f4143537 290
a3124b15 291// Minimum height required for a menu in a table inside a scrollable div.
536f0460
DW
292.no-overflow > .generaltable {
293 margin-bottom: 0;
a3124b15 294 min-height: 10em;
536f0460
DW
295}
296// Accessibility features
297
298// Accessibility: text 'seen' by screen readers but not visual users.
299.accesshide {
b188407b 300 @include sr-only();
536f0460 301}
f4143537 302
536f0460 303span.hide,
3d979f96
FM
304div.hide,
305.hidden {
536f0460
DW
306 display: none;
307}
308// Accessibility: Skip block link, for keyboard-only users.
309a.skip-block,
310a.skip {
311 position: absolute;
312 top: -1000em;
313 font-size: 0.85em;
314 text-decoration: none;
315}
f4143537 316
536f0460
DW
317a.skip-block:focus,
318a.skip-block:active,
319a.skip:focus,
320a.skip:active {
321 position: static;
322 display: block;
323}
f4143537 324
536f0460
DW
325.skip-block-to {
326 display: block;
327 height: 1px;
328 overflow: hidden;
329}
330// Blogs
331.addbloglink {
332 text-align: center;
333}
f4143537 334
536f0460
DW
335.blog_entry .audience {
336 text-align: right;
337 padding-right: 4px;
338}
f4143537 339
536f0460
DW
340.blog_entry .tags {
341 margin-top: 15px;
342}
f4143537 343
536f0460
DW
344.blog_entry .content {
345 margin-left: 43px;
346}
347// Group
f4143537 348
536f0460
DW
349#doc-contents h1 {
350 margin: 1em 0 0 0;
351}
f4143537 352
536f0460
DW
353#doc-contents ul {
354 margin: 0;
355 padding: 0;
356 width: 90%;
357}
f4143537 358
536f0460
DW
359#doc-contents ul li {
360 list-style-type: none;
361}
f4143537 362
536f0460
DW
363.groupmanagementtable td {
364 vertical-align: top;
365}
f4143537 366
536f0460
DW
367.groupmanagementtable #existingcell,
368.groupmanagementtable #potentialcell {
369 width: 42%;
370}
f4143537 371
536f0460
DW
372.groupmanagementtable #buttonscell {
373 width: 16%;
374}
f4143537 375
536f0460
DW
376.groupmanagementtable #buttonscell p.arrow_button input {
377 width: auto;
378 min-width: 80%;
379 margin: 0 auto;
380}
f4143537 381
536f0460
DW
382.groupmanagementtable #removeselect_wrapper,
383.groupmanagementtable #addselect_wrapper {
384 width: 100%;
385}
f4143537 386
536f0460
DW
387.groupmanagementtable #removeselect_wrapper label,
388.groupmanagementtable #addselect_wrapper label {
389 font-weight: normal;
390}
f4143537 391
536f0460
DW
392#group-usersummary {
393 width: 14em;
394}
f4143537 395
536f0460
DW
396.groupselector {
397 margin-top: 3px;
398 margin-bottom: 3px;
399 display: inline-block;
400}
f4143537 401
536f0460
DW
402.groupselector label {
403 display: inline-block;
404}
536f0460
DW
405
406// Login
386f269f
FM
407.login-page {
408 [name="username"] {
409 margin-bottom: -1px;
410 border-bottom-right-radius: 0;
411 border-bottom-left-radius: 0;
412 }
f4143537 413
386f269f
FM
414 [type="password"] {
415 margin-bottom: 10px;
416 border-top-left-radius: 0;
417 border-top-right-radius: 0;
418 }
536f0460
DW
419}
420
536f0460
DW
421// Notes
422.notepost {
423 margin-bottom: 1em;
424}
f4143537 425
536f0460
DW
426.notepost .userpicture {
427 float: left;
428 margin-right: 5px;
429}
f4143537 430
536f0460
DW
431.notepost .content,
432.notepost .footer {
433 clear: both;
434}
f4143537 435
536f0460
DW
436.notesgroup {
437 margin-left: 20px;
438}
439
440// My Moodle
137c289a
FM
441.path-my .coursebox {
442 margin: $spacer-y 0;
443 padding: 0;
f4143537 444
137c289a
FM
445 .overview {
446 margin: 15px 30px 10px 30px;
447 }
536f0460 448}
f4143537 449
536f0460
DW
450.path-my .coursebox .info {
451 float: none;
452 margin: 0;
453}
454
455// Modules
456.mod_introbox {
457 padding: 10px;
458}
f4143537 459
536f0460
DW
460table.mod_index {
461 width: 100%;
462}
463
464// Comments
465.comment-ctrl {
466 font-size: 12px;
467 display: none;
468 margin: 0;
469 padding: 0;
470}
f4143537 471
536f0460
DW
472.comment-ctrl h5 {
473 margin: 0;
474 padding: 5px;
475}
f4143537 476
536f0460
DW
477.comment-area {
478 max-width: 400px;
479 padding: 5px;
480}
f4143537 481
536f0460
DW
482.comment-area textarea {
483 width: 100%;
484 overflow: auto;
f4143537 485
536f0460
DW
486 &.fullwidth {
487 -webkit-box-sizing: border-box;
488 -moz-box-sizing: border-box;
489 box-sizing: border-box;
490 }
491}
f4143537 492
536f0460
DW
493.comment-area .fd {
494 text-align: right;
495}
f4143537 496
536f0460
DW
497.comment-meta span {
498 color: gray;
499}
f4143537 500
536f0460
DW
501.comment-link img {
502 vertical-align: text-bottom;
503}
f4143537 504
536f0460
DW
505.comment-list {
506 font-size: 11px;
507 overflow: auto;
508 list-style: none;
509 padding: 0;
510 margin: 0;
511}
f4143537 512
536f0460
DW
513.comment-list li {
514 margin: 2px;
515 list-style: none;
516 margin-bottom: 5px;
517 clear: both;
518 padding: .3em;
519 position: relative;
520}
f4143537 521
536f0460 522.comment-list li.first {
f4143537 523 display: none;
536f0460 524}
f4143537
DP
525
526.comment-paging {
536f0460
DW
527 text-align: center;
528}
f4143537
DP
529
530.comment-paging .pageno {
536f0460
DW
531 padding: 2px;
532}
f4143537
DP
533
534.comment-paging .curpage {
535 border: 1px solid #ccc;
536f0460 536}
f4143537 537
536f0460
DW
538.comment-message .picture {
539 width: 20px;
540 float: left;
541}
f4143537 542
536f0460
DW
543.comment-message .text {
544 margin: 0;
545 padding: 0;
546}
f4143537 547
536f0460
DW
548.comment-message .text p {
549 padding: 0;
550 margin: 0 18px 0 0;
551}
f4143537 552
536f0460
DW
553.comment-delete {
554 position: absolute;
555 top: 0;
556 right: 0;
557 margin: .3em;
558}
f4143537
DP
559
560.comment-report-selectall {
561 display: none;
536f0460 562}
f4143537 563
536f0460 564.comment-link {
f4143537 565 display: none;
536f0460 566}
f4143537 567
536f0460 568.jsenabled .comment-link {
f4143537 569 display: block;
536f0460 570}
f4143537
DP
571
572.jsenabled .showcommentsnonjs {
573 display: none;
536f0460 574}
f4143537
DP
575
576.jsenabled .comment-report-selectall {
577 display: inline;
536f0460
DW
578}
579/**
580* Completion progress report
581*/
582.completion-expired {
583 @extend .text-warning;
584}
f4143537 585
536f0460
DW
586.completion-expected {
587 font-size: $font-size-xs;
588}
f4143537 589
536f0460
DW
590.completion-sortchoice,
591.completion-identifyfield {
592 font-size: $font-size-xs;
593 vertical-align: bottom;
594}
f4143537 595
536f0460
DW
596.completion-progresscell {
597 text-align: right;
598}
f4143537 599
536f0460
DW
600.completion-expired .completion-expected {
601 font-weight: bold;
602}
603/**
604* Tags
605*/
606img.user-image {
607 height: 100px;
608 width: 100px;
609}
f4143537 610
536f0460
DW
611#tag-search-box {
612 text-align: center;
613 margin: 10px auto;
614}
615
616.path-tag .tag-index-items .tagarea {
f4143537 617 border: 1px solid #e3e3e3;
536f0460
DW
618 border-radius: 4px;
619 padding: 10px;
620 margin-top: 10px;
621}
622
623.path-tag .tag-index-items .tagarea h3 {
624 display: block;
625 padding: 3px 0 10px 0;
fde35b8f 626 margin: 0;
536f0460
DW
627 font-size: 1.1em;
628 font-weight: bold;
629 line-height: 20px;
630 color: #999;
fde35b8f 631 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
536f0460
DW
632 text-transform: uppercase;
633 word-wrap: break-word;
f4143537 634 border-bottom: solid 1px #e3e3e3;
536f0460
DW
635 margin-bottom: 10px;
636}
637
638.path-tag .tagarea .controls,
639.path-tag .tagarea .taggeditems {
640 @include clearfix();
641}
f4143537 642
536f0460
DW
643.path-tag .tagarea .controls,
644.path-tag .tag-backtoallitems {
645 text-align: center;
646}
f4143537 647
536f0460
DW
648.path-tag .tagarea .controls .gotopage.nextpage {
649 float: right;
650}
f4143537 651
536f0460
DW
652.path-tag .tagarea .controls .gotopage.prevpage {
653 float: left;
654}
f4143537 655
536f0460
DW
656.path-tag .tagarea .controls .exclusivemode {
657 display: inline-block;
658}
f4143537 659
536f0460
DW
660.path-tag .tagarea .controls.controls-bottom {
661 margin-top: 5px;
662}
f4143537 663
536f0460
DW
664.path-tag .tagarea .controls .gotopage.nextpage::after {
665 padding-right: 5px;
666 padding-left: 5px;
667 content: "»";
668}
f4143537 669
536f0460
DW
670.path-tag .tagarea .controls .gotopage.prevpage::before {
671 padding-right: 5px;
672 padding-left: 5px;
673 content: "«";
674}
675
676span.flagged-tag,
677tr.flagged-tag,
678span.flagged-tag a,
679tr.flagged-tag a {
680 @extend .text-warning;
681}
f4143537 682
536f0460
DW
683.tag-management-table td,
684.tag-management-table th {
685 vertical-align: middle;
686 padding: 4px;
687}
f4143537 688
536f0460
DW
689.tag-management-table .inplaceeditable.inplaceeditingon input {
690 width: 150px;
691}
f4143537 692
536f0460
DW
693.path-admin-tag .addstandardtags {
694 float: right;
f4143537 695
536f0460
DW
696 img {
697 margin: 0 5px;
698 }
699}
f4143537 700
536f0460
DW
701.path-tag .tag-relatedtags {
702 padding-top: 10px;
703}
f4143537 704
536f0460
DW
705.path-tag .tag-management-box {
706 text-align: right;
707}
f4143537 708
536f0460
DW
709.path-tag .tag-index-toc {
710 padding: 10px;
711 text-align: center;
712}
f4143537 713
536f0460
DW
714.path-tag .tag-index-toc li,
715.path-tag .tag-management-box li {
716 margin-left: 5px;
717 margin-right: 5px;
718}
f4143537 719
536f0460
DW
720.path-tag .tag-management-box li a.edittag {
721 background-image: url([[pix:moodle|i/settings]]);
722}
f4143537 723
536f0460
DW
724.path-tag .tag-management-box li a.flagasinappropriate {
725 background-image: url([[pix:moodle|i/flagged]]);
726}
f4143537 727
536f0460
DW
728.path-tag .tag-management-box li a.removefrommyinterests {
729 background-image: url([[pix:moodle|t/delete]]);
730}
f4143537 731
536f0460
DW
732.path-tag .tag-management-box li a.addtomyinterests {
733 background-image: url([[pix:moodle|t/add]]);
734}
f4143537 735
536f0460
DW
736.path-tag .tag-management-box li a {
737 background-repeat: no-repeat;
738 background-position: left;
739 padding-left: 17px;
740}
f4143537 741
536f0460
DW
742.tag_feed.media-list .media .itemimage {
743 float: left;
744}
f4143537 745
536f0460
DW
746.tag_feed.media-list .media .itemimage img {
747 height: 35px;
748 width: 35px;
749}
f4143537 750
536f0460
DW
751.tag_feed.media-list .media .media-body {
752 padding-right: 10px;
753 padding-left: 10px;
754}
f4143537 755
536f0460
DW
756.tag_feed .media .muted a {
757 @extend .text-muted;
758}
f4143537 759
536f0460
DW
760.tag_cloud {
761 text-align: center;
762}
f4143537 763
536f0460 764.tag_cloud .inline-list li {
fde35b8f 765 padding: 0 0.2em;
536f0460 766}
f4143537 767
536f0460
DW
768.tag_cloud .tag_overflow {
769 margin-top: 1em;
770 font-style: italic;
771}
f4143537 772
536f0460
DW
773.tag_cloud .s20 {
774 font-size: 2.7em;
775}
f4143537 776
536f0460
DW
777.tag_cloud .s19 {
778 font-size: 2.6em;
779}
f4143537 780
536f0460
DW
781.tag_cloud .s18 {
782 font-size: 2.5em;
783}
f4143537 784
536f0460
DW
785.tag_cloud .s17 {
786 font-size: 2.4em;
787}
f4143537 788
536f0460
DW
789.tag_cloud .s16 {
790 font-size: 2.3em;
791}
f4143537 792
536f0460
DW
793.tag_cloud .s15 {
794 font-size: 2.2em;
795}
f4143537 796
536f0460
DW
797.tag_cloud .s14 {
798 font-size: 2.1em;
799}
f4143537 800
536f0460
DW
801.tag_cloud .s13 {
802 font-size: 2em;
803}
f4143537 804
536f0460
DW
805.tag_cloud .s12 {
806 font-size: 1.9em;
807}
f4143537 808
536f0460
DW
809.tag_cloud .s11 {
810 font-size: 1.8em;
811}
f4143537 812
536f0460
DW
813.tag_cloud .s10 {
814 font-size: 1.7em;
815}
f4143537 816
536f0460
DW
817.tag_cloud .s9 {
818 font-size: 1.6em;
819}
f4143537 820
536f0460
DW
821.tag_cloud .s8 {
822 font-size: 1.5em;
823}
f4143537 824
536f0460
DW
825.tag_cloud .s7 {
826 font-size: 1.4em;
827}
f4143537 828
536f0460
DW
829.tag_cloud .s6 {
830 font-size: 1.3em;
831}
f4143537 832
536f0460
DW
833.tag_cloud .s5 {
834 font-size: 1.2em;
835}
f4143537 836
536f0460
DW
837.tag_cloud .s4 {
838 font-size: 1.1em;
839}
f4143537 840
536f0460
DW
841.tag_cloud .s3 {
842 font-size: 1em;
843}
f4143537 844
536f0460
DW
845.tag_cloud .s2 {
846 font-size: 0.9em;
847}
f4143537 848
536f0460
DW
849.tag_cloud .s1 {
850 font-size: 0.8em;
851}
f4143537 852
536f0460
DW
853.tag_cloud .s0 {
854 font-size: 0.7em;
855}
f4143537 856
536f0460
DW
857.tag_list ul {
858 display: inline;
859}
f4143537 860
536f0460 861.tag_list.hideoverlimit .overlimit {
f4143537 862 display: none;
536f0460 863}
f4143537 864
536f0460 865.tag_list .tagmorelink {
f4143537 866 display: none;
536f0460 867}
f4143537 868
536f0460 869.tag_list.hideoverlimit .tagmorelink {
f4143537 870 display: inline;
536f0460 871}
f4143537 872
536f0460 873.tag_list.hideoverlimit .taglesslink {
f4143537 874 display: none;
536f0460
DW
875}
876
877/**
878* Web Service
879*/
880#webservice-doc-generator td {
881 text-align: left;
882 border: 0 solid black;
883}
45d5594e 884
536f0460
DW
885/**
886* Enrol
887*/
888.userenrolment {
889 width: 100%;
890 border-collapse: collapse;
891}
f4143537 892
536f0460 893.userenrolment tr {
f4143537 894 vertical-align: top;
536f0460 895}
f4143537 896
536f0460
DW
897.userenrolment td {
898 padding: 0;
899 height: 41px;
900}
f4143537 901
536f0460
DW
902.userenrolment .subfield {
903 margin-right: 5px;
904}
f4143537 905
536f0460
DW
906.userenrolment .col_userdetails .subfield {
907 margin-left: 40px;
908}
f4143537 909
536f0460
DW
910.userenrolment .col_userdetails .subfield_picture {
911 float: left;
912 margin-left: 0;
913}
f4143537 914
536f0460
DW
915.userenrolment .col_lastseen {
916 width: 150px;
917}
f4143537 918
536f0460
DW
919.userenrolment .col_role {
920 width: 262px;
921}
f4143537 922
536f0460
DW
923.userenrolment .col_role .roles,
924.userenrolment .col_group .groups {
925 margin-right: 30px;
926}
f4143537 927
f66ab070
LB
928.userenrolment .col_role .role {
929 float: left;
930 padding: 0 3px 3px;
931 margin: 0 3px 3px;
932 white-space: nowrap;
933}
934
536f0460
DW
935.userenrolment .col_group .group {
936 float: left;
937 padding: 3px;
938 margin: 3px;
939 white-space: nowrap;
940}
f4143537 941
536f0460
DW
942.userenrolment .col_role .role a,
943.userenrolment .col_group .group a {
944 margin-left: 3px;
945 cursor: pointer;
946}
f4143537 947
536f0460
DW
948.userenrolment .col_role .addrole,
949.userenrolment .col_group .addgroup {
950 float: right;
951 padding: 3px;
952 margin: 3px;
f4143537 953
536f0460 954 > a:hover {
f4143537 955 border-bottom: 1px solid #666;
536f0460
DW
956 }
957}
f4143537 958
536f0460
DW
959.userenrolment .col_role .addrole img,
960.userenrolment .col_group .addgroup img {
961 vertical-align: baseline;
962}
963
964.userenrolment .hasAllRoles .col_role .addrole {
965 display: none;
966}
967
968.userenrolment .col_enrol .enrolment {
969 float: left;
f66ab070
LB
970 padding: 0 3px 3px;
971 margin: 0 3px 3px;
536f0460 972}
f4143537 973
536f0460
DW
974.userenrolment .col_enrol .enrolment a {
975 float: right;
976 margin-left: 3px;
977}
f4143537 978
536f0460
DW
979#page-enrol-users {
980 .enrol_user_buttons {
058f2fb6 981 text-align: right;
f4143537 982
536f0460 983 }
f4143537 984
536f0460
DW
985 #filterform {
986 @extend .card;
058f2fb6 987 @extend .card-block;
536f0460 988 }
536f0460 989}
f4143537 990
536f0460 991#page-enrol-users .enrol-users-page-action input {
f4143537 992 margin-left: 0;
536f0460 993}
f4143537 994
536f0460 995.corelightbox {
f4143537 996 background-color: #ccc;
536f0460
DW
997 position: absolute;
998 top: 0;
999 left: 0;
1000 width: 100%;
1001 height: 100%;
1002 text-align: center;
1003}
f4143537 1004
536f0460
DW
1005.corelightbox img {
1006 position: fixed;
1007 top: 50%;
1008 left: 50%;
1009}
1010
1011.mod-indent-outer {
1012 display: table;
1013}
f4143537 1014
536f0460
DW
1015.mod-indent {
1016 display: table-cell;
1017}
f4143537 1018
536f0460 1019.label .mod-indent {
f4143537
DP
1020 float: left;
1021 padding-top: 20px;
536f0460 1022}
536f0460
DW
1023$mod-indent-size: 30px;
1024/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
f4143537 1025
536f0460 1026@for $i from 1 through 16 {
9cb41231 1027 $width: ($i * $mod-indent-size);
536f0460 1028
9cb41231
DP
1029 .mod-indent-#{$i} {
1030 width: $width;
1031 }
536f0460 1032}
f4143537 1033
536f0460 1034.mod-indent-huge {
9cb41231 1035 width: (16 * $mod-indent-size);
536f0460
DW
1036}
1037
1038/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1039.resourcecontent .mediaplugin_mp3 object {
1040 height: 25px;
f4143537 1041 width: 600px;
536f0460 1042}
f4143537 1043
536f0460 1044.resourcecontent audio.mediaplugin_html5audio {
f4143537 1045 width: 600px;
536f0460
DW
1046}
1047/** Large resource images should avoid hidden overflow **/
1048.resourceimage {
1049 max-width: 100%;
1050}
1051/* Audio player size in 'inline' mode (can only change width, as above) */
1052.mediaplugin_mp3 object {
1053 height: 15px;
f4143537 1054 width: 300px;
536f0460 1055}
f4143537 1056
536f0460 1057audio.mediaplugin_html5audio {
f4143537 1058 width: 300px;
536f0460
DW
1059}
1060/* TinyMCE moodle media preview frame should not have padding */
1061.core_media_preview.pagelayout-embedded #content {
1062 padding: 0;
1063}
f4143537 1064
536f0460
DW
1065.core_media_preview.pagelayout-embedded #maincontent {
1066 height: 0;
1067}
f4143537 1068
536f0460
DW
1069body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1070 padding: 0;
1071 margin: 0;
1072 min-width: 0;
1073 background: none;
1074}
f4143537 1075
536f0460
DW
1076.path-rating .ratingtable {
1077 width: 100%;
1078 margin-bottom: 1em;
1079}
f4143537 1080
536f0460
DW
1081.path-rating .ratingtable th.rating {
1082 width: 100%;
1083}
f4143537 1084
536f0460
DW
1085.path-rating .ratingtable td.rating,
1086.path-rating .ratingtable td.time {
1087 white-space: nowrap;
1088 text-align: center;
1089}
f4143537 1090
536f0460
DW
1091/* Moodle Dialogue Settings (moodle-core-dialogue) */
1092.moodle-dialogue-base .moodle-dialogue-lightbox {
e72cb21d 1093 background-color: $gray;
536f0460 1094}
f4143537 1095
bfe00e67
BB
1096// Prevent adding backdrops to popups in popups.
1097.pagelayout-popup {
1098 .moodle-dialogue-base {
1099 .moodle-dialogue-lightbox {
1100 background-color: transparent;
1101 }
1102 .moodle-dialogue {
1103 box-shadow: $popover-box-shadow;
1104 }
1105 }
1106}
1107
536f0460
DW
1108.moodle-dialogue-base .hidden,
1109.moodle-dialogue-base .moodle-dialogue-hidden {
1110 display: none;
1111}
f4143537 1112
536f0460
DW
1113.no-scrolling {
1114 overflow: hidden;
1115}
f4143537 1116
536f0460 1117.moodle-dialogue-base .moodle-dialogue-fullscreen {
fde35b8f
DP
1118 left: 0;
1119 top: 0;
1120 right: 0;
536f0460
DW
1121 bottom: -50px;
1122 position: fixed;
1123}
f4143537 1124
536f0460
DW
1125.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1126 overflow: auto;
1127}
f4143537 1128
536f0460
DW
1129.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1130 width: 28px;
1131 height: 16px;
1132 background-size: 100%;
1133}
f4143537 1134
bffc0ef1
FM
1135.moodle-dialogue-base .moodle-dialogue-wrap {
1136 background-color: #fff;
1137 border: 1px solid #ccc;
1138}
f4143537 1139
181179de
DW
1140// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1141// it for a reason (conflicts with jquery .show()).
1142.modal.show {
1143 display: block;
1144}
1145
25f90896
DW
1146.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1147 @extend .modal-content;
536f0460 1148}
f4143537 1149
25f90896
DW
1150.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1151 @extend .modal-header;
536f0460 1152}
f4143537 1153
536f0460 1154.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1155 // Undo some YUI damage.
88af0208 1156 min-height: 3rem;
25f90896 1157 color: initial;
25f90896
DW
1158 background: initial;
1159 font-size: 1.5rem;
1160 line-height: 1.5;
536f0460 1161}
f4143537 1162
536f0460 1163.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
25f90896 1164 @extend .modal-title;
3ec69c2e 1165 font-size: 1.5rem;
536f0460 1166}
f4143537 1167
536f0460 1168.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
85dd7c6f
NK
1169 /*rtl:raw:
1170 left: 0;
1171 right: auto;
1172 */
5142f564 1173 padding: $spacer;
536f0460 1174}
f4143537 1175
536f0460 1176.moodle-dialogue-base .closebutton {
25f90896 1177 @extend .close;
25f90896 1178 box-shadow: none;
5142f564
FM
1179 &::after {
1180 content: "×";
1181 }
536f0460 1182}
f4143537 1183
25f90896 1184.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
3ec69c2e 1185 padding: 0.5rem;
536f0460
DW
1186}
1187
1188.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1189 overflow: auto;
1190 position: absolute;
fde35b8f 1191 top: 0;
536f0460 1192 bottom: 50px;
fde35b8f
DP
1193 left: 0;
1194 right: 0;
1195 margin: 0;
1196 border: 0;
536f0460 1197}
f4143537 1198
536f0460
DW
1199.moodle-dialogue-exception .moodle-exception-param label {
1200 font-weight: bold;
1201}
f4143537 1202
536f0460 1203.moodle-dialogue-exception .param-stacktrace label {
f4143537 1204 background-color: #eee;
536f0460
DW
1205 border: 1px solid #ccc;
1206 border-bottom-width: 0;
1207}
f4143537 1208
536f0460
DW
1209.moodle-dialogue-exception .param-stacktrace pre {
1210 border: 1px solid #ccc;
1211 background-color: #fff;
1212}
f4143537 1213
536f0460
DW
1214.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1215 color: navy;
1216 font-size: $font-size-sm;
1217}
f4143537 1218
536f0460
DW
1219.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1220 @extend .text-warning;
1221 font-size: $font-size-sm;
1222}
f4143537 1223
536f0460
DW
1224.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1225 color: #333;
1226 font-size: 90%;
1227 border-bottom: 1px solid #eee;
1228}
f4143537 1229
536f0460 1230.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
25f90896
DW
1231 @extend .modal-footer;
1232}
f4143537 1233
bc8594bd
FM
1234.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1235 display: none;
1236}
f4143537 1237
25f90896
DW
1238.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1239 // Undo some YUI damage.
1240 background: initial;
536f0460 1241}
f4143537 1242
536f0460 1243.moodle-dialogue-confirm .confirmation-message {
3ec69c2e 1244 margin: 0.5rem 0;
f2405a5f 1245}
f4143537 1246
536f0460 1247.moodle-dialogue-confirm .confirmation-dialogue input {
f4143537 1248 min-width: 80px;
536f0460 1249}
f4143537 1250
536f0460
DW
1251.moodle-dialogue-exception .moodle-exception-message {
1252 margin: 1em;
1253}
f4143537 1254
536f0460
DW
1255.moodle-dialogue-exception .moodle-exception-param {
1256 margin-bottom: 0.5em;
1257}
f4143537 1258
536f0460
DW
1259.moodle-dialogue-exception .moodle-exception-param label {
1260 width: 150px;
1261}
f4143537 1262
536f0460
DW
1263.moodle-dialogue-exception .param-stacktrace label {
1264 display: block;
1265 margin: 0;
1266 padding: 4px 1em;
1267}
f4143537 1268
536f0460
DW
1269.moodle-dialogue-exception .param-stacktrace pre {
1270 display: block;
1271 height: 200px;
1272 overflow: auto;
1273}
f4143537 1274
536f0460
DW
1275.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1276 display: inline-block;
1277 margin: 4px 0;
1278}
f4143537 1279
536f0460
DW
1280.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1281 display: inline-block;
1282 width: 50px;
1283 margin: 4px 1em;
1284}
f4143537 1285
536f0460
DW
1286.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1287 padding-left: 25px;
1288 margin-bottom: 4px;
1289 padding-bottom: 4px;
1290}
f4143537 1291
536f0460
DW
1292.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1293 opacity: 0.75;
1294 width: 100%;
1295 height: 100%;
1296 top: 0;
1297 left: 0;
1298 background-color: white;
1299 text-align: center;
1300 padding: 10% 0;
1301}
1302/* Apply a default max-height on tooltip text */
1303.moodle-dialogue .tooltiptext {
1304 max-height: 300px;
1305}
1306
1307.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1308 z-index: 3001;
1309
1310 .moodle-dialogue-bd {
1311 overflow: auto;
1312 }
1313}
1314
1315/**
1316 * Chooser Dialogues (moodle-core-chooserdialogue)
1317 *
1318 * This CSS belong to the chooser dialogue which should work both with, and
1319 * without javascript enabled
1320 */
1321/* Hide the dialog and it's title */
1322.chooserdialoguebody,
1323.choosertitle {
1324 display: none;
1325}
f4143537 1326
536f0460
DW
1327.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1328 margin: 0;
1329}
f4143537 1330
536f0460
DW
1331.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1332 padding: 0;
f4143537
DP
1333 background: #f2f2f2;
1334
536f0460
DW
1335 @include border-bottom-radius(10px);
1336}
1337/* Center the submit buttons within the area */
1338.choosercontainer #chooseform .submitbuttons {
1339 padding: 0.7em 0;
f2405a5f 1340 text-align: right;
536f0460
DW
1341}
1342/* Fixed for safari browser on iPhone4S with ios7@mixin */
f4143537 1343
536f0460 1344@media (max-height: 639px) {
a266ae30 1345 .ios .choosercontainer #chooseform .submitbuttons {
536f0460
DW
1346 padding: 45px 0;
1347 }
1348}
f4143537 1349
536f0460
DW
1350.choosercontainer #chooseform .submitbuttons input {
1351 min-width: 100px;
1352 margin: 0 0.5em;
1353}
1354/* Various settings for the options area */
1355.choosercontainer #chooseform .options {
1356 position: relative;
fde35b8f 1357 border-bottom: 1px solid #bbb;
536f0460
DW
1358}
1359/* Only set these options if we're showing the js container */
1360.jschooser .choosercontainer #chooseform .alloptions {
1361 overflow-x: hidden;
1362 overflow-y: auto;
e119bf6f 1363 max-width: 240px;
f4143537 1364
536f0460
DW
1365 .option {
1366 input[type=radio] {
1367 display: inline-block;
1368 }
f4143537 1369
536f0460
DW
1370 .typename {
1371 display: inline-block;
9f76a701 1372 width: 55%;
536f0460
DW
1373 }
1374 }
1375}
1376/* Settings for option rows and option subtypes */
1377.choosercontainer #chooseform .moduletypetitle,
1378.choosercontainer #chooseform .option,
1379.choosercontainer #chooseform .nonoption {
1380 margin-bottom: 0;
1381 padding: 0 1.6em 0 1.6em;
1382}
f4143537 1383
536f0460
DW
1384.choosercontainer #chooseform .moduletypetitle {
1385 text-transform: uppercase;
1386 padding-top: 1.2em;
1387 padding-bottom: 0.4em;
1388}
f4143537 1389
536f0460 1390.choosercontainer #chooseform .option .typename,
072364df 1391.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1392 padding: 0 0 0 0.5em;
1393}
f4143537 1394
e119bf6f
FM
1395.choosercontainer #chooseform .modicon + .typename {
1396 padding-left: 0;
1397}
536f0460 1398
536f0460 1399.choosercontainer #chooseform .option input[type=radio],
072364df 1400.choosercontainer #chooseform .option span.typename {
536f0460
DW
1401 vertical-align: middle;
1402}
f4143537 1403
536f0460
DW
1404.choosercontainer #chooseform .option label {
1405 display: block;
e119bf6f
FM
1406 margin: 0;
1407 padding: ($spacer / 2) 0;
fde35b8f 1408 border-bottom: 1px solid #fff;
536f0460 1409}
f4143537 1410
e119bf6f
FM
1411.choosercontainer #chooseform .option .icon {
1412 margin: 0;
1413 padding: 0 $spacer;
1414}
f4143537 1415
536f0460
DW
1416.choosercontainer #chooseform .nonoption {
1417 padding-left: 2.7em;
1418 padding-top: 0.3em;
1419 padding-bottom: 0.1em;
1420}
f4143537 1421
536f0460
DW
1422.choosercontainer #chooseform .subtype {
1423 margin-bottom: 0;
1424 padding: 0 1.6em 0 3.2em;
1425}
f4143537 1426
536f0460
DW
1427.choosercontainer #chooseform .subtype .typename {
1428 margin: 0 0 0 0.2em;
1429}
1430/* The instruction/help area */
1431.jschooser .choosercontainer #chooseform .instruction,
1432.jschooser .choosercontainer #chooseform .typesummary {
9cb41231 1433 display: none;
536f0460
DW
1434 position: absolute;
1435 top: 0;
1436 right: 0;
1437 bottom: 0;
e119bf6f 1438 left: 240px;
536f0460
DW
1439 margin: 0;
1440 padding: 1.6em;
1441 background-color: #fff;
1442 overflow-x: hidden;
1443 overflow-y: auto;
1444 line-height: 2em;
1445}
1446/* Selected option settings */
1447.jschooser .choosercontainer #chooseform .instruction,
1448.choosercontainer #chooseform .selected .typesummary {
1449 display: block;
1450}
f4143537 1451
536f0460
DW
1452.choosercontainer #chooseform .selected {
1453 background-color: #fff;
e119bf6f
FM
1454 margin-top: -1px;
1455 padding-top: 1px;
1456}
f4143537 1457
e119bf6f
FM
1458.chooserdialogue-course-modchooser .modicon .icon {
1459 width: 24px;
1460 height: 24px;
9d67a408 1461 font-size: 24px;
536f0460 1462}
ba252fca
FM
1463
1464@include media-breakpoint-down(xs) {
1465 .jsenabled .choosercontainer #chooseform .alloptions {
1466 max-width: 100%;
1467 }
f4143537 1468
ba252fca
FM
1469 .jsenabled .choosercontainer #chooseform .instruction,
1470 .jsenabled .choosercontainer #chooseform .typesummary {
f4143537 1471 position: static;
ba252fca
FM
1472 }
1473}
1474
536f0460
DW
1475/* Form element: listing */
1476.formlistingradio {
1477 padding-bottom: 25px;
1478 padding-right: 10px;
1479}
f4143537 1480
536f0460
DW
1481.formlistinginputradio {
1482 float: left;
1483}
f4143537 1484
536f0460
DW
1485.formlistingmain {
1486 min-height: 225px;
1487}
f4143537 1488
536f0460
DW
1489.formlisting {
1490 position: relative;
1491 margin: 15px 0;
1492 padding: 1px 19px 14px;
1493 background-color: white;
f4143537
DP
1494 border: 1px solid #ddd;
1495
536f0460
DW
1496 @include border-radius(4px);
1497}
f4143537 1498
536f0460
DW
1499.formlistingmore {
1500 position: absolute;
1501 cursor: pointer;
1502 bottom: -1px;
1503 right: -1px;
1504 padding: 3px 7px;
1505 font-size: 12px;
1506 font-weight: bold;
f4143537 1507 background-color: whitesmoke;
536f0460 1508 border: 1px solid #ddd;
f4143537
DP
1509 color: #9da0a4;
1510
536f0460
DW
1511 @include border-radius(4px 0 4px 0);
1512}
f4143537 1513
536f0460
DW
1514.formlistingall {
1515 margin: 15px 0;
1516 padding: 0;
f4143537 1517
536f0460
DW
1518 @include border-radius(4px);
1519}
f4143537 1520
536f0460
DW
1521.formlistingrow {
1522 cursor: pointer;
1523 border-bottom: 1px solid;
f4143537
DP
1524 border-color: #e1e1e8;
1525 border-left: 1px solid #e1e1e8;
1526 border-right: 1px solid #e1e1e8;
1527 background-color: #f7f7f9;
1528
536f0460
DW
1529 @include border-radius(0 0 4px 4px);
1530 padding: 6px;
1531 top: 50%;
1532 left: 50%;
1533 min-height: 34px;
1534 float: left;
1535 width: 150px;
1536}
f4143537 1537
536f0460
DW
1538body.jsenabled .formlistingradio {
1539 display: none;
1540}
f4143537 1541
536f0460
DW
1542body.jsenabled .formlisting {
1543 display: block;
1544}
1545
1546/* Badges styles */
1547table.collection {
1548 @extend .table;
1549 @extend .table-bordered;
1550 @extend .table-striped;
1551}
f4143537 1552
536f0460 1553a.criteria-action {
fde35b8f 1554 padding: 0 3px;
536f0460
DW
1555 float: right;
1556}
f4143537 1557
536f0460
DW
1558div.criteria-description {
1559 padding: 10px 15px;
fde35b8f 1560 margin: 5px 0;
536f0460 1561 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1562 border: 1px solid #eee;
536f0460 1563}
f4143537 1564
536f0460
DW
1565ul.badges {
1566 margin: 0;
1567 list-style: none;
1568}
f4143537 1569
536f0460
DW
1570.badges li {
1571 position: relative;
1572 display: inline-block;
1573 padding-top: 1em;
1574 text-align: center;
1575 vertical-align: top;
1576 width: 150px;
1577}
f4143537 1578
536f0460
DW
1579.badges li .badge-name {
1580 display: block;
1581 padding: 5px;
1582}
f4143537 1583
536f0460
DW
1584.badges li > img {
1585 position: absolute;
1586}
f4143537 1587
536f0460
DW
1588.badges li .badge-image {
1589 width: 100px;
1590 height: 100px;
1591 left: 10px;
fde35b8f 1592 top: 0;
536f0460
DW
1593 z-index: 1;
1594}
f4143537 1595
536f0460
DW
1596.badges li .badge-actions {
1597 position: relative;
1598}
f4143537 1599
536f0460
DW
1600.badges li .expireimage {
1601 width: 100px;
1602 height: 100px;
1603 left: 25px;
fde35b8f 1604 top: 0;
536f0460
DW
1605 position: absolute;
1606 z-index: 10;
1607 opacity: 0.85;
1608}
1609
1610#badge-image {
1611 background-color: transparent;
1612 padding: 0;
1613 position: relative;
1614 min-width: 100px;
1615 width: 20%;
1616 display: inline-block;
1617 vertical-align: top;
1618 margin-top: 17px;
ff54d94b 1619 margin-bottom: 20px;
536f0460
DW
1620
1621 .expireimage {
1622 width: 100px;
1623 height: 100px;
fde35b8f
DP
1624 left: 0;
1625 top: 0;
536f0460
DW
1626 opacity: 0.85;
1627 position: absolute;
f4143537 1628 z-index: 10;
536f0460
DW
1629 }
1630
1631 .singlebutton {
1632 padding-top: 5px;
ff54d94b 1633 display: block;
536f0460 1634
ff54d94b
SL
1635 button {
1636 margin-left: 4px;
536f0460
DW
1637 }
1638 }
1639}
f4143537 1640
536f0460
DW
1641#badge-details {
1642 display: inline-block;
1643 width: 79%;
1644}
1645
1646#badge-overview dl,
1647#badge-details dl {
1648 margin: 0;
1649
1650 dt,
1651 dd {
1652 vertical-align: top;
1653 padding: 3px 0;
1654 }
f4143537 1655
536f0460
DW
1656 dt {
1657 clear: both;
1658 display: inline-block;
1659 width: 20%;
1660 min-width: 100px;
1661 }
f4143537 1662
536f0460
DW
1663 dd {
1664 display: inline-block;
1665 width: 79%;
1666 margin-left: 1%;
1667 }
1668}
1669
1670.badge-profile {
1671 vertical-align: top;
1672}
f4143537 1673
536f0460
DW
1674.connected {
1675 @extend .text-success;
1676}
f4143537 1677
536f0460
DW
1678.notconnected {
1679 @extend .text-danger;
1680}
f4143537 1681
536f0460
DW
1682.connecting {
1683 @extend .text-warning;
1684}
f4143537 1685
536f0460
DW
1686#page-badges-award .recipienttable tr td {
1687 vertical-align: top;
1688}
f4143537 1689
536f0460
DW
1690#page-badges-award .recipienttable tr td.actions .actionbutton {
1691 margin: 0.3em 0;
1692 padding: 0.5em 0;
1693 width: 100%;
1694}
f4143537 1695
536f0460
DW
1696#page-badges-award .recipienttable tr td.existing,
1697#page-badges-award .recipienttable tr td.potential {
1698 width: 42%;
1699}
1700
1701#issued-badge-table .activatebadge {
1702 display: inline-block;
1703}
f4143537 1704
536f0460
DW
1705.statusbox.active {
1706 background-color: $state-success-bg;
1707}
f4143537 1708
536f0460
DW
1709.statusbox.inactive {
1710 background-color: $state-warning-bg;
1711}
f4143537 1712
536f0460
DW
1713.statusbox {
1714 text-align: center;
1715 margin-bottom: 5px;
1716 padding: 5px;
1717}
f4143537 1718
536f0460
DW
1719.statusbox .activatebadge {
1720 display: inline-block;
1721}
f4143537
DP
1722
1723.statusbox .activatebadge input[type=submit] {
536f0460
DW
1724 margin: 3px;
1725}
f4143537 1726
536f0460 1727.activatebadge {
fde35b8f 1728 margin: 0;
536f0460
DW
1729 text-align: left;
1730 vertical-align: middle;
1731}
f4143537 1732
536f0460
DW
1733img#persona_signin {
1734 cursor: pointer;
1735}
f4143537 1736
536f0460
DW
1737.addcourse {
1738 float: right;
1739}
f4143537 1740
536f0460
DW
1741.invisiblefieldset {
1742 display: inline;
536f0460
DW
1743 padding: 0;
1744 border-width: 0;
1745}
f4143537 1746
b71c82ad
FM
1747/** Page header */
1748#page-header {
1749 .logo {
1750 margin: $spacer 0;
7ad1d2da 1751 img {
0d5f5f73 1752 max-height: 75px;
7ad1d2da 1753 }
b71c82ad 1754 }
536f0460
DW
1755}
1756
ed0e21c0
BB
1757/** Navbar logo. */
1758nav.navbar .logo img {
1759 max-height: 35px;
5f18da12
FM
1760}
1761
536f0460
DW
1762/** Header-bar styles **/
1763.page-context-header {
1764 // We need to be explicit about the height of the header.
1765 $pageHeaderHeight: 140px;
1766
1767 // Do not remove these rules.
1768 overflow: hidden;
1769
1770 .page-header-image,
1771 .page-header-headings {
b167b415 1772 float: left;
536f0460
DW
1773 display: block;
1774 position: relative;
1775 }
f4143537 1776
536f0460 1777 .page-header-image {
536f0460
DW
1778 margin-right: 1em;
1779 margin-bottom: 1em;
1780 }
536f0460
DW
1781
1782 .page-header-headings,
1783 .header-button-group {
1784 position: relative;
1785 line-height: 24px;
1786 vertical-align: middle;
1787 }
1788
1789 .header-button-group {
1790 display: block;
1791 float: left;
f4143537 1792
536f0460
DW
1793 a {
1794 position: relative;
1795
1796 // Don't touch it unless you know exactly what you are doing.
1797 top: -0.4em;
1798 }
1799 }
1800}
1801
536f0460
DW
1802ul.dragdrop-keyboard-drag li {
1803 list-style-type: none;
1804}
1805
536f0460
DW
1806a.disabled:hover,
1807a.disabled {
1808 text-decoration: none;
1809 cursor: default;
1810 font-style: italic;
1811 color: #808080;
1812}
f4143537 1813
536f0460 1814body.lockscroll {
9cb41231
DP
1815 height: 100%;
1816 overflow: hidden;
536f0460
DW
1817}
1818
1819.progressbar_container {
1820 max-width: 500px;
1821 margin: 0 auto;
1822}
1823
1824/* IE10 only fix for calendar titling */
1825.ie10 .yui3-calendar-header-label {
1826 display: inline-block;
1827}
1828
1829dd:before,
1830dd:after {
9cb41231
DP
1831 display: block;
1832 content: " ";
536f0460 1833}
f4143537 1834
536f0460 1835dd:after {
9cb41231 1836 clear: both;
536f0460
DW
1837}
1838
1839// Active tabs with links should have a different
1840// cursor to indicate they are clickable.
1841.nav-tabs > .active > a[href],
1842.nav-tabs > .active > a[href]:hover,
1843.nav-tabs > .active > a[href]:focus {
1844 cursor: pointer;
1845}
1846
1847.inplaceeditable {
536f0460
DW
1848 &.inplaceeditingon {
1849 position: relative;
1850
1851 .editinstructions {
1852 margin-top: -30px;
1853 font-weight: normal;
1854 margin-right: 0;
1855 margin-left: 0;
1856 left: 0;
1857 right: auto;
1858 white-space: nowrap;
1859 }
1860
1861 input {
1862 width: 330px;
536f0460
DW
1863 vertical-align: text-bottom;
1864 margin-bottom: 0;
1865 }
1866
1867 select {
1868 margin-bottom: 0;
1869 }
1870 }
1871
1872 .quickediticon img {
1873 opacity: 0.2;
1874 }
1875
1876 .quickeditlink {
1877 color: inherit;
1878 text-decoration: inherit;
1879 }
1880
1881 &:hover .quickeditlink .quickediticon img,
1882 .quickeditlink:focus .quickediticon img {
1883 opacity: 1;
1884 }
1885
1886 &.inplaceeditable-toggle .quickediticon {
1887 display: none;
1888 }
fb5bbf14
AN
1889
1890 &.inplaceeditable-autocomplete {
1891 display: block;
1892 }
536f0460
DW
1893}
1894
1895h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1896 margin-top: -20px;
1897}
89d9895b
FM
1898
1899/** Chart area. */
1900.chart-area {
1901
1902 .chart-table-data {
1903 display: none;
1904 }
1905
1906 .chart-table {
1907 .chart-output-htmltable caption {
1908 white-space: nowrap;
1909 }
1910 /** When accessible, we display the table only. */
1911 &.accesshide {
1912 .chart-table-expand {
1913 display: none;
1914 }
1915 .chart-table-data {
1916 display: block;
1917 }
1918 }
1919 }
1920}
1921
536f0460
DW
1922// Reset for ul.
1923ul {
1924 padding-left: 1rem;
1925}
b843914d
FM
1926
1927/* YUI 2 Tree View */
1928/*rtl:raw:
1929.ygtvtn,
1930.ygtvtm,
1931.ygtvtmh,
1932.ygtvtmhh,
1933.ygtvtp,
1934.ygtvtph,
1935.ygtvtphh,
1936.ygtvln,
1937.ygtvlm,
1938.ygtvlmh,
1939.ygtvlmhh,
1940.ygtvlp,
1941.ygtvlph,
1942.ygtvlphh,
1943.ygtvdepthcell,
1944.ygtvok,
1945.ygtvok:hover,
1946.ygtvcancel,
1947.ygtvcancel:hover {
1948 background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1949}
1950*/
963ba889
RW
1951
1952.hover-tooltip-container {
1953 position: relative;
1954
1955 .hover-tooltip {
1956 opacity: 0;
1957 visibility: hidden;
1958 position: absolute;
1fb687ea 1959 /*rtl:ignore*/
963ba889
RW
1960 left: 50%;
1961 top: calc(-50% - 5px);
1962 transform: translate(-50%, -50%);
1963 background-color: #fff;
1964 border: 1px solid rgba(0, 0, 0, .2);
1965 border-radius: .3rem;
1966 box-sizing: border-box;
1967 padding: 5px;
1968 white-space: nowrap;
1969 transition: opacity 0.15s, visibility 0.15s;
1970 z-index: 1000;
1971
1972 &:before {
1973 content: '';
1974 display: inline-block;
1975 border-left: 8px solid transparent;
1976 border-right: 8px solid transparent;
1977 border-top: 8px solid rgba(0, 0, 0, .2);
1978 position: absolute;
1979 bottom: -8px;
1980 left: calc(50% - 8px);
1981 }
1982
1983 &:after {
1984 content: '';
1985 display: inline-block;
1986 border-left: 7px solid transparent;
1987 border-right: 7px solid transparent;
1988 border-top: 7px solid #fff;
1989 position: absolute;
1990 bottom: -6px;
1991 left: calc(50% - 7px);
1992 z-index: 2;
1993 }
1994 }
1995
1996 &:hover {
1997 .hover-tooltip {
1998 opacity: 1;
1999 visibility: visible;
2000 transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2001 }
2002 }
2003}
99061152
DW
2004
2005#region-flat-nav {
2006 padding-right: 0;
2007 padding-left: 0;
2008 .nav {
2009 margin-right: $grid-gutter-width / 2;
2010 background-color: $card-bg;
2011 }
2012 @include media-breakpoint-down(sm) {
2013 .nav {
2014 margin-top: $grid-gutter-width;
2015 margin-right: 0;
2016 }
2017 }
2018}
b45fdc68 2019
2fd7cdbe
JO
2020// Footer link colour was added to allow the colour of footer links to be changed,
2021// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2022// rather than being specific to the footer. This is kept for backwards compatibility.
2023$footer-link-color: $bg-inverse-link-color !default;
b45fdc68
DW
2024#page-footer a {
2025 color: $footer-link-color;
2fd7cdbe
JO
2026 text-decoration: underline;
2027 .icon {
2028 color: $footer-link-color;
2029 }
2030}
2031
2032.bg-inverse a {
2033 color: $bg-inverse-link-color;
2034 text-decoration: underline;
2035 .icon {
2036 color: $bg-inverse-link-color;
2037 }
b45fdc68 2038}
70fda55e 2039
15de9ec8
LB
2040.sitelink {
2041 img {
2042 width: 112px;
2043 }
2044}
2045
70fda55e
DW
2046// Make links in a menu clickable anywhere in the row.
2047.dropdown-item a {
2048 display: block;
2049 width: 100%;
2050 color: $body-color;
2051}
6e79ea58 2052
207136f2
DW
2053.competency-tree {
2054 ul {
2055 padding-left: 1.5rem;
2056 }
2057}
24299774 2058
4b80e95c
NK
2059.sr-only-focusable {
2060 &:active,
2061 &:focus {
2062 z-index: $zindex-navbar-fixed + 1;
2063 position: fixed;
2064 background: #fff;
2065 padding: 7px;
2066 left: 0;
2067 top: 0;
2068 }
2069}
5ca142dc
RW
2070
2071[data-drag-type="move"] {
2072 cursor: move;
2073}
f6e8cc83
RW
2074
2075.clickable {
2076 cursor: pointer;
2077}
63cb267c
SL
2078
2079.overlay-icon-container {
2080 position: absolute;
2081 top: 0;
2082 left: 0;
2083 width: 100%;
2084 height: 100%;
2085 background-color: rgba(255, 255, 255, 0.6);
2086
2087 .loading-icon {
2088 position: absolute;
2089 top: 50%;
2090 left: 50%;
2091 transform: translate(-50%, -50%);
2092
2093 .icon {
99df0518
RW
2094 height: 30px;
2095 width: 30px;
2096 font-size: 30px;
63cb267c
SL
2097 }
2098 }
2099}
3ec69c2e 2100
7b87d98d 2101.open.atto_menu > .dropdown-menu {
3ec69c2e
BB
2102 display: block;
2103}
1b217025
BB
2104div.editor_atto_toolbar button .icon {
2105 color: $gray-700;
2106}
2107.w-auto {
2108 width: auto;
2109}
2110
edd7fa33
RW
2111.bg-pulse-grey {
2112 animation: bg-pulse-grey 2s infinite linear;
2113}
2114
2115@keyframes bg-pulse-grey {
2116 0% {
2117 background-color: $gray-100;
2118 }
2119 50% {
2120 background-color: darken($gray-100, 5%);
2121 }
2122 100% {
2123 background-color: $gray-100;
2124 }
2125}
2126
2d41f5b2
RW
2127@each $size, $length in $spacers {
2128 .line-height-#{$size} {
2129 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2130 }
296ff0a7
RW
2131}
2132
2133.dir-rtl {
2134 .dir-rtl-hide {
2135 display: none;
2136 }
2137}
2138
2139.dir-ltr {
2140 .dir-ltr-hide {
2141 display: none;
2142 }
970bb713 2143}