MDL-68076 core: Introduced \core\notification::cta()
[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
1640.modchoosercontainer.noscroll {
1641 overflow-y: hidden;
1642}
1643
95dceedd
PD
1644.modchooser .searchcontainer .searchbar .input-group-append {
1645 align-items: center;
f152b71d 1646
95dceedd
PD
1647 i {
1648 color: #868e96;
1649 margin: 0;
1650 vertical-align: middle;
b15b2596
MG
1651 font-size: 20px;
1652 height: 20px;
1653 width: 20px;
f152b71d
MG
1654 }
1655}
1656
1657.modchoosercontainer .optionscontainer,
1658.modchoosercontainer .searchresultitemscontainer {
05b27f21
MM
1659 overflow-x: hidden;
1660 .option {
5fe7bcdb
BB
1661 // 2 items per line.
1662 flex-basis: calc(50% - 0.5rem);
05b27f21
MM
1663 .optionactions {
1664 .optionaction {
1665 cursor: pointer;
05b27f21
MM
1666 color: $gray-600;
1667 i {
1668 margin: 0;
1669 }
1670 }
1671 }
1672 .optioninfo {
1673 a {
1674 color: $gray-700;
1675 &:hover {
1676 text-decoration: none;
1677 }
05b27f21
MM
1678 }
1679 }
1680 }
1681}
1682
1683.modchooser .modal-body .optionsummary {
1684 background-color: $white;
1685 overflow-x: hidden;
1686 overflow-y: auto;
f2d033a2 1687 min-height: 640px;
05b27f21
MM
1688
1689 .content {
1690 overflow-y: auto;
1691 .heading {
1692 .icon {
1693 height: 32px;
1694 width: 32px;
1695 font-size: 32px;
1696 padding: 0;
1697 }
1698 }
1699 }
1700
1701 .actions {
1702 border-top: 1px solid $gray-300;
1703 background: $white;
1704 }
1705}
1706
05b27f21
MM
1707@include media-breakpoint-down(xs) {
1708 .path-course-view .modal-dialog.modal-lg,
1709 .path-course-view .modal-content,
1710 .modchooser .modal-body,
1711 .modchooser .modal-body .carousel,
1712 .modchooser .modal-body .carousel-inner,
1713 .modchooser .modal-body .carousel-item,
1714 .modchooser .modal-body .optionsummary,
1715 .modchoosercontainer,
f152b71d
MG
1716 .optionscontainer,
1717 .searchresultitemscontainer {
5fe7bcdb 1718 min-height: auto;
05b27f21 1719 height: 100%;
5fe7bcdb 1720 overflow-y: auto;
05b27f21
MM
1721 }
1722 .path-course-view .modal-dialog.modal-lg {
1723 margin: 0;
1724 }
5fe7bcdb
BB
1725 .modchooser .modal-body .searchresultitemscontainer-wrapper {
1726 min-height: auto;
1727 }
1728}
1729
1730@include media-breakpoint-up(sm) {
1731 .modchoosercontainer .optionscontainer .option,
1732 .modchoosercontainer .searchresultitemscontainer .option {
1733 // Three items per line.
1734 flex-basis: calc(33.33% - 0.5rem);
1735 }
1736}
1737
1738@include media-breakpoint-up(lg) {
f152b71d
MG
1739 .modchoosercontainer .optionscontainer .option,
1740 .modchoosercontainer .searchresultitemscontainer .option {
5fe7bcdb
BB
1741 // Six items per line.
1742 flex-basis: calc(16.66% - 0.5rem);
05b27f21
MM
1743 }
1744}
1745
536f0460
DW
1746/* Form element: listing */
1747.formlistingradio {
1748 padding-bottom: 25px;
1749 padding-right: 10px;
1750}
f4143537 1751
536f0460
DW
1752.formlistinginputradio {
1753 float: left;
1754}
f4143537 1755
536f0460
DW
1756.formlistingmain {
1757 min-height: 225px;
1758}
f4143537 1759
536f0460
DW
1760.formlisting {
1761 position: relative;
1762 margin: 15px 0;
1763 padding: 1px 19px 14px;
1764 background-color: white;
f4143537
DP
1765 border: 1px solid #ddd;
1766
536f0460
DW
1767 @include border-radius(4px);
1768}
f4143537 1769
536f0460
DW
1770.formlistingmore {
1771 position: absolute;
1772 cursor: pointer;
1773 bottom: -1px;
1774 right: -1px;
1775 padding: 3px 7px;
1776 font-size: 12px;
1777 font-weight: bold;
f4143537 1778 background-color: whitesmoke;
536f0460 1779 border: 1px solid #ddd;
f4143537
DP
1780 color: #9da0a4;
1781
536f0460
DW
1782 @include border-radius(4px 0 4px 0);
1783}
f4143537 1784
536f0460
DW
1785.formlistingall {
1786 margin: 15px 0;
1787 padding: 0;
f4143537 1788
536f0460
DW
1789 @include border-radius(4px);
1790}
f4143537 1791
536f0460
DW
1792.formlistingrow {
1793 cursor: pointer;
1794 border-bottom: 1px solid;
f4143537
DP
1795 border-color: #e1e1e8;
1796 border-left: 1px solid #e1e1e8;
1797 border-right: 1px solid #e1e1e8;
1798 background-color: #f7f7f9;
1799
536f0460
DW
1800 @include border-radius(0 0 4px 4px);
1801 padding: 6px;
1802 top: 50%;
1803 left: 50%;
1804 min-height: 34px;
1805 float: left;
1806 width: 150px;
1807}
f4143537 1808
536f0460
DW
1809body.jsenabled .formlistingradio {
1810 display: none;
1811}
f4143537 1812
536f0460
DW
1813body.jsenabled .formlisting {
1814 display: block;
1815}
1816
536f0460 1817a.criteria-action {
fde35b8f 1818 padding: 0 3px;
536f0460
DW
1819 float: right;
1820}
f4143537 1821
536f0460
DW
1822div.criteria-description {
1823 padding: 10px 15px;
fde35b8f 1824 margin: 5px 0;
536f0460 1825 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1826 border: 1px solid #eee;
536f0460 1827}
f4143537 1828
536f0460
DW
1829ul.badges {
1830 margin: 0;
1831 list-style: none;
1832}
f4143537 1833
536f0460
DW
1834.badges li {
1835 position: relative;
1836 display: inline-block;
1837 padding-top: 1em;
1838 text-align: center;
1839 vertical-align: top;
1840 width: 150px;
1841}
f4143537 1842
536f0460
DW
1843.badges li .badge-name {
1844 display: block;
1845 padding: 5px;
1846}
f4143537 1847
536f0460
DW
1848.badges li > img {
1849 position: absolute;
1850}
f4143537 1851
536f0460
DW
1852.badges li .badge-image {
1853 width: 100px;
1854 height: 100px;
1855 left: 10px;
fde35b8f 1856 top: 0;
536f0460
DW
1857 z-index: 1;
1858}
f4143537 1859
536f0460
DW
1860.badges li .badge-actions {
1861 position: relative;
1862}
f4143537 1863
536f0460
DW
1864.badges li .expireimage {
1865 width: 100px;
1866 height: 100px;
1867 left: 25px;
fde35b8f 1868 top: 0;
536f0460
DW
1869 position: absolute;
1870 z-index: 10;
1871 opacity: 0.85;
1872}
1873
1874#badge-image {
1875 background-color: transparent;
1876 padding: 0;
1877 position: relative;
1878 min-width: 100px;
1879 width: 20%;
1880 display: inline-block;
1881 vertical-align: top;
1882 margin-top: 17px;
ff54d94b 1883 margin-bottom: 20px;
536f0460
DW
1884
1885 .expireimage {
1886 width: 100px;
1887 height: 100px;
fde35b8f
DP
1888 left: 0;
1889 top: 0;
536f0460
DW
1890 opacity: 0.85;
1891 position: absolute;
f4143537 1892 z-index: 10;
536f0460
DW
1893 }
1894
1895 .singlebutton {
1896 padding-top: 5px;
ff54d94b 1897 display: block;
536f0460 1898
ff54d94b
SL
1899 button {
1900 margin-left: 4px;
536f0460
DW
1901 }
1902 }
1903}
f4143537 1904
536f0460
DW
1905#badge-details {
1906 display: inline-block;
1907 width: 79%;
1908}
1909
1910#badge-overview dl,
1911#badge-details dl {
1912 margin: 0;
1913
1914 dt,
1915 dd {
1916 vertical-align: top;
1917 padding: 3px 0;
1918 }
f4143537 1919
536f0460
DW
1920 dt {
1921 clear: both;
1922 display: inline-block;
1923 width: 20%;
1924 min-width: 100px;
1925 }
f4143537 1926
536f0460
DW
1927 dd {
1928 display: inline-block;
1929 width: 79%;
1930 margin-left: 1%;
1931 }
1932}
1933
1934.badge-profile {
1935 vertical-align: top;
1936}
f4143537 1937
536f0460 1938.connected {
43817397 1939 color: map-get($theme-colors, 'success');
536f0460 1940}
f4143537 1941
536f0460 1942.notconnected {
43817397 1943 color: map-get($theme-colors, 'danger');
536f0460 1944}
f4143537 1945
536f0460 1946.connecting {
43817397 1947 color: map-get($theme-colors, 'warning');
536f0460 1948}
f4143537 1949
536f0460
DW
1950#page-badges-award .recipienttable tr td {
1951 vertical-align: top;
1952}
f4143537 1953
536f0460
DW
1954#page-badges-award .recipienttable tr td.actions .actionbutton {
1955 margin: 0.3em 0;
1956 padding: 0.5em 0;
1957 width: 100%;
1958}
f4143537 1959
536f0460
DW
1960#page-badges-award .recipienttable tr td.existing,
1961#page-badges-award .recipienttable tr td.potential {
1962 width: 42%;
1963}
1964
1965#issued-badge-table .activatebadge {
1966 display: inline-block;
1967}
f4143537 1968
536f0460
DW
1969.statusbox.active {
1970 background-color: $state-success-bg;
1971}
f4143537 1972
536f0460
DW
1973.statusbox.inactive {
1974 background-color: $state-warning-bg;
1975}
f4143537 1976
536f0460
DW
1977.statusbox {
1978 text-align: center;
1979 margin-bottom: 5px;
1980 padding: 5px;
1981}
f4143537 1982
536f0460
DW
1983.statusbox .activatebadge {
1984 display: inline-block;
1985}
f4143537
DP
1986
1987.statusbox .activatebadge input[type=submit] {
536f0460
DW
1988 margin: 3px;
1989}
f4143537 1990
536f0460 1991.activatebadge {
fde35b8f 1992 margin: 0;
536f0460
DW
1993 text-align: left;
1994 vertical-align: middle;
1995}
f4143537 1996
536f0460
DW
1997img#persona_signin {
1998 cursor: pointer;
1999}
f4143537 2000
536f0460
DW
2001.addcourse {
2002 float: right;
2003}
f4143537 2004
536f0460
DW
2005.invisiblefieldset {
2006 display: inline;
536f0460
DW
2007 padding: 0;
2008 border-width: 0;
2009}
f4143537 2010
b71c82ad
FM
2011/** Page header */
2012#page-header {
2013 .logo {
2014 margin: $spacer 0;
7ad1d2da 2015 img {
0d5f5f73 2016 max-height: 75px;
7ad1d2da 2017 }
b71c82ad 2018 }
536f0460
DW
2019}
2020
ed0e21c0
BB
2021/** Navbar logo. */
2022nav.navbar .logo img {
2023 max-height: 35px;
5f18da12
FM
2024}
2025
536f0460
DW
2026/** Header-bar styles **/
2027.page-context-header {
2028 // We need to be explicit about the height of the header.
2029 $pageHeaderHeight: 140px;
2030
2031 // Do not remove these rules.
2032 overflow: hidden;
91de0ed8 2033 padding: 0.25rem;
536f0460
DW
2034
2035 .page-header-image,
2036 .page-header-headings {
b167b415 2037 float: left;
536f0460
DW
2038 display: block;
2039 position: relative;
2040 }
f4143537 2041
536f0460 2042 .page-header-image {
536f0460
DW
2043 margin-right: 1em;
2044 margin-bottom: 1em;
91de0ed8
BB
2045 & > a {
2046 display: inline-block;
2047 }
536f0460 2048 }
536f0460
DW
2049
2050 .page-header-headings,
2051 .header-button-group {
2052 position: relative;
2053 line-height: 24px;
2054 vertical-align: middle;
2055 }
2056
2057 .header-button-group {
2058 display: block;
2059 float: left;
536f0460
DW
2060 }
2061}
2062
536f0460
DW
2063ul.dragdrop-keyboard-drag li {
2064 list-style-type: none;
2065}
2066
536f0460
DW
2067a.disabled:hover,
2068a.disabled {
2069 text-decoration: none;
2070 cursor: default;
2071 font-style: italic;
2072 color: #808080;
2073}
f4143537 2074
536f0460 2075body.lockscroll {
9cb41231
DP
2076 height: 100%;
2077 overflow: hidden;
536f0460
DW
2078}
2079
2080.progressbar_container {
2081 max-width: 500px;
2082 margin: 0 auto;
2083}
2084
2085/* IE10 only fix for calendar titling */
2086.ie10 .yui3-calendar-header-label {
2087 display: inline-block;
2088}
2089
2090dd:before,
2091dd:after {
9cb41231
DP
2092 display: block;
2093 content: " ";
536f0460 2094}
f4143537 2095
536f0460 2096dd:after {
9cb41231 2097 clear: both;
536f0460
DW
2098}
2099
2100// Active tabs with links should have a different
2101// cursor to indicate they are clickable.
2102.nav-tabs > .active > a[href],
2103.nav-tabs > .active > a[href]:hover,
2104.nav-tabs > .active > a[href]:focus {
2105 cursor: pointer;
2106}
2107
2108.inplaceeditable {
536f0460
DW
2109 &.inplaceeditingon {
2110 position: relative;
2111
2112 .editinstructions {
2113 margin-top: -30px;
2114 font-weight: normal;
2115 margin-right: 0;
2116 margin-left: 0;
2117 left: 0;
2118 right: auto;
2119 white-space: nowrap;
2120 }
92bc86e4
BB
2121 @include media-breakpoint-up(sm) {
2122 input {
2123 width: 330px;
2124 vertical-align: text-bottom;
2125 margin-bottom: 0;
2126 }
536f0460
DW
2127 }
2128
2129 select {
2130 margin-bottom: 0;
2131 }
2132 }
2133
2134 .quickediticon img {
2135 opacity: 0.2;
2136 }
2137
2138 .quickeditlink {
2139 color: inherit;
2140 text-decoration: inherit;
2141 }
2142
2143 &:hover .quickeditlink .quickediticon img,
2144 .quickeditlink:focus .quickediticon img {
2145 opacity: 1;
2146 }
2147
2148 &.inplaceeditable-toggle .quickediticon {
2149 display: none;
2150 }
fb5bbf14
AN
2151
2152 &.inplaceeditable-autocomplete {
2153 display: block;
2154 }
536f0460
DW
2155}
2156
2157h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2158 margin-top: -20px;
2159}
89d9895b
FM
2160
2161/** Chart area. */
2162.chart-area {
2163
2164 .chart-table-data {
2165 display: none;
2166 }
2167
2168 .chart-table {
2169 .chart-output-htmltable caption {
2170 white-space: nowrap;
2171 }
2172 /** When accessible, we display the table only. */
2173 &.accesshide {
2174 .chart-table-expand {
2175 display: none;
2176 }
2177 .chart-table-data {
2178 display: block;
2179 }
2180 }
2181 }
2182}
2183
536f0460
DW
2184// Reset for ul.
2185ul {
2186 padding-left: 1rem;
2187}
b843914d
FM
2188
2189/* YUI 2 Tree View */
2190/*rtl:raw:
2191.ygtvtn,
2192.ygtvtm,
2193.ygtvtmh,
2194.ygtvtmhh,
2195.ygtvtp,
2196.ygtvtph,
2197.ygtvtphh,
2198.ygtvln,
2199.ygtvlm,
2200.ygtvlmh,
2201.ygtvlmhh,
2202.ygtvlp,
2203.ygtvlph,
2204.ygtvlphh,
2205.ygtvdepthcell,
2206.ygtvok,
2207.ygtvok:hover,
2208.ygtvcancel,
2209.ygtvcancel:hover {
2210 background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2211}
2212*/
963ba889
RW
2213
2214.hover-tooltip-container {
2215 position: relative;
2216
2217 .hover-tooltip {
2218 opacity: 0;
2219 visibility: hidden;
2220 position: absolute;
1fb687ea 2221 /*rtl:ignore*/
963ba889
RW
2222 left: 50%;
2223 top: calc(-50% - 5px);
2224 transform: translate(-50%, -50%);
2225 background-color: #fff;
2226 border: 1px solid rgba(0, 0, 0, .2);
2227 border-radius: .3rem;
2228 box-sizing: border-box;
2229 padding: 5px;
2230 white-space: nowrap;
2231 transition: opacity 0.15s, visibility 0.15s;
2232 z-index: 1000;
2233
2234 &:before {
2235 content: '';
2236 display: inline-block;
2237 border-left: 8px solid transparent;
2238 border-right: 8px solid transparent;
2239 border-top: 8px solid rgba(0, 0, 0, .2);
2240 position: absolute;
2241 bottom: -8px;
2242 left: calc(50% - 8px);
2243 }
2244
2245 &:after {
2246 content: '';
2247 display: inline-block;
2248 border-left: 7px solid transparent;
2249 border-right: 7px solid transparent;
2250 border-top: 7px solid #fff;
2251 position: absolute;
2252 bottom: -6px;
2253 left: calc(50% - 7px);
2254 z-index: 2;
2255 }
2256 }
2257
2258 &:hover {
2259 .hover-tooltip {
2260 opacity: 1;
2261 visibility: visible;
2262 transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2263 }
2264 }
2265}
99061152
DW
2266
2267#region-flat-nav {
2268 padding-right: 0;
2269 padding-left: 0;
2270 .nav {
2271 margin-right: $grid-gutter-width / 2;
2272 background-color: $card-bg;
2273 }
2274 @include media-breakpoint-down(sm) {
2275 .nav {
2276 margin-top: $grid-gutter-width;
2277 margin-right: 0;
2278 }
2279 }
2280}
b45fdc68 2281
2fd7cdbe
JO
2282// Footer link colour was added to allow the colour of footer links to be changed,
2283// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2284// rather than being specific to the footer. This is kept for backwards compatibility.
2285$footer-link-color: $bg-inverse-link-color !default;
b45fdc68
DW
2286#page-footer a {
2287 color: $footer-link-color;
2fd7cdbe
JO
2288 text-decoration: underline;
2289 .icon {
2290 color: $footer-link-color;
2291 }
91de0ed8
BB
2292 &:focus .icon {
2293 color: $body-color;
2294 }
2fd7cdbe
JO
2295}
2296
2297.bg-inverse a {
2298 color: $bg-inverse-link-color;
2299 text-decoration: underline;
2300 .icon {
2301 color: $bg-inverse-link-color;
2302 }
b45fdc68 2303}
70fda55e 2304
15de9ec8
LB
2305.sitelink {
2306 img {
2307 width: 112px;
2308 }
2309}
2310
70fda55e
DW
2311// Make links in a menu clickable anywhere in the row.
2312.dropdown-item a {
2313 display: block;
2314 width: 100%;
2315 color: $body-color;
2316}
20e6ece8
DW
2317.dropdown-item:active a {
2318 color: $dropdown-link-active-color;
2319}
6e79ea58 2320
207136f2
DW
2321.competency-tree {
2322 ul {
2323 padding-left: 1.5rem;
2324 }
2325}
24299774 2326
4b80e95c
NK
2327.sr-only-focusable {
2328 &:active,
2329 &:focus {
2330 z-index: $zindex-navbar-fixed + 1;
2331 position: fixed;
2332 background: #fff;
2333 padding: 7px;
2334 left: 0;
2335 top: 0;
2336 }
2337}
5ca142dc
RW
2338
2339[data-drag-type="move"] {
2340 cursor: move;
f7d1a24e 2341 touch-action: none;
5ca142dc 2342}
f6e8cc83
RW
2343
2344.clickable {
2345 cursor: pointer;
2346}
63cb267c
SL
2347
2348.overlay-icon-container {
2349 position: absolute;
2350 top: 0;
2351 left: 0;
2352 width: 100%;
2353 height: 100%;
2354 background-color: rgba(255, 255, 255, 0.6);
2355
2356 .loading-icon {
2357 position: absolute;
2358 top: 50%;
2359 left: 50%;
2360 transform: translate(-50%, -50%);
2361
2362 .icon {
99df0518
RW
2363 height: 30px;
2364 width: 30px;
2365 font-size: 30px;
63cb267c
SL
2366 }
2367 }
2368}
3ec69c2e 2369
7b87d98d 2370.open.atto_menu > .dropdown-menu {
3ec69c2e
BB
2371 display: block;
2372}
1b217025
BB
2373div.editor_atto_toolbar button .icon {
2374 color: $gray-700;
2375}
2376.w-auto {
2377 width: auto;
2378}
2379
edd7fa33
RW
2380.bg-pulse-grey {
2381 animation: bg-pulse-grey 2s infinite linear;
2382}
2383
2384@keyframes bg-pulse-grey {
2385 0% {
2386 background-color: $gray-100;
2387 }
2388 50% {
2389 background-color: darken($gray-100, 5%);
2390 }
2391 100% {
2392 background-color: $gray-100;
2393 }
2394}
2395
2d41f5b2
RW
2396@each $size, $length in $spacers {
2397 .line-height-#{$size} {
2398 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2399 }
296ff0a7
RW
2400}
2401
2402.dir-rtl {
2403 .dir-rtl-hide {
2404 display: none;
2405 }
2406}
2407
2408.dir-ltr {
2409 .dir-ltr-hide {
2410 display: none;
2411 }
970bb713 2412}
a69193fa 2413
356bfb69
BB
2414.paged-content-page-container {
2415 min-height: 3.125rem;
2416}
c483a8ee 2417
35221a2e 2418body.h5p-embed {
5092133b
BB
2419 #page-content {
2420 display: inherit;
2421 }
35221a2e
SA
2422 #maincontent {
2423 display: none;
2424 }
2425 .h5pmessages {
2426 min-height: 230px; // This should be the same height as default core_h5p iframes.
2427 }
2428}
2429
c483a8ee
RW
2430.text-decoration-none {
2431 text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
12d23810
RW
2432}
2433
b53f15b1
RW
2434.colour-inherit {
2435 color: inherit !important; /* stylelint-disable-line declaration-no-important */
2436}
2437
12d23810
RW
2438.position-right {
2439 right: 0 !important; /* stylelint-disable-line declaration-no-important */
20e6ece8 2440}
3edde4fb
RW
2441
2442.overflow-hidden {
2443 overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2444}
48507e16
BB
2445
2446.text-break {
2447 overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2448}
c516fc11
BB
2449
2450.z-index-1 {
2451 z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2452}
10425e73
BB
2453
2454// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2455.float-left {
2456 float: left !important; /* stylelint-disable-line declaration-no-important */
2457}
2458.float-right {
2459 float: right !important; /* stylelint-disable-line declaration-no-important */
2460}
db65ba45 2461
ac00aec2
BB
2462.clamp-2 {
2463 display: -webkit-box;
2464 -webkit-box-orient: vertical;
2465 -webkit-line-clamp: 2;
2466 overflow: hidden;
2467}
2468
2469.word-break-all {
2470 word-break: break-all;
2471}
2472
f9b6849b
SA
2473.matchtext {
2474 background-color: lighten($primary, 40%);
2475 color: $body-color;
2476 height: 1.5rem;
2477}
2478
6881ca38
BB
2479.border-radius {
2480 @if $enable-rounded {
2481 @include border-radius($card-border-radius);
2482 }
2483}
2484
db65ba45
RW
2485// Emoji picker.
2486$picker-width: 350px !default;
2487$picker-width-xs: 320px !default;
2488$picker-height: 400px !default;
2489$picker-row-height: 40px !default;
2490$picker-emoji-button-size: 40px !default;
2491$picker-emoji-button-font-size: 24px !default;
2492$picker-emoji-category-count: 9 !default;
2493$picker-emojis-per-row: 7 !default;
2494
2495.emoji-picker {
2496 width: $picker-width;
2497 height: $picker-height;
2498
2499 .category-button {
2500 padding: .375rem 0;
2501 height: 100%;
2502 width: $picker-width / $picker-emoji-category-count;
2503 border-top: none;
2504 border-left: none;
2505 border-right: none;
2506 border-bottom: 2px solid transparent;
2507
2508 &.selected {
2509 border-bottom: 2px solid map-get($theme-colors, 'primary');
2510 }
2511 }
2512
2513 .emojis-container,
2514 .search-results-container {
2515 min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2516 }
2517
2518 .picker-row {
2519 height: $picker-row-height;
2520
2521 .category-name {
2522 line-height: $picker-row-height;
2523 }
2524
2525 .emoji-button {
2526 height: $picker-emoji-button-size;
2527 width: $picker-emoji-button-size;
2528 line-height: $picker-emoji-button-size;
2529 font-size: $picker-emoji-button-font-size;
2530 overflow: hidden;
2531
2532 @include hover-focus {
2533 color: inherit;
2534 text-decoration: none;
2535 }
2536 }
2537 }
2538
2539 .emoji-preview {
2540 height: $picker-row-height;
2541 font-size: $picker-row-height;
2542 line-height: $picker-row-height;
2543 }
2544
2545 .emoji-short-name {
2546 line-height: $picker-row-height / 2;
2547 }
2548
2549 @include media-breakpoint-down(xs) {
2550 width: $picker-width-xs;
2551 }
2552}
75962db9
RW
2553
2554.emoji-auto-complete {
2555 height: $picker-row-height;
2556
2557 .btn.btn-link.btn-icon.emoji-button {
2558 height: $picker-emoji-button-size;
2559 width: $picker-emoji-button-size;
2560 line-height: $picker-emoji-button-size;
2561 font-size: $picker-emoji-button-font-size;
2562
2563 &.active {
2564 background-color: $gray-200;
2565 }
2566 }
2567}
224ea04e
AN
2568
2569.toast-wrapper {
2570 max-width: $toast-max-width;
4e796e22 2571 max-height: 0;
224ea04e
AN
2572 // Place these above any modals and other elements.
2573 z-index: 1051;
4d440943
AN
2574
2575 > :first-child {
2576 margin-top: $spacer;
2577 }
224ea04e 2578}
1a17df08
BB
2579
2580@each $color, $value in $theme-colors {
2581 .alert-#{$color} a {
2582 color: darken(theme-color-level($color, $alert-color-level), 10%);
2583 }
2584}
92bc86e4
BB
2585
2586@include media-breakpoint-down(sm) {
2587 #page-navbar {
2588 width: 100%;
2589 }
2590
2591 .breadcrumb:not(:empty) {
2592 width: 100%;
2593 border: ($border-width * 2) solid $gray-200;
2594 padding: $spacer / 4;
2595 margin-bottom: $spacer / 2;
2596 .breadcrumb-item {
2597 padding-top: $spacer / 3;
2598 padding-bottom: $spacer / 3;
2599 display: inline-block;
2600 }
2601 }
2602
2603 .mform {
2604 width: 100%;
2605 padding-right: 15px;
2606 padding-left: 15px;
2607 }
2608 .pagination {
2609 flex-wrap: wrap;
2610 justify-content: center;
2611 }
2612 .custom-select {
2613 max-width: 100%;
2614 }
2615 .card .card-body {
2616 padding: $card-spacer-x / 2;
2617 }
2618 #page-header {
2619 .card {
2620 border: 0;
2621 .card-body {
2622 padding: 0;
2623 }
2624 }
2625 }
2626 .nav-tabs,
2627 .nav-pills {
2628 margin: 0;
2629 border: 0;
2630 padding: $spacer / 8;
2631 background-color: $gray-200;
2632 .nav-item {
2633 flex: 1 1 auto;
2634 text-align: center;
2635 }
2636 .nav-link {
2637 background: $white;
2638 border: 0;
2639 margin: $spacer / 8;
2640 &.active {
2641 @include button-outline-variant($gray-600);
2642 border-color: $gray-600;
2643 }
2644 }
2645 }
2646}
2647
2648@media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2649 div#page {
2650 margin-top: 0;
2651 }
2652 .navbar.fixed-top {
2653 position: relative;
2654 z-index: inherit;
2655 }
3fecf7b5
SR
2656}
2657
2658.link-underline {
2659 text-decoration: underline;
2660 &:focus {
2661 text-decoration: none;
2662 }
2663}
2664
2665.alert.cta {
2666 .icon {
2667 padding: 0.3rem;
2668 &.fa {
2669 border-radius: 50%;
2670 border-style: solid;
2671 border-width: 0.125rem;
2672 }
2673 }
2674}