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