MDL-66477 message: Use the generic drawer for the message drawer
[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.preferences-container {
22 .container-fluid {
23 padding: 0;
24
5edb0fbc 25 .col-md-6 {
963ba889
RW
26 min-height: 20px;
27 }
28 }
29 .align-bottom {
30 vertical-align: bottom;
31 }
32 .preference-table {
33 border: 1px solid #ddd;
34
35 thead {
36 th {
37 text-align: center;
38
39 .config-warning {
40 display: none;
41 }
42
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 }
68
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;
82
83 input[type="checkbox"]:checked + .preference-state-status-container {
84 background-color: #5cb85c;
85
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;
102
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 }
120
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 }
141}
142
143.disabled-message {
f4143537 144 display: none;
536f0460 145}
f4143537 146
963ba889
RW
147.disabled {
148 .disabled-message {
149 display: block;
150
151 + form {
152 display: none;
153 }
536f0460 154 }
963ba889 155}
f4143537 156
963ba889
RW
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;
536f0460 168 }
963ba889
RW
169}
170.processor-container {
171 position: relative;
f4143537 172
963ba889
RW
173 .loading-container {
174 display: none;
175 position: absolute;
536f0460
DW
176 width: 100%;
177 height: 100%;
963ba889
RW
178 text-align: center;
179 background-color: rgba(255, 255, 255, 0.5);
180
181 .vertical-align {
182 height: 100%;
183 width: 0%;
184 display: inline-block;
185 vertical-align: middle;
186 }
536f0460 187 }
f4143537 188
963ba889
RW
189 &.loading {
190 .loading-container {
191 display: block;
192 }
536f0460 193 }
963ba889 194}
f4143537 195
963ba889
RW
196.preferences-page-container {
197 .checkbox-container {
198 margin: 30px 5px;
199 line-height: 20px;
200
201 input {
202 line-height: 20px;
203 margin: 0;
204 }
205
206 .loading-icon {
207 display: none;
208 }
209
210 &.loading {
211 .loading-icon {
212 display: inline-block;
213 }
214 }
215 }
216}
217
218.notification-area {
219 height: 600px;
c3e72743
DW
220 @media (max-height: 670px) {
221 height: 500px;
222 }
963ba889
RW
223 box-sizing: border-box;
224 border-radius: 4px;
225 margin-bottom: 30px;
226 border: 1px solid #e3e3e3;
227
228 .control-area {
229 box-sizing: border-box;
230 display: inline-block;
231 width: 300px;
536f0460 232 height: 100%;
963ba889
RW
233 overflow: auto;
234 -webkit-overflow-scrolling: touch;
235 border-right: 1px solid #e3e3e3;
236
237 .content {
238 position: relative;
239
240 .content-item-container {
241 cursor: pointer;
242 }
243
244 &:empty + .empty-text {
245 display: block;
246 }
247 }
248
249 .loading-icon {
250 display: none;
251 }
252
253 .empty-text {
254 display: none;
255 text-align: center;
256 padding-top: 20px;
257 }
258
259 &.loading {
260 .loading-icon {
261 display: block;
262 text-align: center;
263 box-sizing: border-box;
264 padding: 5px;
265 }
266
267 .content:empty + .empty-text {
268 display: none;
269 }
270 }
536f0460 271 }
f4143537 272
963ba889
RW
273 .content-area {
274 box-sizing: border-box;
275 display: inline-block;
276 width: calc(100% - 300px);
277 float: right;
f4143537 278
963ba889
RW
279 .toggle-mode {
280 display: none;
281 }
282
283 .header {
284 height: 50px;
285 box-sizing: border-box;
286 border-bottom: 1px solid #e3e3e3;
536f0460 287 padding: 5px;
963ba889
RW
288
289 .image-container {
290 display: inline-block;
291 height: 25px;
292 width: 24px;
293 float: left;
294 }
295
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 }
306
307 .timestamp {
308 font-size: 10px;
309 line-height: 10px;
310 margin: 0;
311 color: #666;
312 margin-left: 30px;
313 }
314
315 &:empty {
316 display: none;
317 }
318 }
319
c22141bd 320 > .content {
963ba889 321 height: 500px;
c3e72743
DW
322 @media (max-height: 670px) {
323 height: 400px;
324 }
963ba889
RW
325 box-sizing: border-box;
326 overflow: auto;
327 -webkit-overflow-scrolling: touch;
328 padding: 15px;
329
330 &:empty {
331 display: none;
332
333 & + .empty-text {
334 display: block;
335 text-align: center;
336 padding-top: 100px;
337 }
338 }
339 }
340
341 .empty-text {
342 display: none;
343 }
344
345 .footer {
346 height: 50px;
347 box-sizing: border-box;
348 text-align: center;
349
350 a {
351 line-height: 50px;
352 }
353
354 &:empty {
355 display: none;
356 }
536f0460
DW
357 }
358 }
963ba889 359}
f4143537 360
963ba889 361@media (max-width: 979px) {
963ba889
RW
362 .notification-area {
363 position: relative;
364 overflow: hidden;
365
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 }
376
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;
385
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 }
396
397 .header {
398 display: inline-block;
399 width: calc(100% - 70px);
400 }
401 }
402
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 }
410
411 .content-area {
412 right: 0;
413 opacity: 1;
414 visibility: visible;
415 transition: right 0.25s;
416 }
417 }
418 }
419}
420
a4ae0630
BB
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;
5005d8cf 429
8aca1807
JP
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 }
440}
441
fd998fc6 442.message-app {
5005d8cf
RW
443 display: flex;
444 flex-direction: column;
a4ae0630 445 background-color: $message-app-bg;
5005d8cf 446
7cbea160
BB
447 .icon-back-in-drawer {
448 display: none;
449 }
450
fd998fc6 451 &.main {
7cbea160 452 min-height: 400px;
fd998fc6
MN
453 }
454
5005d8cf
RW
455 .header-container {
456 flex-shrink: 0;
457 }
458
459 .body-container {
460 flex: 1;
461 overflow: hidden;
462
463 & > * {
7cbea160 464 position: absolute;
5005d8cf
RW
465 right: 0;
466 left: 0;
467 top: 0;
468 bottom: 0;
5005d8cf
RW
469 }
470 }
471
472 .footer-container {
473 flex-shrink: 0;
474 overflow-x: hidden;
87dc257d
SR
475
476 textarea {
477 direction: ltr;
478 }
5005d8cf
RW
479 }
480
481 .matchtext {
482 background-color: lighten($primary, 40%);
483 color: $body-color;
484 height: 1.5rem;
485 }
a4ae0630 486
5005d8cf
RW
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 }
499
500 .message {
501 p {
502 margin: 0;
503 }
504 }
505
506 .clickable {
507 cursor: pointer;
508
509 &:hover {
a4ae0630 510 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
5005d8cf
RW
511 }
512 }
513
514 a,
515 .btn-link {
516 color: inherit;
517 }
dfd6eec2
BB
518 .btn-link {
519 &:hover,
520 &:focus {
347fb901 521 background-color: rgba($black, .035);
dfd6eec2
BB
522 text-decoration: none;
523 }
524 }
5005d8cf
RW
525
526 .icon {
527 margin-right: 0;
528 }
529
530 .overview-section-toggle {
531 .collapsed-icon-container {
532 display: none;
533 }
534 .expanded-icon-container {
535 display: inline-block;
536 }
537
538 &.collapsed {
539 .collapsed-icon-container {
540 display: inline-block;
541 }
542 .expanded-icon-container {
543 display: none;
544 }
545 }
546 }
547
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;
554
555 @include hover-focus {
556 background-color: $gray-200;
557 }
558
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 }
566
567 .view-overview-body {
568 .section {
569 display: block;
570
571 &.expanded {
572 display: flex;
573 }
574 }
575 }
576
577 .view-conversation {
578 .content-message-container {
579 img {
580 max-width: 100%;
581 }
582 }
583 }
051c675f
BB
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 }
4d446b88
BB
594 .last-message {
595 min-height: 1.5rem;
596 }
4631749c 597 .section {
4631749c
BB
598 .collapsing {
599 overflow: hidden;
600 }
601 }
a4ae0630 602
a4300f3e 603 .message {
a4ae0630
BB
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 }
a4300f3e
BB
628 .tail {
629 content: '';
630 bottom: 0;
631 width: 0;
632 height: 0;
633 border: 0.5rem solid transparent;
634 position: relative;
635 }
a4ae0630
BB
636 }
637 .day {
638 color: $message-day-color;
a4300f3e 639 }
c3377415
RW
640 .lazy-load-list {
641 overflow-y: auto;
642 }
5005d8cf 643}
7cbea160
BB
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 }
655}
5005d8cf
RW
656.dir-rtl {
657 .message-drawer {
658 box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
659 }
660}