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