Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
/** The message area **/
2 
@mixin setSelectedContact() {
3 
    background-color: $message-selected-bg;
4 
    color: $message-selected-color;
5 
    border: none;
6 
 
7 
    .information {
8 
        .lastmessage {
9 
            color: $message-selected-color;
10 
        }
11 
    }
12 
    .picture {
13 
        border: none;
14 
    }
15 
}
16 
 
17 
.hidden {
18 
    display: none;
19 
}
20 
 
21 
.preferences-container {
22 
    .container-fluid {
23 
        padding: 0;
24 
 
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 $message-preference-table-border-color;
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 
            th {
52 
                border-left: 1px solid $border-color;
53 
            }
54 
            td {
55 
                &:not(:first-child) {
56 
                    width: 150px;
57 
                    text-align: center;
58 
                }
59 
                &:nth-child(even) {
60 
                    border: 1px solid $border-color;
61 
                }
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 
            &.loading {
78 
                .preference-name {
79 
                    .loading-icon {
80 
                        display: block;
81 
                    }
82 
                }
83 
            }
84 
        }
85 
    }
86 
}
87 
 
88 
.disabled-message {
89 
    display: none;
90 
}
91 
 
92 
.disabled {
93 
    .disabled-message {
94 
        display: block;
95 
 
96 
        + form {
97 
            display: none;
98 
        }
99 
    }
100 
}
101 
 
102 
.general-settings-container {
103 
    .loading-icon {
104 
        display: none;
105 
    }
106 
    .loading {
107 
        .loading-icon {
108 
            display: inline-block;
109 
        }
110 
    }
111 
    label {
112 
        display: inline-block;
113 
    }
114 
}
115 
.processor-container {
116 
    position: relative;
117 
 
118 
    .loading-container {
119 
        display: none;
120 
        position: absolute;
121 
        width: 100%;
122 
        height: 100%;
123 
        text-align: center;
124 
        background-color: $message-loading-bg;
125 
 
126 
        .vertical-align {
127 
            height: 100%;
128 
            width: 0%;
129 
            display: inline-block;
130 
            vertical-align: middle;
131 
        }
132 
    }
133 
 
134 
    &.loading {
135 
        .loading-container {
136 
            display: block;
137 
        }
138 
    }
139 
}
140 
 
141 
.preferences-page-container {
142 
    .checkbox-container {
143 
        margin: 30px 5px;
144 
        line-height: 20px;
145 
 
146 
        input {
147 
            line-height: 20px;
148 
            margin: 0;
149 
        }
150 
 
151 
        .loading-icon {
152 
            display: none;
153 
        }
154 
 
155 
        &.loading {
156 
            .loading-icon {
157 
                display: inline-block;
158 
            }
159 
        }
160 
    }
161 
}
162 
 
163 
.notification-area {
164 
    height: 600px;
165 
    @media (max-height: 670px) {
166 
        height: 500px;
167 
    }
168 
    box-sizing: border-box;
169 
    border-radius: 4px;
170 
    margin-bottom: 30px;
171 
    border: 1px solid $message-notif-area-border-color;
172 
 
173 
    .control-area {
174 
        box-sizing: border-box;
175 
        display: inline-block;
176 
        width: 300px;
177 
        height: 100%;
178 
        overflow: auto;
179 
        -webkit-overflow-scrolling: touch;
180 
        border-right: 1px solid $message-notif-area-border-color;
181 
 
182 
        .content {
183 
            position: relative;
184 
 
185 
            .content-item-container {
186 
                cursor: pointer;
187 
            }
188 
 
189 
            &:empty + .empty-text {
190 
                display: block;
191 
            }
192 
        }
193 
 
194 
        .loading-icon {
195 
            display: none;
196 
        }
197 
 
198 
        .empty-text {
199 
            display: none;
200 
            text-align: center;
201 
            padding-top: 20px;
202 
        }
203 
 
204 
        &.loading {
205 
            .loading-icon {
206 
                display: block;
207 
                text-align: center;
208 
                box-sizing: border-box;
209 
                padding: 5px;
210 
            }
211 
 
212 
            .content:empty + .empty-text {
213 
                display: none;
214 
            }
215 
        }
216 
    }
217 
 
218 
    .content-area {
219 
        box-sizing: border-box;
220 
        display: inline-block;
221 
        width: calc(100% - 300px);
222 
        float: right;
223 
 
224 
        .toggle-mode {
225 
            display: none;
226 
        }
227 
 
228 
        .header {
229 
            height: 50px;
230 
            box-sizing: border-box;
231 
            border-bottom: 1px solid $message-notif-area-border-color;
232 
            padding: 5px;
233 
 
234 
            .image-container {
235 
                display: inline-block;
236 
                height: 25px;
237 
                width: 24px;
238 
                float: left;
239 
            }
240 
 
241 
            .subject-container {
242 
                display: inline-block;
243 
                max-width: calc(100% - 24px);
244 
                white-space: nowrap;
245 
                overflow: hidden;
246 
                text-overflow: ellipsis;
247 
                height: 25px;
248 
                padding-left: 5px;
249 
                box-sizing: border-box;
250 
            }
251 
 
252 
            .timestamp {
253 
                font-size: 10px;
254 
                line-height: 10px;
255 
                margin: 0;
256 
                color: $message-notif-area-timestamp-color;
257 
                margin-left: 30px;
258 
            }
259 
 
260 
            &:empty {
261 
                display: none;
262 
            }
263 
        }
264 
 
265 
        > .content {
266 
            height: 500px;
267 
            @media (max-height: 670px) {
268 
                height: 400px;
269 
            }
270 
            box-sizing: border-box;
271 
            overflow: auto;
272 
            -webkit-overflow-scrolling: touch;
273 
            padding: 15px;
274 
 
275 
            &:empty {
276 
                display: none;
277 
 
278 
                & + .empty-text {
279 
                    display: block;
280 
                    text-align: center;
281 
                    padding-top: 100px;
282 
                }
283 
            }
284 
        }
285 
 
286 
        .empty-text {
287 
            display: none;
288 
        }
289 
 
290 
        .footer {
291 
            height: 50px;
292 
            box-sizing: border-box;
293 
            text-align: center;
294 
 
295 
            a {
296 
                line-height: 50px;
297 
            }
298 
 
299 
            &:empty {
300 
                display: none;
301 
            }
302 
        }
303 
    }
304 
}
305 
 
306 
@media (max-width: 979px) {
307 
    .notification-area {
308 
        position: relative;
309 
        overflow: hidden;
310 
 
311 
        .control-area {
312 
            border-right: none;
313 
            width: 100%;
314 
            position: absolute;
315 
            top: 0;
316 
            left: 0;
317 
            opacity: 1;
318 
            visibility: visible;
319 
            transition: left 0.25s;
320 
        }
321 
 
322 
        .content-area {
323 
            width: 100%;
324 
            position: absolute;
325 
            top: 0;
326 
            right: -100%;
327 
            opacity: 0;
328 
            visibility: hidden;
329 
            transition: right 0.25s, opacity 0.25s, visibility 0.25s;
330 
 
331 
            .toggle-mode {
332 
                display: inline-block;
333 
                float: left;
334 
                width: 70px;
335 
                height: 50px;
336 
                line-height: 50px;
337 
                box-sizing: border-box;
338 
                border-right: 1px solid $message-notif-area-border-color;
339 
                border-bottom: 1px solid $message-notif-area-border-color;
340 
            }
341 
 
342 
            .header {
343 
                display: inline-block;
344 
                width: calc(100% - 70px);
345 
            }
346 
        }
347 
 
348 
        &.show-content-area {
349 
            .control-area {
350 
                left: -100%;
351 
                opacity: 0;
352 
                visibility: hidden;
353 
                transition: left 0.25s, opacity 0.25s, visibility 0.25s;
354 
            }
355 
 
356 
            .content-area {
357 
                right: 0;
358 
                opacity: 1;
359 
                visibility: visible;
360 
                transition: right 0.25s;
361 
            }
362 
        }
363 
    }
364 
}
365 
 
366 
$message-send-bg: $gray-300 !default;
1441 ariadna 367 
$message-send-color: color-contrast($message-send-bg) !default;
1 efrain 368 
$message-send-time-color: mix($message-send-color, $message-send-bg, 100%) !default;
369 
$message-received-bg: $body-bg !default;
1441 ariadna 370 
$message-received-color: color-contrast($message-received-bg) !default;
1 efrain 371 
$message-received-color-muted: mix($message-received-color, $message-received-bg, 70%) !default;
372 
$message-app-bg: mix($message-send-bg, $message-received-bg, 50%) !default;
1441 ariadna 373 
$message-day-color: color-contrast($message-app-bg) !default;
1 efrain 374 
 
375 
.drawer {
376 
    .message-app {
377 
        height: 100%;
378 
        .icon-back-in-app {
379 
            display: none;
380 
        }
381 
        .icon-back-in-drawer {
382 
            display: inherit;
383 
        }
384 
    }
385 
}
386 
 
387 
.message-app {
388 
    display: flex;
389 
    flex-direction: column;
390 
    background-color: $message-app-bg;
391 
 
392 
    .icon-back-in-drawer {
393 
        display: none;
394 
    }
395 
 
396 
    &.main {
397 
        min-height: 400px;
398 
    }
399 
 
400 
    .header-container {
401 
        flex-shrink: 0;
402 
    }
403 
 
404 
    .overflow-y {
405 
        overflow-y: auto;
406 
    }
407 
 
408 
    @media (max-height: 320px) {
409 
        .header-container [data-region="view-overview"]:not(.hidden) {
410 
            display: flex;
411 
            align-items: center;
412 
        }
1441 ariadna 413 
 
1 efrain 414 
        .overflow-y {
415 
            overflow-y: unset;
416 
        }
417 
    }
418 
    .body-container {
419 
        flex: 1;
420 
        overflow: hidden;
421 
 
422 
        & > * {
423 
            position: absolute;
424 
            right: 0;
425 
            left: 0;
426 
            top: 0;
427 
            bottom: 0;
428 
            overflow: auto;
429 
        }
430 
    }
431 
 
432 
    .footer-container {
433 
        flex-shrink: 0;
434 
 
435 
        textarea {
436 
            direction: ltr;
437 
        }
438 
    }
439 
 
440 
    .contact-status {
441 
        position: absolute;
442 
        left: 39px;
443 
        top: 34px;
444 
        &.online {
445 
            .icon {
446 
                color: $green;
447 
            }
448 
        }
449 
    }
450 
 
451 
    .message {
452 
        p {
453 
            margin: 0;
454 
        }
455 
    }
456 
 
457 
    .clickable {
458 
        cursor: pointer;
459 
 
460 
        &:hover {
461 
            filter: drop-shadow(2px 2px 2px $message-clickable-hover-shadow);
462 
        }
463 
    }
464 
 
465 
    a,
466 
    .btn-link {
467 
        color: inherit;
468 
    }
469 
    .btn-link {
470 
        &:hover,
471 
        &:focus {
472 
            background-color: rgba($black, .035);
473 
            text-decoration: none;
474 
        }
475 
    }
476 
 
477 
    .icon {
478 
        margin-right: 0;
479 
    }
480 
 
481 
    .overview-section-toggle {
482 
        .collapsed-icon-container {
483 
            display: none;
484 
        }
485 
        .expanded-icon-container {
486 
            display: inline-block;
487 
        }
488 
 
489 
        &.collapsed {
490 
            .collapsed-icon-container {
491 
                display: inline-block;
492 
            }
493 
            .expanded-icon-container {
494 
                display: none;
495 
            }
496 
        }
497 
    }
498 
 
499 
    .view-overview-body {
500 
        .section {
501 
            display: block;
502 
 
503 
            &.expanded {
504 
                display: flex;
505 
            }
506 
 
507 
            div[data-region="toggle"] {
508 
                padding: 0.1rem;
509 
            }
510 
        }
511 
    }
512 
 
513 
    .view-conversation {
514 
        .content-message-container {
515 
            img {
516 
                max-width: 100%;
517 
            }
518 
        }
519 
    }
520 
    .list-group {
521 
        border-radius: 0;
522 
        .list-group-item {
523 
            border-left: 0;
524 
            border-right: 0;
525 
            &:hover {
526 
                color: $white;
527 
                background-color: $primary;
528 
            }
529 
            &:first-child {
530 
                border-top: 0;
531 
            }
532 
            &:last-child {
533 
                border-bottom: 0;
534 
            }
535 
            &.list-group-item-action {
536 
                margin: 0.1rem;
537 
                width: auto;
538 
                text-align: inherit;
539 
            }
540 
        }
541 
    }
542 
    .last-message {
543 
        min-height: 1.5rem;
544 
    }
545 
    .section {
546 
        .collapsing {
547 
            overflow: hidden;
548 
        }
549 
    }
550 
 
551 
    .message {
552 
        &.send {
553 
            background-color: $message-send-bg;
554 
            color: $message-send-color;
555 
            .time {
556 
                color: $message-send-time-color;
557 
            }
558 
            .tail {
559 
                right: 0;
560 
                margin-right: -0.5rem;
561 
                border-bottom-color: $message-send-bg;
562 
            }
563 
        }
564 
        &.received {
565 
            background-color: $message-received-bg;
566 
            color: $message-received-color;
567 
            .time {
568 
                color: $message-received-color-muted;
569 
            }
570 
            .tail {
571 
                left: 0;
572 
                margin-left: -0.5rem;
573 
                border-bottom-color: $message-received-bg;
574 
            }
575 
        }
576 
        .tail {
577 
            content: '';
578 
            bottom: 0;
579 
            width: 0;
580 
            height: 0;
581 
            border: 0.5rem solid transparent;
582 
            position: relative;
583 
        }
584 
    }
585 
    .day {
586 
        color: $message-day-color;
587 
    }
588 
    .lazy-load-list {
1441 ariadna 589 
        overflow-y: inherit;
1 efrain 590 
    }
591 
}
592 
#page-message-index {
593 
    #page-header {
594 
        display: none;
595 
    }
596 
    #region-main {
597 
        height: 100%;
598 
        margin-top: 0;
599 
        .conversationcontainer {
600 
            .section {
601 
                max-height: calc(100vh - 50px);
602 
            }
603 
        }
604 
        div[role="main"] {
605 
            height: 100%;
606 
            #maincontent {
607 
                margin-top: -1px;
608 
            }
609 
            .message-app.main {
610 
                height: 100%;
611 
            }
612 
        }
613 
    }
614 
}
615 
.dir-rtl {
616 
    .message-drawer {
617 
        box-shadow: 2px 2px 4px $message-drawer-shadow;
618 
    }
619 
}
620 
 
621 
.message-app {
622 
    .emoji-picker-container {
623 
        position: absolute;
624 
        top: -5px;
625 
        right: 5px;
626 
        transform: translateY(-100%);
627 
 
628 
        .emoji-picker {
629 
            .picker-row {
630 
                // To override the button styling for the message app.
631 
                .emoji-button {
632 
                    height: $picker-emoji-button-size;
633 
                    width: $picker-emoji-button-size;
634 
                }
635 
            }
636 
        }
637 
 
1441 ariadna 638 
        @include media-breakpoint-down(sm) {
1 efrain 639 
            right: -1 * map-get($spacers, 2);
640 
        }
641 
    }
642 
 
643 
    @media (max-height: 495px) {
644 
        .emoji-picker-container {
645 
            position: fixed;
646 
            top: 0;
647 
            transform: none;
648 
        }
649 
    }
650 
 
651 
    .emoji-auto-complete-container {
652 
        overflow: auto;
653 
        // Add a 50px buffer to account for scroll bars.
654 
        max-height: $picker-row-height + 50px;
655 
        transition: max-height .15s ease-in-out;
656 
        visibility: visible;
657 
 
658 
        &.hidden {
659 
            display: block;
660 
            max-height: 0;
661 
            visibility: hidden;
662 
            overflow: hidden;
663 
            transition: max-height .15s ease-in-out, visibility 0s linear .15s, overflow 0s linear .15s;
664 
        }
665 
    }
666 
}