MDL-64099 message: Add sender name to conversation preview in overview
[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.messaging-area-container {
22 margin-bottom: 30px;
f4143537 23
963ba889
RW
24 .status {
25 .online-text {
26 display: none;
27 color: #7d7;
28 }
f4143537 29
963ba889
RW
30 .offline-text {
31 color: #ff6961;
32 }
f4143537 33
963ba889
RW
34 &.online {
35 .online-text {
d0f3b5f0 36 display: inherit;
963ba889
RW
37 }
38 .offline-text {
39 display: none;
40 }
41 }
42 }
f4143537 43
963ba889
RW
44 a,
45 .btn.btn-link {
46 color: #4f94cd;
47 }
f4143537 48
963ba889
RW
49 .messaging-area {
50 border: 1px solid #e3e3e3;
51 clear: both;
f4143537 52
fce0f1c2
DW
53 img {
54 max-width: 100%;
55 }
56
963ba889
RW
57 .contacts-area {
58 border-right: 1px solid #e3e3e3;
59 height: 600px;
c3e72743
DW
60 @media (max-height: 670px) {
61 height: 500px;
62 }
963ba889
RW
63 width: 280px;
64 display: inline-block;
65 box-sizing: border-box;
f4143537 66
963ba889 67 &.searchfilter {
f4143537 68
963ba889
RW
69 .searchtextarea {
70 height: 80px;
71 }
f4143537 72
963ba889
RW
73 .searcharea {
74 height: 470px;
75 }
76 }
f4143537 77
963ba889
RW
78 .searchtextarea {
79 padding: 5px;
80 text-align: center;
81 height: 50px;
82 box-sizing: border-box;
83 line-height: 50px;
84 background-color: #fff;
85 transition: background-color linear 0.2s;
86
87 input {
88 height: 28px;
89 line-height: 20px;
90 margin-bottom: 10px;
91 vertical-align: middle;
92 padding: 4px 6px;
93 background-color: #f5f5f5;
94 border: 0;
95 width: 90%;
96 box-shadow: none;
97 transition: background-color linear 0.2s;
98
99 &:focus {
100 box-shadow: none;
101 }
102 }
f4143537 103
963ba889
RW
104 &.searching {
105 background-color: #f5f5f5;
106 transition: background-color linear 0.2s;
f4143537 107
963ba889
RW
108 input {
109 background-color: #fff;
110 transition: background-color linear 0.2s;
111 }
112 }
536f0460 113
963ba889
RW
114 .searchfilterarea {
115 line-height: 20px;
d14207fd 116 cursor: pointer;
f4143537 117
963ba889
RW
118 .searchfilter {
119 float: left;
120 }
f4143537 121
963ba889
RW
122 .searchfilterdelete {
123 float: left;
124 margin-left: 5px;
963ba889
RW
125 }
126 }
127 }
536f0460 128
963ba889 129 .searcharea {
536f0460 130
963ba889
RW
131 .heading {
132 text-align: center;
133 border-top: 1px solid black;
134 border-bottom: 1px solid black;
135 font-size: 14px;
136 font-weight: bold;
137 }
536f0460 138
963ba889
RW
139 .course {
140 text-align: center;
f4143537 141
963ba889
RW
142 &:hover {
143 background-color: #4f94cd;
144 color: #fff;
145 border: none;
146 cursor: pointer;
147 }
148 }
149
150 .noresults {
151 padding-top: 20px;
152 text-align: center;
153 }
536f0460 154 }
f4143537 155
963ba889
RW
156 .contacts {
157 height: 500px;
c3e72743
DW
158 @media (max-height: 670px) {
159 height: 400px;
160 }
963ba889
RW
161 overflow-y: auto;
162 -webkit-overflow-scrolling: touch;
f4143537 163
963ba889
RW
164 .nocontacts {
165 padding-top: 20px;
166 text-align: center;
536f0460
DW
167 }
168
963ba889
RW
169 .contact {
170 height: 66px;
171 cursor: pointer;
172 border-bottom: 1px solid #e3e3e3;
173 box-sizing: border-box;
f4143537 174
963ba889
RW
175 &.unread {
176 background-color: #f1f1f1;
177
178 .picture {
179 border-color: #f1f1f1;
180 }
f4143537 181
963ba889
RW
182 .information {
183 width: 60%;
184 }
f4143537 185
963ba889
RW
186 .unread-count-container {
187 display: inline-block;
188 width: 15%;
189 float: left;
190 }
191 }
192
193 &:hover {
194 @include setSelectedContact();
195 background-color: #79b5e6;
196 }
197
198 &.selected {
199 @include setSelectedContact();
200 }
201
202 .picture {
203 line-height: 66px;
204 text-align: center;
205 height: 66px;
206 border-bottom: 1px solid #fff;
207 width: 25%;
208 float: left;
209 display: inline-block;
210 box-sizing: border-box;
211
212 img {
213 border-radius: 50%;
214 height: 54px;
215 }
216 }
217
218 .information {
219 padding: 6px 0;
220 height: 66px;
221 width: 75%;
222 float: left;
223 display: inline-block;
224 box-sizing: border-box;
225
226 .name {
227 font-weight: bold;
228
229 img {
230 vertical-align: baseline;
231 }
232 }
233
234 .lastmessage {
235 word-wrap: break-word;
236 margin: 0;
237 height: 40px;
238 line-height: 17px;
239 overflow: hidden;
240 text-overflow: ellipsis;
241 white-space: nowrap;
242 color: #a1a1a1;
243 padding-right: 10px;
244 }
245 }
246
247 .unread-count-container {
248 display: none;
249 line-height: 66px;
250 text-align: center;
251 box-sizing: border-box;
536f0460
DW
252 }
253 }
254 }
f4143537 255
963ba889
RW
256 @mixin setSelectedTab() {
257 color: #4f94cd;
258 }
259
260 .tabs {
261 border-top: 1px solid #e3e3e3;
262 height: 50px;
263 box-sizing: border-box;
264
265 .tab {
266 cursor: pointer;
267 height: 100%;
268 background-color: #f5f5f5;
269 margin: 0;
270 width: 50%;
271 text-align: center;
272 float: left;
273
274 &:hover {
275 @include setSelectedTab();
276 }
277
278 .tabimage {
279 height: 30px;
280 line-height: 30px;
281
282 img {
283 height: 20px;
284 }
285 }
286 }
f4143537 287
963ba889
RW
288 .tab.selected {
289 @include setSelectedTab();
290 }
291 }
536f0460 292 }
f4143537 293
963ba889
RW
294 .messages-area {
295 width: calc(100% - 280px);
296 height: 600px;
c3e72743
DW
297 @media (max-height: 670px) {
298 height: 500px;
299 }
963ba889
RW
300 box-sizing: border-box;
301 margin: 0;
302 position: relative;
536f0460 303 float: right;
f4143537 304
963ba889
RW
305 .btn-container {
306 position: absolute;
307 top: 0;
308 left: 0;
309 padding-left: 15px;
310 font-weight: normal;
f4143537 311
963ba889
RW
312 &.view-toggle {
313 display: none;
314 }
315
316 &.delete-all {
317 display: none;
318 }
536f0460 319 }
536f0460 320
963ba889
RW
321 .profile-header {
322 height: 50px;
323 line-height: 50px;
324 display: none;
f4143537 325
963ba889
RW
326 .btn-container {
327 display: block;
536f0460 328
963ba889
RW
329 .btn-link {
330 padding: 0;
331 line-height: inherit;
332 }
333 }
334 }
536f0460 335
963ba889
RW
336 .profile {
337 padding: 30px;
338 font-size: 16px;
339 height: 600px;
c3e72743
DW
340 @media (max-height: 670px) {
341 height: 500px;
342 }
963ba889
RW
343 box-sizing: border-box;
344 overflow-y: auto;
345 -webkit-overflow-scrolling: touch;
346
347 .user-container {
348 height: 100px;
349
350 .profile-picture {
351 border-radius: 50%;
352 max-height: 100px;
353 display: inline-block;
354 }
f4143537 355
963ba889
RW
356 .name-container {
357 display: inline-block;
358 vertical-align: top;
359 margin-top: 20px;
360 margin-left: 10px;
361
362 .name {
363 font-weight: bold;
364 display: block;
365 }
366
367 .status {
368 display: block;
369 font-size: 14px;
370 }
371 }
372 }
f4143537 373
963ba889
RW
374 .information {
375 margin: 0;
376 display: inline-block;
377 float: right;
378 margin-top: 20px;
379 font-size: 14px;
380 list-style: none;
381
382 .name {
383 display: inline-block;
384 font-weight: bold;
385 text-align: right;
386 margin-right: 10px;
387 }
f4143537 388
963ba889
RW
389 .value {
390 display: inline-block;
391 }
392 }
536f0460 393
963ba889
RW
394 .actions {
395 padding-top: 80px;
536f0460 396
963ba889
RW
397 .separator {
398 border-bottom: 1px solid #e3e3e3;
399 margin-bottom: 20px;
400 padding-bottom: 5px;
536f0460 401
963ba889
RW
402 a {
403 &.danger {
404 color: #ff6961;
405 }
406 }
407 }
408 }
409 }
536f0460 410
963ba889
RW
411 .messages-header {
412 height: 50px;
413 font-weight: bold;
414 line-height: 50px;
415 box-sizing: border-box;
416 border-bottom: 1px solid #e3e3e3;
417 text-align: center;
418 position: relative;
419
420 .btn-link {
421 padding: 0;
422 line-height: inherit;
423 }
f4143537 424
963ba889
RW
425 .delete-instructions {
426 display: none;
427 }
f4143537 428
963ba889
RW
429 .name-container {
430 padding-top: 9px;
431 display: inline-block;
f4143537 432
963ba889
RW
433 .name {
434 line-height: 20px;
435 }
f4143537 436
963ba889
RW
437 .status {
438 line-height: 12px;
439 font-size: 12px;
440 font-weight: normal;
441 }
442 }
f4143537 443
963ba889
RW
444 .actions {
445 position: absolute;
446 top: 0;
447 right: 0;
448 padding-right: 15px;
449 font-weight: normal;
f4143537 450
963ba889
RW
451 .cancel-messages-delete {
452 display: none;
453 }
454 }
455 }
f4143537 456
963ba889
RW
457 .messages {
458 height: 500px;
c3e72743
DW
459 @media (max-height: 670px) {
460 height: 400px;
461 }
963ba889
RW
462 overflow-y: auto;
463 overflow-x: hidden;
464 -webkit-overflow-scrolling: touch;
465 box-sizing: border-box;
466 padding: 20px;
467
468 .blocktime {
469 clear: both;
470 text-align: center;
471 color: #a1a1a1;
472 font-size: 12px;
473 margin: 5px 0;
474 }
f4143537 475
963ba889 476 .message {
f4143537 477
963ba889
RW
478 .deletemessagecheckbox {
479 display: none;
480 text-align: center;
481 padding-top: 5px;
482 }
f4143537 483
963ba889
RW
484 .content {
485 border: 1px solid #e3e3e3;
486 padding: 10px;
487 margin-bottom: 5px;
488 font-size: 12px;
489 word-wrap: break-word;
490 max-width: 55%;
491 position: relative;
492
493 .text {
54d83992
RW
494 display: block;
495
963ba889
RW
496 p {
497 margin: 0;
498 }
499 }
500
501 .timesent {
502 font-size: 10px;
503 color: #a1a1a1;
504 float: right;
505 }
506 }
f4143537 507
963ba889 508 .content.left {
264b7dff 509 margin-left: auto;
963ba889 510 }
f4143537 511
963ba889 512 .content.right {
264b7dff 513 margin-right: auto;
963ba889
RW
514 }
515 }
516 }
f4143537 517
963ba889
RW
518 .response {
519 display: table;
520 padding: 10px 10px 9px;
521 position: absolute;
522 bottom: 0;
523 left: 0;
524 width: 100%;
525 line-height: 28px;
526 text-align: center;
527 border-top: 1px solid #e3e3e3;
528 box-sizing: border-box;
529 background-color: #fff;
530 transition: background-color linear 0.2s;
531
532 .delete-confirmation {
533 display: none;
534
535 .btn.btn-link.confirm {
536 border: 1px solid #4f94cd;
537 height: 30px;
538
539 &:hover {
540 background-color: #4f94cd;
541 color: #fff;
542 text-shadow: none;
543 }
544 }
545 }
f4143537 546
963ba889
RW
547 .message-box {
548 display: table-row;
549
550 .message-text-container {
551 display: table-cell;
552
553 textarea {
554 line-height: 20px;
555 padding: 4px 6px;
556 vertical-align: middle;
557 width: 100%;
558 margin: 0;
559 resize: none;
560 border: none;
561 box-shadow: none;
562 box-sizing: border-box;
563 background-color: #f5f5f5;
564 transition: background-color linear 0.2s;
565
566 &:focus {
567 box-shadow: none;
568 }
569 }
570 }
f4143537 571
963ba889
RW
572 .send-button-container {
573 display: table-cell;
574 width: 1px;
f4143537 575
963ba889
RW
576 button {
577 height: 30px;
578 }
579 }
580 }
f4143537 581
963ba889
RW
582 &.messaging {
583 background-color: #f5f5f5;
584 transition: background-color linear 0.2s;
585
586 .message-box {
587 .message-text-container {
588 textarea {
589 background-color: #fff;
590 transition: background-color linear 0.2s;
591 }
592 }
593 }
594 }
595 }
f4143537 596
963ba889
RW
597 &.editing {
598 .messages-header {
599 .btn-container {
600 &.view-all {
601 display: none;
602 }
f4143537 603
963ba889
RW
604 &.delete-all {
605 display: block;
606 }
607 }
f4143537 608
963ba889
RW
609 .delete-instructions {
610 display: block;
611 }
612
613 .name-container {
614 display: none;
615 }
616
617 .actions {
618 .messages-delete {
619 display: none;
620 }
621
622 .cancel-messages-delete {
623 display: block;
624 }
625 }
626 }
627
628 .messages {
629 .message {
630 cursor: pointer;
631
632 &[aria-checked="true"] {
633 .content {
634 background-color: #4f94cd;
635 border-color: #4f94cd;
636 color: #fff;
637
638 .timesent {
639 color: #fff;
640 }
641 }
642 }
643
644 &[aria-checked="false"] {
645 .content {
646 &:hover {
647 background-color: #79b5e6;
648 color: #fff;
649
650 .timesent {
651 color: #fff;
652 }
653 }
654 }
655 }
656 }
657 }
f4143537 658
963ba889
RW
659 .response {
660 .delete-confirmation {
661 display: block;
662 }
663
664 .message-box {
665 display: none;
666 }
667 }
668 }
669 }
670 }
536f0460 671}
f4143537 672
963ba889
RW
673.preferences-container {
674 .container-fluid {
675 padding: 0;
676
677 .span6 {
678 min-height: 20px;
679 }
680 }
681 .align-bottom {
682 vertical-align: bottom;
683 }
684 .preference-table {
685 border: 1px solid #ddd;
686
687 thead {
688 th {
689 text-align: center;
690
691 .config-warning {
692 display: none;
693 }
694
695 &.unconfigured {
696 .config-warning {
697 display: inline-block;
698 }
699 }
700 }
701 }
702 tr {
703 td {
704 &:not(:first-child) {
705 width: 150px;
706 text-align: center;
707 }
708 &:nth-child(even) {
709 background-color: #f7f7f7;
710 }
711 }
712 th:nth-child(even) {
713 background-color: #f7f7f7;
714 }
715 }
716 .preference-row {
717 .hover-tooltip-container {
718 display: inline-block;
719 }
720
721 .preference-name {
722 vertical-align: middle;
723 }
724 .disabled-message {
725 text-align: center;
726 height: 30px;
727 line-height: 30px;
728 }
729 .preference-state {
730 margin: 0;
731 padding: 0;
732 display: inline-block;
733 vertical-align: middle;
734
735 input[type="checkbox"]:checked + .preference-state-status-container {
736 background-color: #5cb85c;
737
738 .on-text {
739 display: inline-block;
740 }
741 .off-text {
742 display: none;
743 }
744 }
745 .preference-state-status-container {
746 width: 30px;
747 height: 30px;
748 line-height: 30px;
749 text-align: center;
750 border-radius: 4px;
751 background-color: #d9534f;
752 color: #fff;
753 cursor: pointer;
754
755 .loading-icon {
756 display: none;
757 }
758 .on-text {
759 display: none;
760 }
761 .off-text {
762 display: inline-block;
763 }
764 }
765 &.loading {
766 input[type="checkbox"]:checked + .preference-state-status-container {
767 .on-text,
768 .off-text {
769 display: none;
770 }
771 }
772
773 .preference-state-status-container {
774 .on-text,
775 .off-text {
776 display: none;
777 }
778 .loading-icon {
779 display: block;
780 }
781 }
782 }
783 }
784 &.loading {
785 .preference-name {
786 .loading-icon {
787 display: block;
788 }
789 }
790 }
791 }
792 }
793}
794
795.disabled-message {
f4143537 796 display: none;
536f0460 797}
f4143537 798
963ba889
RW
799.disabled {
800 .disabled-message {
801 display: block;
802
803 + form {
804 display: none;
805 }
536f0460 806 }
963ba889 807}
f4143537 808
963ba889
RW
809.general-settings-container {
810 .loading-icon {
811 display: none;
812 }
813 .loading {
814 .loading-icon {
815 display: inline-block;
816 }
817 }
818 label {
819 display: inline-block;
536f0460 820 }
963ba889
RW
821}
822.processor-container {
823 position: relative;
f4143537 824
963ba889
RW
825 .loading-container {
826 display: none;
827 position: absolute;
536f0460
DW
828 width: 100%;
829 height: 100%;
963ba889
RW
830 text-align: center;
831 background-color: rgba(255, 255, 255, 0.5);
832
833 .vertical-align {
834 height: 100%;
835 width: 0%;
836 display: inline-block;
837 vertical-align: middle;
838 }
536f0460 839 }
f4143537 840
963ba889
RW
841 &.loading {
842 .loading-container {
843 display: block;
844 }
536f0460 845 }
963ba889 846}
f4143537 847
963ba889
RW
848.preferences-page-container {
849 .checkbox-container {
850 margin: 30px 5px;
851 line-height: 20px;
852
853 input {
854 line-height: 20px;
855 margin: 0;
856 }
857
858 .loading-icon {
859 display: none;
860 }
861
862 &.loading {
863 .loading-icon {
864 display: inline-block;
865 }
866 }
867 }
868}
869
870.notification-area {
871 height: 600px;
c3e72743
DW
872 @media (max-height: 670px) {
873 height: 500px;
874 }
963ba889
RW
875 box-sizing: border-box;
876 border-radius: 4px;
877 margin-bottom: 30px;
878 border: 1px solid #e3e3e3;
879
880 .control-area {
881 box-sizing: border-box;
882 display: inline-block;
883 width: 300px;
536f0460 884 height: 100%;
963ba889
RW
885 overflow: auto;
886 -webkit-overflow-scrolling: touch;
887 border-right: 1px solid #e3e3e3;
888
889 .content {
890 position: relative;
891
892 .content-item-container {
893 cursor: pointer;
894 }
895
896 &:empty + .empty-text {
897 display: block;
898 }
899 }
900
901 .loading-icon {
902 display: none;
903 }
904
905 .empty-text {
906 display: none;
907 text-align: center;
908 padding-top: 20px;
909 }
910
911 &.loading {
912 .loading-icon {
913 display: block;
914 text-align: center;
915 box-sizing: border-box;
916 padding: 5px;
917 }
918
919 .content:empty + .empty-text {
920 display: none;
921 }
922 }
536f0460 923 }
f4143537 924
963ba889
RW
925 .content-area {
926 box-sizing: border-box;
927 display: inline-block;
928 width: calc(100% - 300px);
929 float: right;
f4143537 930
963ba889
RW
931 .toggle-mode {
932 display: none;
933 }
934
935 .header {
936 height: 50px;
937 box-sizing: border-box;
938 border-bottom: 1px solid #e3e3e3;
536f0460 939 padding: 5px;
963ba889
RW
940
941 .image-container {
942 display: inline-block;
943 height: 25px;
944 width: 24px;
945 float: left;
946 }
947
948 .subject-container {
949 display: inline-block;
950 max-width: calc(100% - 24px);
951 white-space: nowrap;
952 overflow: hidden;
953 text-overflow: ellipsis;
954 height: 25px;
955 padding-left: 5px;
956 box-sizing: border-box;
957 }
958
959 .timestamp {
960 font-size: 10px;
961 line-height: 10px;
962 margin: 0;
963 color: #666;
964 margin-left: 30px;
965 }
966
967 &:empty {
968 display: none;
969 }
970 }
971
c22141bd 972 > .content {
963ba889 973 height: 500px;
c3e72743
DW
974 @media (max-height: 670px) {
975 height: 400px;
976 }
963ba889
RW
977 box-sizing: border-box;
978 overflow: auto;
979 -webkit-overflow-scrolling: touch;
980 padding: 15px;
981
982 &:empty {
983 display: none;
984
985 & + .empty-text {
986 display: block;
987 text-align: center;
988 padding-top: 100px;
989 }
990 }
991 }
992
993 .empty-text {
994 display: none;
995 }
996
997 .footer {
998 height: 50px;
999 box-sizing: border-box;
1000 text-align: center;
1001
1002 a {
1003 line-height: 50px;
1004 }
1005
1006 &:empty {
1007 display: none;
1008 }
536f0460
DW
1009 }
1010 }
963ba889 1011}
f4143537 1012
963ba889
RW
1013@media (max-width: 979px) {
1014 .messaging-area-container {
1015 .messaging-area {
1016 position: relative;
1017 overflow: hidden;
1018 height: 600px;
c3e72743
DW
1019 @media (max-height: 670px) {
1020 height: 500px;
1021 }
963ba889
RW
1022
1023 .messages-area {
1024 .messages-header {
1025 .btn-container {
1026 &.view-toggle {
1027 display: block;
1028 }
1029
1030 &.delete-all {
1031 display: none;
1032 }
1033 }
1034 }
1035
1036 .profile-header {
1037 display: block;
1038 }
1039
1040 .profile {
1041 height: 550px;
1042 }
1043
1044 &.editing {
1045 .messages-header {
1046 .btn-container {
1047 &.view-toggle {
1048 display: none;
1049 }
1050
1051 &.delete-all {
1052 display: block;
1053 }
1054 }
1055 }
1056 }
1057 }
1058
1059 .contacts-area {
1060 width: 100%;
1061 border-right: none;
1062 position: absolute;
1063 top: 0;
1064 left: 0;
1065 right: auto;
1066 bottom: auto;
1067 }
1068
1069 .messages-area {
1070 width: 100%;
1071 position: absolute;
1072 top: 0;
1073 left: auto;
1074 right: 0;
1075 bottom: auto;
1076 }
1077
1078 &.show-messages {
1079 .contacts-area {
1080 left: -100%;
1081 opacity: 0;
1082 visibility: hidden;
1083 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1084 }
1085
1086 .messages-area {
1087 right: 0;
1088 opacity: 1;
1089 visibility: visible;
1090 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1091 }
1092 }
1093
1094 &.hide-messages {
1095 .contacts-area {
1096 left: 0;
1097 opacity: 1;
1098 visibility: visible;
1099 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1100
1101 .contact {
1102 &.selected {
1103 background-color: inherit;
1104 color: inherit;
1105 border-bottom: 1px solid #e3e3e3;
1106
1107 &:hover {
1108 @include setSelectedContact();
1109 background-color: #79b5e6;
1110 }
1111
1112 .picture {
1113 border-bottom: 1px solid #fff;
1114 }
1115
1116 .information {
1117 .lastmessage {
1118 color: #a1a1a1;
1119 }
1120 }
1121 }
1122 }
1123 }
1124
1125 .messages-area {
1126 right: -100%;
1127 opacity: 0;
1128 visibility: hidden;
1129 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1130 }
1131 }
1132 }
1133 }
1134
1135 .notification-area {
1136 position: relative;
1137 overflow: hidden;
1138
1139 .control-area {
1140 border-right: none;
1141 width: 100%;
1142 position: absolute;
1143 top: 0;
1144 left: 0;
1145 opacity: 1;
1146 visibility: visible;
1147 transition: left 0.25s;
1148 }
1149
1150 .content-area {
1151 width: 100%;
1152 position: absolute;
1153 top: 0;
1154 right: -100%;
1155 opacity: 0;
1156 visibility: hidden;
1157 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1158
1159 .toggle-mode {
1160 display: inline-block;
1161 float: left;
1162 width: 70px;
1163 height: 50px;
1164 line-height: 50px;
1165 box-sizing: border-box;
1166 border-right: 1px solid #e3e3e3;
1167 border-bottom: 1px solid #e3e3e3;
1168 }
1169
1170 .header {
1171 display: inline-block;
1172 width: calc(100% - 70px);
1173 }
1174 }
1175
1176 &.show-content-area {
1177 .control-area {
1178 left: -100%;
1179 opacity: 0;
1180 visibility: hidden;
1181 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1182 }
1183
1184 .content-area {
1185 right: 0;
1186 opacity: 1;
1187 visibility: visible;
1188 transition: right 0.25s;
1189 }
1190 }
1191 }
1192}
1193
5005d8cf
RW
1194// New styles for the messaging UI. Once MDL-63303 is done all CSS above this line should be removed.
1195$message-drawer-width: 320px;
1196
1197.message-drawer {
1198 position: fixed;
1199 top: $navbar-height;
1200 right: 0;
1201 height: calc(100% - #{$navbar-height});
1202 width: $message-drawer-width;
c75559cf 1203 z-index: $zindex-sticky;
5005d8cf
RW
1204 box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
1205 display: flex;
1206 flex-direction: column;
1207 @include transition();
1208
1209 &.hidden {
1210 display: block;
1211 right: $message-drawer-width * -1;
1212 }
1213
1214 .header-container {
1215 flex-shrink: 0;
1216 }
1217
1218 .body-container {
1219 flex: 1;
1220 overflow: hidden;
1221
1222 & > * {
1223 position: absolute;
1224 right: 0;
1225 left: 0;
1226 top: 0;
1227 bottom: 0;
5005d8cf
RW
1228 }
1229 }
1230
1231 .footer-container {
1232 flex-shrink: 0;
1233 overflow-x: hidden;
5005d8cf
RW
1234 }
1235
1236 .matchtext {
1237 background-color: lighten($primary, 40%);
1238 color: $body-color;
1239 height: 1.5rem;
1240 }
1241 .contact-status {
1242 position: absolute;
1243 left: 39px;
1244 top: 39px;
1245 width: 10px;
1246 height: 10px;
1247 border-radius: 50%;
1248 &.online {
1249 border: 1px solid $body-bg;
1250 background-color: $green;
1251 }
1252 }
1253
1254 .message {
1255 p {
1256 margin: 0;
1257 }
1258 }
1259
1260 .clickable {
1261 cursor: pointer;
1262
1263 &:hover {
1264 box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, .1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03);
1265 }
1266 }
1267
1268 a,
1269 .btn-link {
1270 color: inherit;
1271 }
1272
1273 .icon {
1274 margin-right: 0;
1275 }
1276
1277 .overview-section-toggle {
1278 .collapsed-icon-container {
1279 display: none;
1280 }
1281 .expanded-icon-container {
1282 display: inline-block;
1283 }
1284
1285 &.collapsed {
1286 .collapsed-icon-container {
1287 display: inline-block;
1288 }
1289 .expanded-icon-container {
1290 display: none;
1291 }
1292 }
1293 }
1294
1295 .btn.btn-link.btn-icon {
1296 height: $icon-width;
1297 width: $icon-width;
1298 padding: 0;
1299 border-radius: 50%;
1300 flex-shrink: 0;
1301
1302 @include hover-focus {
1303 background-color: $gray-200;
1304 }
1305
1306 @each $size, $length in $iconsizes {
1307 &.icon-size-#{$size} {
1308 height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
1309 width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
1310 }
1311 }
1312 }
1313
1314 .view-overview-body {
1315 .section {
1316 display: block;
1317
1318 &.expanded {
1319 display: flex;
1320 }
1321 }
1322 }
1323
1324 .view-conversation {
1325 .content-message-container {
1326 img {
1327 max-width: 100%;
1328 }
1329 }
1330 }
1331}
1332
1333.dir-rtl {
1334 .message-drawer {
1335 box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
1336 }
1337}
1338
1339// New styles for the messaging UI. Once MDL-63303 is done all CSS below this line should be removed.
1340
963ba889
RW
1341@media (max-width: 480px) {
1342 .messaging-area-container {
1343 .messaging-area {
1344 .messages-area {
1345 &.editing {
1346 .messages-header {
1347 height: 80px;
1348
1349 .delete-all {
1350 top: 30px;
1351 }
1352
1353 .actions {
1354 top: 30px;
1355 }
1356 }
1357
1358 .messages {
1359 height: 470px;
1360 }
1361 }
1362 }
1363 }
536f0460
DW
1364 }
1365}