weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / message.scss
CommitLineData
963ba889
RW
1/** The message area **/
2@mixin setSelectedContact() {
3 background-color: #4f94cd;
4 color: #fff;
5 border: none;
6
7 .information {
8 .lastmessage {
9 color: #fff;
10 }
11 }
12 .picture {
13 border: none;
14 }
536f0460 15}
f4143537 16
963ba889
RW
17.hidden {
18 display: none;
536f0460 19}
f4143537 20
963ba889
RW
21.preferences-container {
22 .container-fluid {
23 padding: 0;
24
5edb0fbc 25 .col-md-6 {
963ba889
RW
26 min-height: 20px;
27 }
28 }
29 .align-bottom {
30 vertical-align: bottom;
31 }
32 .preference-table {
33 border: 1px solid #ddd;
34
35 thead {
36 th {
37 text-align: center;
38
39 .config-warning {
40 display: none;
41 }
42
43 &.unconfigured {
44 .config-warning {
45 display: inline-block;
46 }
47 }
48 }
49 }
50 tr {
51 td {
52 &:not(:first-child) {
53 width: 150px;
54 text-align: center;
55 }
56 &:nth-child(even) {
57 background-color: #f7f7f7;
58 }
59 }
60 th:nth-child(even) {
61 background-color: #f7f7f7;
62 }
63 }
64 .preference-row {
65 .hover-tooltip-container {
66 display: inline-block;
67 }
68
69 .preference-name {
70 vertical-align: middle;
71 }
72 .disabled-message {
73 text-align: center;
74 height: 30px;
75 line-height: 30px;
76 }
77 .preference-state {
78 margin: 0;
79 padding: 0;
80 display: inline-block;
81 vertical-align: middle;
82
83 input[type="checkbox"]:checked + .preference-state-status-container {
84 background-color: #5cb85c;
85
86 .on-text {
87 display: inline-block;
88 }
89 .off-text {
90 display: none;
91 }
92 }
93 .preference-state-status-container {
94 width: 30px;
95 height: 30px;
96 line-height: 30px;
97 text-align: center;
98 border-radius: 4px;
99 background-color: #d9534f;
100 color: #fff;
101 cursor: pointer;
102
103 .loading-icon {
104 display: none;
105 }
106 .on-text {
107 display: none;
108 }
109 .off-text {
110 display: inline-block;
111 }
112 }
113 &.loading {
114 input[type="checkbox"]:checked + .preference-state-status-container {
115 .on-text,
116 .off-text {
117 display: none;
118 }
119 }
120
121 .preference-state-status-container {
122 .on-text,
123 .off-text {
124 display: none;
125 }
126 .loading-icon {
127 display: block;
128 }
129 }
130 }
131 }
132 &.loading {
133 .preference-name {
134 .loading-icon {
135 display: block;
136 }
137 }
138 }
139 }
140 }
141}
142
143.disabled-message {
f4143537 144 display: none;
536f0460 145}
f4143537 146
963ba889
RW
147.disabled {
148 .disabled-message {
149 display: block;
150
151 + form {
152 display: none;
153 }
536f0460 154 }
963ba889 155}
f4143537 156
963ba889
RW
157.general-settings-container {
158 .loading-icon {
159 display: none;
160 }
161 .loading {
162 .loading-icon {
163 display: inline-block;
164 }
165 }
166 label {
167 display: inline-block;
536f0460 168 }
963ba889
RW
169}
170.processor-container {
171 position: relative;
f4143537 172
963ba889
RW
173 .loading-container {
174 display: none;
175 position: absolute;
536f0460
DW
176 width: 100%;
177 height: 100%;
963ba889
RW
178 text-align: center;
179 background-color: rgba(255, 255, 255, 0.5);
180
181 .vertical-align {
182 height: 100%;
183 width: 0%;
184 display: inline-block;
185 vertical-align: middle;
186 }
536f0460 187 }
f4143537 188
963ba889
RW
189 &.loading {
190 .loading-container {
191 display: block;
192 }
536f0460 193 }
963ba889 194}
f4143537 195
963ba889
RW
196.preferences-page-container {
197 .checkbox-container {
198 margin: 30px 5px;
199 line-height: 20px;
200
201 input {
202 line-height: 20px;
203 margin: 0;
204 }
205
206 .loading-icon {
207 display: none;
208 }
209
210 &.loading {
211 .loading-icon {
212 display: inline-block;
213 }
214 }
215 }
216}
217
218.notification-area {
219 height: 600px;
c3e72743
DW
220 @media (max-height: 670px) {
221 height: 500px;
222 }
963ba889
RW
223 box-sizing: border-box;
224 border-radius: 4px;
225 margin-bottom: 30px;
226 border: 1px solid #e3e3e3;
227
228 .control-area {
229 box-sizing: border-box;
230 display: inline-block;
231 width: 300px;
536f0460 232 height: 100%;
963ba889
RW
233 overflow: auto;
234 -webkit-overflow-scrolling: touch;
235 border-right: 1px solid #e3e3e3;
236
237 .content {
238 position: relative;
239
240 .content-item-container {
241 cursor: pointer;
242 }
243
244 &:empty + .empty-text {
245 display: block;
246 }
247 }
248
249 .loading-icon {
250 display: none;
251 }
252
253 .empty-text {
254 display: none;
255 text-align: center;
256 padding-top: 20px;
257 }
258
259 &.loading {
260 .loading-icon {
261 display: block;
262 text-align: center;
263 box-sizing: border-box;
264 padding: 5px;
265 }
266
267 .content:empty + .empty-text {
268 display: none;
269 }
270 }
536f0460 271 }
f4143537 272
963ba889
RW
273 .content-area {
274 box-sizing: border-box;
275 display: inline-block;
276 width: calc(100% - 300px);
277 float: right;
f4143537 278
963ba889
RW
279 .toggle-mode {
280 display: none;
281 }
282
283 .header {
284 height: 50px;
285 box-sizing: border-box;
286 border-bottom: 1px solid #e3e3e3;
536f0460 287 padding: 5px;
963ba889
RW
288
289 .image-container {
290 display: inline-block;
291 height: 25px;
292 width: 24px;
293 float: left;
294 }
295
296 .subject-container {
297 display: inline-block;
298 max-width: calc(100% - 24px);
299 white-space: nowrap;
300 overflow: hidden;
301 text-overflow: ellipsis;
302 height: 25px;
303 padding-left: 5px;
304 box-sizing: border-box;
305 }
306
307 .timestamp {
308 font-size: 10px;
309 line-height: 10px;
310 margin: 0;
311 color: #666;
312 margin-left: 30px;
313 }
314
315 &:empty {
316 display: none;
317 }
318 }
319
c22141bd 320 > .content {
963ba889 321 height: 500px;
c3e72743
DW
322 @media (max-height: 670px) {
323 height: 400px;
324 }
963ba889
RW
325 box-sizing: border-box;
326 overflow: auto;
327 -webkit-overflow-scrolling: touch;
328 padding: 15px;
329
330 &:empty {
331 display: none;
332
333 & + .empty-text {
334 display: block;
335 text-align: center;
336 padding-top: 100px;
337 }
338 }
339 }
340
341 .empty-text {
342 display: none;
343 }
344
345 .footer {
346 height: 50px;
347 box-sizing: border-box;
348 text-align: center;
349
350 a {
351 line-height: 50px;
352 }
353
354 &:empty {
355 display: none;
356 }
536f0460
DW
357 }
358 }
963ba889 359}
f4143537 360
963ba889 361@media (max-width: 979px) {
963ba889
RW
362 .notification-area {
363 position: relative;
364 overflow: hidden;
365
366 .control-area {
367 border-right: none;
368 width: 100%;
369 position: absolute;
370 top: 0;
371 left: 0;
372 opacity: 1;
373 visibility: visible;
374 transition: left 0.25s;
375 }
376
377 .content-area {
378 width: 100%;
379 position: absolute;
380 top: 0;
381 right: -100%;
382 opacity: 0;
383 visibility: hidden;
384 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
385
386 .toggle-mode {
387 display: inline-block;
388 float: left;
389 width: 70px;
390 height: 50px;
391 line-height: 50px;
392 box-sizing: border-box;
393 border-right: 1px solid #e3e3e3;
394 border-bottom: 1px solid #e3e3e3;
395 }
396
397 .header {
398 display: inline-block;
399 width: calc(100% - 70px);
400 }
401 }
402
403 &.show-content-area {
404 .control-area {
405 left: -100%;
406 opacity: 0;
407 visibility: hidden;
408 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
409 }
410
411 .content-area {
412 right: 0;
413 opacity: 1;
414 visibility: visible;
415 transition: right 0.25s;
416 }
417 }
418 }
419}
420
a4ae0630
BB
421$message-send-bg: $gray-300 !default;
422$message-send-color: color-yiq($message-send-bg) !default;
423$message-send-time-color: mix($message-send-color, $message-send-bg, 100%) !default;
424$message-received-bg: $body-bg !default;
425$message-received-color: color-yiq($message-received-bg) !default;
426$message-received-color-muted: mix($message-received-color, $message-received-bg, 70%) !default;
427$message-app-bg: mix($message-send-bg, $message-received-bg, 50%) !default;
428$message-day-color: color-yiq($message-app-bg) !default;
5005d8cf 429
8aca1807
JP
430.drawer {
431 .message-app {
432 height: 100%;
433 .icon-back-in-app {
434 display: none;
435 }
436 .icon-back-in-drawer {
437 display: inherit;
438 }
439 }
440}
441
fd998fc6 442.message-app {
5005d8cf
RW
443 display: flex;
444 flex-direction: column;
a4ae0630 445 background-color: $message-app-bg;
5005d8cf 446
7cbea160
BB
447 .icon-back-in-drawer {
448 display: none;
449 }
450
fd998fc6 451 &.main {
7cbea160 452 min-height: 400px;
fd998fc6
MN
453 }
454
5005d8cf
RW
455 .header-container {
456 flex-shrink: 0;
457 }
458
92bc86e4
BB
459 .overflow-y {
460 overflow-y: auto;
461 }
462
463 @media (max-height: 320px) {
464 .header-container [data-region="view-overview"]:not(.hidden) {
465 display: flex;
466 align-items: center;
467 }
468 .footer-container [data-region="view-overview"] {
469 display: none;
470 }
471 .overflow-y {
472 overflow-y: unset;
473 }
474 }
5005d8cf
RW
475 .body-container {
476 flex: 1;
477 overflow: hidden;
478
479 & > * {
7cbea160 480 position: absolute;
5005d8cf
RW
481 right: 0;
482 left: 0;
483 top: 0;
484 bottom: 0;
92bc86e4 485 overflow: auto;
5005d8cf
RW
486 }
487 }
488
489 .footer-container {
490 flex-shrink: 0;
87dc257d
SR
491
492 textarea {
493 direction: ltr;
494 }
5005d8cf
RW
495 }
496
5005d8cf
RW
497 .contact-status {
498 position: absolute;
499 left: 39px;
500 top: 39px;
501 width: 10px;
502 height: 10px;
503 border-radius: 50%;
504 &.online {
505 border: 1px solid $body-bg;
506 background-color: $green;
507 }
508 }
509
510 .message {
511 p {
512 margin: 0;
513 }
514 }
515
516 .clickable {
517 cursor: pointer;
518
519 &:hover {
a4ae0630 520 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
5005d8cf
RW
521 }
522 }
523
524 a,
525 .btn-link {
526 color: inherit;
527 }
dfd6eec2
BB
528 .btn-link {
529 &:hover,
530 &:focus {
347fb901 531 background-color: rgba($black, .035);
dfd6eec2
BB
532 text-decoration: none;
533 }
534 }
5005d8cf
RW
535
536 .icon {
537 margin-right: 0;
538 }
539
540 .overview-section-toggle {
541 .collapsed-icon-container {
542 display: none;
543 }
544 .expanded-icon-container {
545 display: inline-block;
546 }
547
548 &.collapsed {
549 .collapsed-icon-container {
550 display: inline-block;
551 }
552 .expanded-icon-container {
553 display: none;
554 }
555 }
556 }
557
558 .btn.btn-link.btn-icon {
559 height: $icon-width;
560 width: $icon-width;
561 padding: 0;
562 border-radius: 50%;
563 flex-shrink: 0;
564
565 @include hover-focus {
566 background-color: $gray-200;
567 }
568
569 @each $size, $length in $iconsizes {
570 &.icon-size-#{$size} {
571 height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
572 width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
573 }
574 }
575 }
576
577 .view-overview-body {
578 .section {
579 display: block;
580
581 &.expanded {
582 display: flex;
583 }
584 }
585 }
586
587 .view-conversation {
588 .content-message-container {
589 img {
590 max-width: 100%;
591 }
592 }
593 }
051c675f
BB
594 .list-group .list-group-item {
595 border-left: 0;
596 border-right: 0;
597 &:first-child {
598 border-top: 0;
599 }
600 &:last-child {
601 border-bottom: 0;
602 }
603 }
4d446b88
BB
604 .last-message {
605 min-height: 1.5rem;
606 }
4631749c 607 .section {
4631749c
BB
608 .collapsing {
609 overflow: hidden;
610 }
611 }
a4ae0630 612
a4300f3e 613 .message {
a4ae0630
BB
614 &.send {
615 background-color: $message-send-bg;
616 color: $message-send-color;
617 .time {
618 color: $message-send-time-color;
619 }
620 .tail {
621 right: 0;
622 margin-right: -0.5rem;
623 border-bottom-color: $message-send-bg;
624 }
625 }
626 &.received {
627 background-color: $message-received-bg;
628 color: $message-received-color;
629 .time {
630 color: $message-received-color-muted;
631 }
632 .tail {
633 left: 0;
634 margin-left: -0.5rem;
635 border-bottom-color: $message-received-bg;
636 }
637 }
a4300f3e
BB
638 .tail {
639 content: '';
640 bottom: 0;
641 width: 0;
642 height: 0;
643 border: 0.5rem solid transparent;
644 position: relative;
645 }
a4ae0630
BB
646 }
647 .day {
648 color: $message-day-color;
a4300f3e 649 }
c3377415
RW
650 .lazy-load-list {
651 overflow-y: auto;
652 }
5005d8cf 653}
8e039a56
BB
654#page-message-index {
655 #page-header {
656 display: none;
657 }
658 #region-main {
7cbea160 659 height: 100%;
8e039a56
BB
660 margin-top: 0;
661 .conversationcontainer {
7aa234db
PH
662 .section {
663 max-height: calc(100vh - 50px);
664 }
7cbea160 665 }
8e039a56 666 div[role="main"] {
7cbea160 667 height: 100%;
8e039a56
BB
668 #maincontent {
669 margin-top: -1px;
670 }
671 .message-app.main {
672 height: 100%;
673 }
7cbea160
BB
674 }
675 }
676}
5005d8cf
RW
677.dir-rtl {
678 .message-drawer {
679 box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
680 }
681}
8f80d187
RW
682
683.message-app {
684 .emoji-picker-container {
685 position: absolute;
686 top: -5px;
687 right: 5px;
688 transform: translateY(-100%);
689
690 .emoji-picker {
691 .picker-row {
692 // To override the button styling for the message app.
693 .emoji-button {
694 height: $picker-emoji-button-size;
695 width: $picker-emoji-button-size;
696 }
697 }
698 }
699
700 @include media-breakpoint-down(xs) {
701 right: -1 * map-get($spacers, 2);
702 }
703 }
9f536ec6 704
92bc86e4
BB
705 @media (max-height: 495px) {
706 .emoji-picker-container {
707 position: fixed;
708 top: 0;
709 transform: none;
710 }
711 }
712
9f536ec6
RW
713 .emoji-auto-complete-container {
714 overflow: auto;
715 // Add a 50px buffer to account for scroll bars.
716 max-height: $picker-row-height + 50px;
717 transition: max-height .15s ease-in-out;
718 visibility: visible;
719
720 &.hidden {
721 display: block;
722 max-height: 0;
723 visibility: hidden;
7b8d8529
RW
724 overflow: hidden;
725 transition: max-height .15s ease-in-out, visibility 0s linear .15s, overflow 0s linear .15s;
9f536ec6
RW
726 }
727 }
8f80d187 728}