MDL-66477 message: Use the generic drawer for the message drawer
[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     .body-container {
460         flex: 1;
461         overflow: hidden;
463         & > * {
464             position: absolute;
465             right: 0;
466             left: 0;
467             top: 0;
468             bottom: 0;
469         }
470     }
472     .footer-container {
473         flex-shrink: 0;
474         overflow-x: hidden;
476         textarea {
477             direction: ltr;
478         }
479     }
481     .matchtext {
482         background-color: lighten($primary, 40%);
483         color: $body-color;
484         height: 1.5rem;
485     }
487     .contact-status {
488         position: absolute;
489         left: 39px;
490         top: 39px;
491         width: 10px;
492         height: 10px;
493         border-radius: 50%;
494         &.online {
495             border: 1px solid $body-bg;
496             background-color: $green;
497         }
498     }
500     .message {
501         p {
502             margin: 0;
503         }
504     }
506     .clickable {
507         cursor: pointer;
509         &:hover {
510             filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
511         }
512     }
514     a,
515     .btn-link {
516         color: inherit;
517     }
518     .btn-link {
519         &:hover,
520         &:focus {
521             background-color: rgba($black, .035);
522             text-decoration: none;
523         }
524     }
526     .icon {
527         margin-right: 0;
528     }
530     .overview-section-toggle {
531         .collapsed-icon-container {
532             display: none;
533         }
534         .expanded-icon-container {
535             display: inline-block;
536         }
538         &.collapsed {
539             .collapsed-icon-container {
540                 display: inline-block;
541             }
542             .expanded-icon-container {
543                 display: none;
544             }
545         }
546     }
548     .btn.btn-link.btn-icon {
549         height: $icon-width;
550         width: $icon-width;
551         padding: 0;
552         border-radius: 50%;
553         flex-shrink: 0;
555         @include hover-focus {
556             background-color: $gray-200;
557         }
559         @each $size, $length in $iconsizes {
560             &.icon-size-#{$size} {
561                 height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
562                 width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
563             }
564         }
565     }
567     .view-overview-body {
568         .section {
569             display: block;
571             &.expanded {
572                 display: flex;
573             }
574         }
575     }
577     .view-conversation {
578         .content-message-container {
579             img {
580                 max-width: 100%;
581             }
582         }
583     }
584     .list-group .list-group-item {
585         border-left: 0;
586         border-right: 0;
587         &:first-child {
588             border-top: 0;
589         }
590         &:last-child {
591             border-bottom: 0;
592         }
593     }
594     .last-message {
595         min-height: 1.5rem;
596     }
597     .section {
598         .collapsing {
599             overflow: hidden;
600         }
601     }
603     .message {
604         &.send {
605             background-color: $message-send-bg;
606             color: $message-send-color;
607             .time {
608                 color: $message-send-time-color;
609             }
610             .tail {
611                 right: 0;
612                 margin-right: -0.5rem;
613                 border-bottom-color: $message-send-bg;
614             }
615         }
616         &.received {
617             background-color: $message-received-bg;
618             color: $message-received-color;
619             .time {
620                 color: $message-received-color-muted;
621             }
622             .tail {
623                 left: 0;
624                 margin-left: -0.5rem;
625                 border-bottom-color: $message-received-bg;
626             }
627         }
628         .tail {
629             content: '';
630             bottom: 0;
631             width: 0;
632             height: 0;
633             border: 0.5rem solid transparent;
634             position: relative;
635         }
636     }
637     .day {
638         color: $message-day-color;
639     }
640     .lazy-load-list {
641         overflow-y: auto;
642     }
644 #page-message-index #region-main {
645     height: 100%;
646     div[role="main"] {
647         height: 100%;
648         #maincontent {
649             margin-top: -1px;
650         }
651         .message-app.main {
652             height: 100%;
653         }
654     }
656 .dir-rtl {
657     .message-drawer {
658         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
659     }