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