weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / message.scss
1 /** The message area **/
2 @mixin setSelectedContact() {
3     background-color: #4f94cd;
4     color: #fff;
5     border: none;
7     .information {
8         .lastmessage {
9             color: #fff;
10         }
11     }
12     .picture {
13         border: none;
14     }
15 }
17 .hidden {
18     display: none;
19 }
21 .preferences-container {
22     .container-fluid {
23         padding: 0;
25         .col-md-6 {
26             min-height: 20px;
27         }
28     }
29     .align-bottom {
30         vertical-align: bottom;
31     }
32     .preference-table {
33         border: 1px solid #ddd;
35         thead {
36             th {
37                 text-align: center;
39                 .config-warning {
40                     display: none;
41                 }
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             }
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;
83                 input[type="checkbox"]:checked + .preference-state-status-container {
84                     background-color: #5cb85c;
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;
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                     }
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     }
143 .disabled-message {
144     display: none;
147 .disabled {
148     .disabled-message {
149         display: block;
151         + form {
152             display: none;
153         }
154     }
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;
168     }
170 .processor-container {
171     position: relative;
173     .loading-container {
174         display: none;
175         position: absolute;
176         width: 100%;
177         height: 100%;
178         text-align: center;
179         background-color: rgba(255, 255, 255, 0.5);
181         .vertical-align {
182             height: 100%;
183             width: 0%;
184             display: inline-block;
185             vertical-align: middle;
186         }
187     }
189     &.loading {
190         .loading-container {
191             display: block;
192         }
193     }
196 .preferences-page-container {
197     .checkbox-container {
198         margin: 30px 5px;
199         line-height: 20px;
201         input {
202             line-height: 20px;
203             margin: 0;
204         }
206         .loading-icon {
207             display: none;
208         }
210         &.loading {
211             .loading-icon {
212                 display: inline-block;
213             }
214         }
215     }
218 .notification-area {
219     height: 600px;
220     @media (max-height: 670px) {
221         height: 500px;
222     }
223     box-sizing: border-box;
224     border-radius: 4px;
225     margin-bottom: 30px;
226     border: 1px solid #e3e3e3;
228     .control-area {
229         box-sizing: border-box;
230         display: inline-block;
231         width: 300px;
232         height: 100%;
233         overflow: auto;
234         -webkit-overflow-scrolling: touch;
235         border-right: 1px solid #e3e3e3;
237         .content {
238             position: relative;
240             .content-item-container {
241                 cursor: pointer;
242             }
244             &:empty + .empty-text {
245                 display: block;
246             }
247         }
249         .loading-icon {
250             display: none;
251         }
253         .empty-text {
254             display: none;
255             text-align: center;
256             padding-top: 20px;
257         }
259         &.loading {
260             .loading-icon {
261                 display: block;
262                 text-align: center;
263                 box-sizing: border-box;
264                 padding: 5px;
265             }
267             .content:empty + .empty-text {
268                 display: none;
269             }
270         }
271     }
273     .content-area {
274         box-sizing: border-box;
275         display: inline-block;
276         width: calc(100% - 300px);
277         float: right;
279         .toggle-mode {
280             display: none;
281         }
283         .header {
284             height: 50px;
285             box-sizing: border-box;
286             border-bottom: 1px solid #e3e3e3;
287             padding: 5px;
289             .image-container {
290                 display: inline-block;
291                 height: 25px;
292                 width: 24px;
293                 float: left;
294             }
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             }
307             .timestamp {
308                 font-size: 10px;
309                 line-height: 10px;
310                 margin: 0;
311                 color: #666;
312                 margin-left: 30px;
313             }
315             &:empty {
316                 display: none;
317             }
318         }
320         > .content {
321             height: 500px;
322             @media (max-height: 670px) {
323                 height: 400px;
324             }
325             box-sizing: border-box;
326             overflow: auto;
327             -webkit-overflow-scrolling: touch;
328             padding: 15px;
330             &:empty {
331                 display: none;
333                 & + .empty-text {
334                     display: block;
335                     text-align: center;
336                     padding-top: 100px;
337                 }
338             }
339         }
341         .empty-text {
342             display: none;
343         }
345         .footer {
346             height: 50px;
347             box-sizing: border-box;
348             text-align: center;
350             a {
351                 line-height: 50px;
352             }
354             &:empty {
355                 display: none;
356             }
357         }
358     }
361 @media (max-width: 979px) {
362     .notification-area {
363         position: relative;
364         overflow: hidden;
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         }
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;
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             }
397             .header {
398                 display: inline-block;
399                 width: calc(100% - 70px);
400             }
401         }
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             }
411             .content-area {
412                 right: 0;
413                 opacity: 1;
414                 visibility: visible;
415                 transition: right 0.25s;
416             }
417         }
418     }
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;
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     }
442 .message-app {
443     display: flex;
444     flex-direction: column;
445     background-color: $message-app-bg;
447     .icon-back-in-drawer {
448         display: none;
449     }
451     &.main {
452         min-height: 400px;
453     }
455     .header-container {
456         flex-shrink: 0;
457     }
459     .overflow-y {
460         overflow-y: auto;
461     }
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     }
475     .body-container {
476         flex: 1;
477         overflow: hidden;
479         & > * {
480             position: absolute;
481             right: 0;
482             left: 0;
483             top: 0;
484             bottom: 0;
485             overflow: auto;
486         }
487     }
489     .footer-container {
490         flex-shrink: 0;
492         textarea {
493             direction: ltr;
494         }
495     }
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     }
510     .message {
511         p {
512             margin: 0;
513         }
514     }
516     .clickable {
517         cursor: pointer;
519         &:hover {
520             filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
521         }
522     }
524     a,
525     .btn-link {
526         color: inherit;
527     }
528     .btn-link {
529         &:hover,
530         &:focus {
531             background-color: rgba($black, .035);
532             text-decoration: none;
533         }
534     }
536     .icon {
537         margin-right: 0;
538     }
540     .overview-section-toggle {
541         .collapsed-icon-container {
542             display: none;
543         }
544         .expanded-icon-container {
545             display: inline-block;
546         }
548         &.collapsed {
549             .collapsed-icon-container {
550                 display: inline-block;
551             }
552             .expanded-icon-container {
553                 display: none;
554             }
555         }
556     }
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;
565         @include hover-focus {
566             background-color: $gray-200;
567         }
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     }
577     .view-overview-body {
578         .section {
579             display: block;
581             &.expanded {
582                 display: flex;
583             }
584         }
585     }
587     .view-conversation {
588         .content-message-container {
589             img {
590                 max-width: 100%;
591             }
592         }
593     }
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     }
604     .last-message {
605         min-height: 1.5rem;
606     }
607     .section {
608         .collapsing {
609             overflow: hidden;
610         }
611     }
613     .message {
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         }
638         .tail {
639             content: '';
640             bottom: 0;
641             width: 0;
642             height: 0;
643             border: 0.5rem solid transparent;
644             position: relative;
645         }
646     }
647     .day {
648         color: $message-day-color;
649     }
650     .lazy-load-list {
651         overflow-y: auto;
652     }
654 #page-message-index {
655     #page-header {
656         display: none;
657     }
658     #region-main {
659         height: 100%;
660         margin-top: 0;
661         .conversationcontainer {
662             max-height: calc(100vh - 50px);
663             overflow: auto;
664         }
665         div[role="main"] {
666             height: 100%;
667             #maincontent {
668                 margin-top: -1px;
669             }
670             .message-app.main {
671                 height: 100%;
672             }
673         }
674     }
676 .dir-rtl {
677     .message-drawer {
678         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
679     }
682 .message-app {
683     .emoji-picker-container {
684         position: absolute;
685         top: -5px;
686         right: 5px;
687         transform: translateY(-100%);
689         .emoji-picker {
690             .picker-row {
691                 // To override the button styling for the message app.
692                 .emoji-button {
693                     height: $picker-emoji-button-size;
694                     width: $picker-emoji-button-size;
695                 }
696             }
697         }
699         @include media-breakpoint-down(xs) {
700             right: -1 * map-get($spacers, 2);
701         }
702     }
704     @media (max-height: 495px) {
705         .emoji-picker-container {
706             position: fixed;
707             top: 0;
708             transform: none;
709         }
710     }
712     .emoji-auto-complete-container {
713         overflow: auto;
714         // Add a 50px buffer to account for scroll bars.
715         max-height: $picker-row-height + 50px;
716         transition: max-height .15s ease-in-out;
717         visibility: visible;
719         &.hidden {
720             display: block;
721             max-height: 0;
722             visibility: hidden;
723             overflow: hidden;
724             transition: max-height .15s ease-in-out, visibility 0s linear .15s, overflow 0s linear .15s;
725         }
726     }