Merge branch 'MDL-63674-master' of git://github.com/rezaies/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / message.less
1 /** The message area **/
2 .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 .preferences-container {
18     .container-fluid {
19         padding: 0;
21         .span6 {
22             min-height: 20px;
23         }
24     }
25     .align-bottom {
26         vertical-align: bottom;
27     }
28     .preference-table {
29         border: 1px solid #ddd;
31         thead {
32             th {
33                 text-align: center;
35                 .config-warning {
36                     display: none;
37                 }
39                 &.unconfigured {
40                     .config-warning {
41                         display: inline-block;
42                     }
43                 }
44             }
45         }
46         tr {
47             td {
48                 &:not(:first-child) {
49                     width: 150px;
50                     text-align: center;
51                 }
52                 &:nth-child(even) {
53                     background-color: #f7f7f7;
54                 }
55             }
56             th:nth-child(even) {
57                 background-color: #f7f7f7;
58             }
59         }
60         .preference-row {
61             .hover-tooltip-container {
62                 display: inline-block;
63             }
65             .preference-name {
66                 vertical-align: middle;
67             }
68             .disabled-message {
69                 text-align: center;
70                 height: 30px;
71                 line-height: 30px;
72             }
73             .preference-state {
74                 margin: 0;
75                 padding: 0;
76                 display: inline-block;
77                 vertical-align: middle;
79                 input[type="checkbox"]:checked + .preference-state-status-container {
80                     background-color: #5cb85c;
82                     .on-text {
83                         display: inline-block;
84                     }
85                     .off-text {
86                         display: none;
87                     }
88                 }
89                 .preference-state-status-container {
90                     width: 30px;
91                     height: 30px;
92                     line-height: 30px;
93                     text-align: center;
94                     border-radius: 4px;
95                     background-color: #d9534f;
96                     color: #fff;
97                     cursor: pointer;
99                     .loading-icon {
100                         display: none;
101                     }
102                     .on-text {
103                         display: none;
104                     }
105                     .off-text {
106                         display: inline-block;
107                     }
108                 }
109                 &.loading {
110                     input[type="checkbox"]:checked + .preference-state-status-container {
111                         .on-text,
112                         .off-text {
113                             display: none;
114                         }
115                     }
117                     .preference-state-status-container {
118                         .on-text,
119                         .off-text {
120                             display: none;
121                         }
122                         .loading-icon {
123                             display: block;
124                         }
125                     }
126                 }
127             }
128             &.loading {
129                 .preference-name {
130                     .loading-icon {
131                         display: block;
132                     }
133                 }
134             }
135         }
136     }
139 .disabled-message {
140     display: none;
143 .disabled {
144     .disabled-message {
145         display: block;
147         + form {
148             display: none;
149         }
150     }
153 .general-settings-container {
154     .loading-icon {
155         display: none;
156     }
157     .loading {
158         .loading-icon {
159             display: inline-block;
160         }
161     }
162     label {
163         display: inline-block;
164     }
166 .processor-container {
167     position: relative;
169     .loading-container {
170         display: none;
171         position: absolute;
172         width: 100%;
173         height: 100%;
174         text-align: center;
175         background-color: rgba(255, 255, 255, 0.5);
177         .vertical-align {
178             height: 100%;
179             width: 0%;
180             display: inline-block;
181             vertical-align: middle;
182         }
183     }
185     &.loading {
186         .loading-container {
187             display: block;
188         }
189     }
192 .preferences-page-container {
193     .checkbox-container {
194         margin: 30px 5px;
195         line-height: 20px;
197         input {
198             line-height: 20px;
199             margin: 0;
200         }
202         .loading-icon {
203             display: none;
204         }
206         &.loading {
207             .loading-icon {
208                 display: inline-block;
209             }
210         }
211     }
214 .notification-area {
215     height: 600px;
216     @media (max-height: 670px) {
217         height: 500px;
218     }
219     box-sizing: border-box;
220     border-radius: 4px;
221     margin-bottom: 30px;
222     border: 1px solid #e3e3e3;
224     .control-area {
225         box-sizing: border-box;
226         display: inline-block;
227         width: 300px;
228         height: 100%;
229         overflow: auto;
230         -webkit-overflow-scrolling: touch;
231         border-right: 1px solid #e3e3e3;
233         .content {
234             position: relative;
236             .content-item-container {
237                 cursor: pointer;
238             }
240             &:empty + .empty-text {
241                 display: block;
242             }
243         }
245         .loading-icon {
246             display: none;
247         }
249         .empty-text {
250             display: none;
251             text-align: center;
252             padding-top: 20px;
253         }
255         &.loading {
256             .loading-icon {
257                 display: block;
258                 text-align: center;
259                 box-sizing: border-box;
260                 padding: 5px;
261             }
263             .content:empty + .empty-text {
264                 display: none;
265             }
266         }
267     }
269     .content-area {
270         box-sizing: border-box;
271         display: inline-block;
272         width: ~"calc(100% - 300px)";
273         float: right;
275         .toggle-mode {
276             display: none;
277         }
279         .header {
280             height: 50px;
281             box-sizing: border-box;
282             border-bottom: 1px solid #e3e3e3;
283             padding: 5px;
285             .image-container {
286                 display: inline-block;
287                 height: 25px;
288                 width: 24px;
289                 float: left;
290             }
292             .subject-container {
293                 display: inline-block;
294                 max-width: ~"calc(100% - 24px)";
295                 white-space: nowrap;
296                 overflow: hidden;
297                 text-overflow: ellipsis;
298                 height: 25px;
299                 padding-left: 5px;
300                 box-sizing: border-box;
301             }
303             .timestamp {
304                 font-size: 10px;
305                 line-height: 10px;
306                 margin: 0;
307                 color: #666;
308                 margin-left: 30px;
309             }
311             &:empty {
312                 display: none;
313             }
314         }
316         > .content {
317             height: 500px;
318             @media (max-height: 670px) {
319                 height: 400px;
320             }
321             box-sizing: border-box;
322             overflow: auto;
323             -webkit-overflow-scrolling: touch;
324             padding: 15px;
326             &:empty {
327                 display: none;
329                 & + .empty-text {
330                     display: block;
331                     text-align: center;
332                     padding-top: 100px;
333                 }
334             }
335         }
337         .empty-text {
338             display: none;
339         }
341         .footer {
342             height: 50px;
343             box-sizing: border-box;
344             text-align: center;
346             a {
347                 line-height: 50px;
348             }
350             &:empty {
351                 display: none;
352             }
353         }
354     }
357 @media (max-width: 979px) {
358     .notification-area {
359         position: relative;
360         overflow: hidden;
362         .control-area {
363             border-right: none;
364             width: 100%;
365             position: absolute;
366             top: 0;
367             left: 0;
368             opacity: 1;
369             visibility: visible;
370             transition: left 0.25s;
371         }
373         .content-area {
374             width: 100%;
375             position: absolute;
376             top: 0;
377             right: -100%;
378             opacity: 0;
379             visibility: hidden;
380             transition: right 0.25s, opacity 0.25s, visibility 0.25s;
382             .toggle-mode {
383                 display: inline-block;
384                 float: left;
385                 width: 70px;
386                 height: 50px;
387                 line-height: 50px;
388                 box-sizing: border-box;
389                 border-right: 1px solid #e3e3e3;
390                 border-bottom: 1px solid #e3e3e3;
391             }
393             .header {
394                 display: inline-block;
395                 width: ~"calc(100% - 70px)";
396             }
397         }
399         &.show-content-area {
400             .control-area {
401                 left: -100%;
402                 opacity: 0;
403                 visibility: hidden;
404                 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
405             }
407             .content-area {
408                 right: 0;
409                 opacity: 1;
410                 visibility: visible;
411                 transition: right 0.25s;
412             }
413         }
414     }
417 @message-drawer-width: 320px;
419 .message-app {
421     background-color: @white;
422     display: flex;
423     flex-direction: column;
425     &.drawer {
426         position: fixed;
427         right: 0;
428         width: @message-drawer-width;
429         z-index: 999;
430         box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
431     }
433     &.main {
434         height: 768px;
435     }
437     @media (min-width: 980px) {
438         .drawer-top {
439             display: none;
440         }
441         height: ~"calc(100% - 42px)";
442         top: 42px;
443     }
445     .transition(all .2s ease-in-out);
447     &.hidden {
448         display: block;
449         right: @message-drawer-width * -1;
450     }
452     .header-container {
453         flex-shrink: 0;
454     }
456     .searchinput {
457         box-shadow: none;
458         width: 100%;
459     }
461     [data-region="confirm-dialogue-container"] {
462         box-sizing: border-box;
463         * {
464             box-sizing: border-box;
465         }
466         .btn-block {
467             margin-left: 0;
468         }
469     }
471     .body-container {
472         flex: 1;
473         overflow: hidden;
475         & > * {
476             position: absolute;
477             right: 0;
478             left: 0;
479             top: 0;
480             bottom: 0;
481         }
482     }
484     .footer-container {
485         flex-shrink: 0;
486         overflow-x: hidden;
488         textarea {
489             direction: ltr;
490         }
491     }
493     .matchtext {
494         background-color: lighten(@blue, 40%);
495         color: @textColor;
496         height: 1.5rem;
497     }
499     .contact-status {
500         position: absolute;
501         left: 39px;
502         top: 39px;
503         width: 10px;
504         height: 10px;
505         border-radius: 50%;
506         &.online {
507             border: 1px solid @green;
508             background-color: @green;
509         }
510     }
512     a,
513     .btn-link {
514         text-decoration: none;
515         color: inherit;
516     }
517     .btn-link {
518         &:hover,
519         &:focus {
520             background-color: darken(@wellBackground, 5%);
521             text-decoration: none;
522         }
523     }
524     .accordion-group .collapse.in {
525         overflow-y: auto;
526     }
527     .message {
528         p {
529             margin: 0;
530         }
531     }
533     .clickable {
534         cursor: pointer;
536         &:hover {
537             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);
538         }
539     }
541     h6,
542     .h6 {
543         font-size: 14px;
544         font-weight: normal;
545     }
547     .accordion-group {
548         .collapsed-icon-container {
549             display: inline-block;
550         }
551         .expanded-icon-container {
552             display: none;
553         }
555         &.expanded {
556             .collapsed-icon-container {
557                 display: none;
558             }
559             .expanded-icon-container {
560                 display: inline-block;
561             }
562         }
563     }
565     .view-overview-body {
566         .section {
567             display: block;
569             &.expanded {
570                 display: flex;
571                 flex-direction: column;
572             }
573         }
574     }
575     .onepix {
576         height: 1px;
577         width: 1px;
578         position: absolute;
579     }
581     .view-conversation {
582         .content-message-container {
583             img {
584                 max-width: 100%;
585             }
586         }
587     }
588     .list-group {
589         .list-group-item {
590             border-top: 1px solid #e3e3e3;
591             border-bottom: 1px solid #e3e3e3;
592             margin-bottom: -1px;
593             &:first-child {
594                 border-top: 0;
595             }
596             &:last-child {
597                 border-bottom: 0;
598                 margin-bottom: 0;
599             }
600         }
601     }
602     .last-message {
603         min-height: 20px;
604     }
606     .lazy-load-list {
607         overflow-y: auto;
608     }
611 .dir-rtl {
612     .message-drawer {
613         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
614     }
617 @media (max-width: 480px) {
618     .messaging-area-container {
619         .messaging-area {
620             .messages-area {
621                 &.editing {
622                     .messages-header {
623                         height: 80px;
625                         .delete-all {
626                             top: 30px;
627                         }
629                         .actions {
630                             top: 30px;
631                         }
632                     }
634                     .messages {
635                         height: 470px;
636                     }
637                 }
638             }
639         }
640     }