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