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