164121a4dbb9584d53d0f234c90e65e11ff27459
[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-drawer-width: 320px;
423 .message-app {
424     display: flex;
425     flex-direction: column;
426     @include transition();
428     &.drawer {
429         z-index: $zindex-sticky;
430         position: fixed;
431         top: $navbar-height;
432         right: 0;
433         height: calc(100% - #{$navbar-height});
434         width: $message-drawer-width;
435         box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
437         .body-container {
438             & > * {
439                 position: absolute;
440             }
441         }
442     }
444     &.main {
445         height: 768px;
446     }
448     &.hidden {
449         display: block;
450         right: $message-drawer-width * -1;
451     }
453     .header-container {
454         flex-shrink: 0;
455     }
457     .body-container {
458         flex: 1;
459         overflow: hidden;
461         & > * {
462             right: 0;
463             left: 0;
464             top: 0;
465             bottom: 0;
466         }
467     }
469     .footer-container {
470         flex-shrink: 0;
471         overflow-x: hidden;
473         textarea {
474             direction: ltr;
475         }
476     }
478     .matchtext {
479         background-color: lighten($primary, 40%);
480         color: $body-color;
481         height: 1.5rem;
482     }
483     .contact-status {
484         position: absolute;
485         left: 39px;
486         top: 39px;
487         width: 10px;
488         height: 10px;
489         border-radius: 50%;
490         &.online {
491             border: 1px solid $body-bg;
492             background-color: $green;
493         }
494     }
496     .message {
497         p {
498             margin: 0;
499         }
500     }
502     .clickable {
503         cursor: pointer;
505         &:hover {
506             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);
507         }
508     }
510     a,
511     .btn-link {
512         color: inherit;
513     }
514     .btn-link {
515         &:hover,
516         &:focus {
517             background-color: rgba($black, .035);
518             text-decoration: none;
519         }
520     }
522     .icon {
523         margin-right: 0;
524     }
526     .overview-section-toggle {
527         .collapsed-icon-container {
528             display: none;
529         }
530         .expanded-icon-container {
531             display: inline-block;
532         }
534         &.collapsed {
535             .collapsed-icon-container {
536                 display: inline-block;
537             }
538             .expanded-icon-container {
539                 display: none;
540             }
541         }
542     }
544     .btn.btn-link.btn-icon {
545         height: $icon-width;
546         width: $icon-width;
547         padding: 0;
548         border-radius: 50%;
549         flex-shrink: 0;
551         @include hover-focus {
552             background-color: $gray-200;
553         }
555         @each $size, $length in $iconsizes {
556             &.icon-size-#{$size} {
557                 height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
558                 width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
559             }
560         }
561     }
563     .view-overview-body {
564         .section {
565             display: block;
567             &.expanded {
568                 display: flex;
569             }
570         }
571     }
573     .view-conversation {
574         .content-message-container {
575             img {
576                 max-width: 100%;
577             }
578         }
579     }
580     .list-group .list-group-item {
581         border-left: 0;
582         border-right: 0;
583         &:first-child {
584             border-top: 0;
585         }
586         &:last-child {
587             border-bottom: 0;
588         }
589     }
590     .last-message {
591         min-height: 1.5rem;
592     }
593     .section {
594         .collapsing {
595             overflow: hidden;
596         }
597     }
599     .lazy-load-list {
600         overflow-y: auto;
601     }
604 .dir-rtl {
605     .message-drawer {
606         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
607     }