MDL-64506 templates: replace spans where and col-x appears
[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
5005d8cf
RW
421$message-drawer-width: 320px;
422
fd998fc6 423.message-app {
5005d8cf
RW
424 display: flex;
425 flex-direction: column;
426 @include transition();
427
fd998fc6
MN
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);
436
437 .body-container {
438 & > * {
439 position: absolute;
440 }
441 }
442 }
443
444 &.main {
445 height: 768px;
446 }
447
5005d8cf
RW
448 &.hidden {
449 display: block;
450 right: $message-drawer-width * -1;
451 }
452
453 .header-container {
454 flex-shrink: 0;
455 }
456
457 .body-container {
458 flex: 1;
459 overflow: hidden;
460
461 & > * {
5005d8cf
RW
462 right: 0;
463 left: 0;
464 top: 0;
465 bottom: 0;
5005d8cf
RW
466 }
467 }
468
469 .footer-container {
470 flex-shrink: 0;
471 overflow-x: hidden;
87dc257d
SR
472
473 textarea {
474 direction: ltr;
475 }
5005d8cf
RW
476 }
477
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 }
495
496 .message {
497 p {
498 margin: 0;
499 }
500 }
501
502 .clickable {
503 cursor: pointer;
504
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 }
509
510 a,
511 .btn-link {
512 color: inherit;
513 }
dfd6eec2
BB
514 .btn-link {
515 &:hover,
516 &:focus {
347fb901 517 background-color: rgba($black, .035);
dfd6eec2
BB
518 text-decoration: none;
519 }
520 }
5005d8cf
RW
521
522 .icon {
523 margin-right: 0;
524 }
525
526 .overview-section-toggle {
527 .collapsed-icon-container {
528 display: none;
529 }
530 .expanded-icon-container {
531 display: inline-block;
532 }
533
534 &.collapsed {
535 .collapsed-icon-container {
536 display: inline-block;
537 }
538 .expanded-icon-container {
539 display: none;
540 }
541 }
542 }
543
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;
550
551 @include hover-focus {
552 background-color: $gray-200;
553 }
554
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 }
562
563 .view-overview-body {
564 .section {
565 display: block;
566
567 &.expanded {
568 display: flex;
569 }
570 }
571 }
572
573 .view-conversation {
574 .content-message-container {
575 img {
576 max-width: 100%;
577 }
578 }
579 }
051c675f
BB
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 }
4d446b88
BB
590 .last-message {
591 min-height: 1.5rem;
592 }
4631749c 593 .section {
4631749c
BB
594 .collapsing {
595 overflow: hidden;
596 }
597 }
c3377415
RW
598
599 .lazy-load-list {
600 overflow-y: auto;
601 }
5005d8cf
RW
602}
603
604.dir-rtl {
605 .message-drawer {
606 box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
607 }
608}