Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
$standard-border: 1px solid $dropdown-border-color;
2 
$region-container-height: 304px;
3 
$region-container-width: 280px;
4 
$region-container-z-index: $zindex-popover;
5 
$region-header-height: 40px;
6 
$region-footer-height: 40px;
7 
$content-item-hover-colour-bg: var(--primary-color-100);
8 
$content-item-hover-colour-text: $body-color;
9 
$content-item-selected-colour-bg: var(--main-theme-color);
10 
$content-item-unread-colour: $green-100;
11 
$content-header-footer-height: 110px;
12 
 
13 
@mixin invisible() {
14 
    opacity: 0;
15 
    visibility: hidden;
16 
}
17 
 
18 
@mixin visible() {
19 
    opacity: 1;
20 
    visibility: visible;
21 
}
22 
 
23 
.popover-region {
24 
    position: relative;
25 
}
26 
 
27 
.popover-region-toggle {
28 
    cursor: pointer;
29 
}
30 
 
31 
.popover-region-container {
32 
    @include visible();
33 
 
34 
    position: absolute;
35 
    right: 0;
36 
    top: 40px;
37 
    height: $region-container-height;
38 
    width: 290px;
39 
    z-index: $region-container-z-index;
40 
    min-width: $dropdown-min-width;
41 
 
42 
    padding: 12px;
43 
    margin: $dropdown-spacer 0 0; // override default ul
44 
    @include font-size($dropdown-font-size);
45 
    color: $dropdown-color;
46 
    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
47 
    list-style: none;
48 
    background-color: $dropdown-bg;
49 
    background-clip: padding-box;
50 
    @include border-radius($dropdown-border-radius);
51 
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
52 
 
53 
    @include media-breakpoint-between(xs, sm) {
54 
        top: 50px;
55 
        left: 0;
56 
        right: auto;
57 
        width: 100%;
58 
        position: fixed;
59 
    }
60 
 
61 
    .theme-dark & {
62 
        color: $dm-dropdown-color;
63 
        background-color: $dm-dropdown-bg;
64 
        border: 1px solid $dm-border-color;
65 
    }
66 
}
67 
 
68 
.popover-region-header-container {
69 
    display: inline-flex;
70 
    padding: 0;
71 
    margin: 0;
72 
    width: 100%;
73 
    box-sizing: border-box;
74 
 
75 
    .theme-dark & {
76 
        border-color: $dm-dropdown-border-color;
77 
    }
78 
}
79 
 
80 
.popover-region-header-text {
81 
    display: inline-flex;
82 
    align-items: center;
83 
    justify-content: center;
84 
    margin: 0 10px;
85 
    font-size: $font-size-sm;
86 
    font-weight: $font-weight-medium;
87 
    color: $dropdown-header-color;
88 
 
89 
    .theme-dark & {
90 
        color: $dm-dropdown-header-color;
91 
    }
92 
}
93 
 
94 
.popover-region-header-actions {
95 
    display: inline-flex;
96 
    align-items: center;
97 
    margin-left: auto;
98 
 
99 
    .loading-icon {
100 
        margin-left: 10px;
101 
        display: none;
102 
 
103 
        .icon {
104 
            font-size: 12px;
105 
            height: 12px;
106 
            width: 12px;
107 
            align-self: center;
108 
            line-height: 1.2;
109 
        }
110 
    }
111 
 
112 
    .newmessage-link {
113 
        margin-right: 10px;
114 
    }
115 
 
116 
    label {
117 
        display: inline-block;
118 
        text-align: center;
119 
        margin-bottom: 0;
120 
    }
121 
}
122 
 
123 
.popover-region-content-container {
124 
    height: $region-container-height - 120px;
125 
    width: 100%;
126 
    overflow-y: auto;
127 
    -webkit-overflow-scrolling: touch;
128 
 
129 
    @include thin-scrolls($gray-200);
130 
 
131 
    .theme-dark & {
132 
        @include thin-scrolls($dm-drawer-scroll-bg-track);
133 
    }
134 
 
135 
    >.loading-icon {
136 
        display: none;
137 
        text-align: center;
138 
        padding: 5px;
139 
        box-sizing: border-box;
140 
    }
141 
 
142 
    .empty-message {
143 
        display: none;
144 
        text-align: center;
145 
        padding: 10px;
146 
    }
147 
 
148 
    &.loading {
149 
        >.loading-icon {
150 
            display: block;
151 
        }
152 
 
153 
        .empty-message {
154 
            display: none;
155 
        }
156 
    }
157 
}
158 
 
159 
 
160 
.popover-region {
161 
    &.collapsed {
162 
        .popover-region-container {
163 
            @include invisible();
164 
            overflow: hidden;
165 
            transition: $transition-base;
166 
        }
167 
    }
168 
}
169 
 
170 
// .count-container--dot {
171 
//     width: 5px;
172 
//     height: 5px;
173 
//     border-radius: 5px;
174 
 
175 
//     background-color: $red-600;
176 
 
177 
//     position: absolute;
178 
//     top: 3px;
179 
//     right: 3px;
180 
 
181 
//     text-indent: -999px;
182 
 
183 
//     animation-name: alertDot;
184 
//     animation-duration: 2s;
185 
//     animation-iteration-count: infinite;
186 
//     animation-timing-function: ease-in-out;
187 
// }
188 
 
189 
.content-item-container {
190 
    box-sizing: border-box;
191 
 
192 
    padding: 10px;
193 
    margin-top: 4px;
194 
    margin-bottom: 4px;
195 
 
196 
    border-radius: $btn-border-radius;
197 
    position: relative;
198 
 
199 
    display: block;
200 
    color: inherit;
201 
    text-decoration: none;
202 
 
203 
    position: relative;
204 
 
205 
    &:after {
206 
        content: '';
207 
        background-color: $border-color;
208 
        width: calc(100% - 20px);
209 
        height: 1px;
210 
 
211 
        position: absolute;
212 
        left: 10px;
213 
        bottom: -2px;
214 
 
215 
        .popover-region-container & {
216 
            background-color: $dropdown-border-color;
217 
        }
218 
 
219 
        .theme-dark & {
220 
            background-color: $dm-border-color;
221 
        }
222 
    }
223 
 
224 
    &:last-child {
225 
        margin-bottom: 0;
226 
    }
227 
 
228 
    &:hover {
229 
        background-color: $dropdown-link-hover-bg;
230 
        color: $dropdown-link-hover-color;
231 
 
232 
        .theme-dark & {
233 
            background-color: $dm-dropdown-link-hover-bg;
234 
            color: $dm-dropdown-link-hover-color;
235 
        }
236 
    }
237 
 
238 
    &.unread {
239 
        background-color: var(--main-theme-color);
240 
        color: var(--primary-color-100);
241 
 
242 
        &:hover {
243 
            background-color: $dropdown-link-hover-bg;
244 
            color: $dropdown-link-hover-color;
245 
 
246 
            .theme-dark & {
247 
                background-color: $dm-dropdown-link-hover-bg;
248 
                color: $dm-dropdown-link-hover-color;
249 
            }
250 
        }
251 
 
252 
        .content-item-body {
253 
            .notification-message {
254 
                font-weight: $font-weight-medium;
255 
            }
256 
        }
257 
    }
258 
 
259 
    .context-link {
260 
        color: $dropdown-color;
261 
        text-decoration: none;
262 
 
263 
        .theme-dark & {
264 
            color: $dm-dropdown-color;
265 
        }
266 
    }
267 
 
268 
    .content-item-footer {
269 
        text-align: left;
270 
        box-sizing: border-box;
271 
 
272 
        .timestamp {
273 
            font-size: $font-size-xs;
274 
            font-weight: $font-weight-normal;
275 
            opacity: .7;
276 
            margin-top: 5px;
277 
            margin-left: 43px;
278 
        }
279 
    }
280 
 
281 
    .view-more {
282 
        margin-top: 7px;
283 
        margin-left: 43px;
284 
 
285 
        font-size: $font-size-xs;
286 
        font-weight: $font-weight-medium;
287 
        color: $dropdown-link-color;
288 
 
289 
        .theme-dark & {
290 
            color: $dm-dropdown-link-color;
291 
        }
292 
 
293 
        &:hover {
294 
            color: $dropdown-link-hover-color;
295 
 
296 
            .theme-dark & {
297 
                color: $dm-dropdown-link-hover-color;
298 
            }
299 
        }
300 
    }
301 
 
302 
    &.notification {
303 
        .content-item-body {
304 
            .notification-image {
305 
                display: inline-flex;
306 
                width: 30px;
307 
                height: 30px;
308 
                background-color: $gray-100;
309 
                border-radius: $btn-border-radius;
310 
            }
311 
 
312 
            .notification-message {
313 
                display: inline-block;
314 
                font-size: $font-size-xs;
315 
                font-weight: $font-weight-medium;
316 
                line-height: 1.4;
317 
 
318 
                margin-left: 10px;
319 
                width: calc(100% - 60px);
320 
            }
321 
        }
322 
    }
323 
 
324 
    &.selected {
325 
        background-color: $dropdown-link-hover-bg;
326 
        color: $dropdown-link-hover-color;
327 
 
328 
        .theme-dark & {
329 
            background-color: $dm-dropdown-link-hover-bg;
330 
            color: $dm-dropdown-link-hover-color;
331 
        }
332 
    }
333 
}
334 
 
335 
.popover-region-notifications {
336 
    .popover-region-header-container {
337 
        .mark-all-read-button {
338 
            .normal-icon {
339 
                display: inline-block;
340 
            }
341 
 
342 
            &.loading {
343 
                .normal-icon {
344 
                    display: none;
345 
                }
346 
 
347 
                .loading-icon {
348 
                    display: inline-block;
349 
                }
350 
            }
351 
        }
352 
    }
353 
 
354 
    .all-notifications {
355 
        @include visible();
356 
 
357 
 
358 
        &:empty+.empty-message {
359 
            display: block;
360 
        }
361 
    }
362 
 
363 
    .notification-image {
364 
        display: inline-block;
365 
        width: 8%;
366 
        vertical-align: top;
367 
    }
368 
 
369 
    .notification-message {
370 
        display: inline-block;
371 
        font-size: 12px;
372 
    }
373 
 
374 
    .popover-region-content-container {
375 
        &.loading {
376 
            .all-notifications {
377 
                &:empty+.empty-message {
378 
                    display: none;
379 
                }
380 
            }
381 
        }
382 
    }
383 
}
384 
 
385 
.popover-region-messages {
386 
    .mark-all-read-button {
387 
        .normal-icon {
388 
            display: inline-block;
389 
        }
390 
 
391 
        &.loading {
392 
            .normal-icon {
393 
                display: none;
394 
            }
395 
 
396 
            .loading-icon {
397 
                display: inline-block;
398 
            }
399 
        }
400 
    }
401 
 
402 
    .popover-region-content-container {
403 
        &.loading {
404 
            .popover-region-content {
405 
                .messages {
406 
                    &:empty+.empty-message {
407 
                        display: none;
408 
                    }
409 
                }
410 
            }
411 
        }
412 
    }
413 
 
414 
    .messages {
415 
        &:empty+.empty-message {
416 
            display: block;
417 
        }
418 
    }
419 
 
420 
    .content-item-container {
421 
        &.unread {
422 
            .content-item-body {
423 
                width: calc(90% - 30px);
424 
            }
425 
 
426 
            .unread-count-container {
427 
                display: inline-block;
428 
                width: 10%;
429 
                text-align: center;
430 
            }
431 
        }
432 
    }
433 
 
434 
    .content-item {
435 
        height: 100%;
436 
        width: 100%;
437 
        box-sizing: border-box;
438 
    }
439 
 
440 
    .profile-image-container {
441 
        width: 30px;
442 
        display: inline-block;
443 
        text-align: center;
444 
 
445 
        img {
446 
            width: 100%;
447 
            display: inline-block;
448 
            vertical-align: middle;
449 
            border-radius: $btn-border-radius-xl;
450 
        }
451 
    }
452 
 
453 
    .content-item-body {
454 
        display: inline-block;
455 
        box-sizing: border-box;
456 
        width: calc(100% - 30px);
457 
        font-size: 12px;
458 
        padding-left: 10px;
459 
        overflow: hidden;
460 
 
461 
        h3 {
462 
            font-size: 12px;
463 
            line-height: 12px;
464 
            margin: 0;
465 
            width: 100%;
466 
        }
467 
 
468 
        p {
469 
            margin: 0;
470 
        }
471 
    }
472 
 
473 
    .unread-count-container {
474 
        display: none;
475 
    }
476 
}
477 
 
478 
.rui-notification-pref,
479 
.rui-markallread {
480 
    width: 30px;
481 
    height: 30px;
482 
    padding: 3px;
483 
    justify-content: center;
484 
    align-items: center;
485 
    border-radius: $btn-border-radius-lg;
486 
 
487 
    &:hover {
488 
        color: $dropdown-link-hover-color;
489 
        background-color: $dropdown-link-hover-bg;
490 
 
491 
        .theme-dark & {
492 
            color: var(--primary-color-100);
493 
            background-color: var(--main-theme-color);
494 
        }
495 
    }
496 
 
497 
    .theme-dark & {
498 
        background-color: $dm-dropdown-link-hover-bg;
499 
        color: $dm-dropdown-link-hover-color;
500 
    }
501 
}
502 
 
503 
.rui-markallread {
504 
    background-color: transparent;
505 
    color: $dropdown-link-color;
506 
}
507 
 
508 
.mark-all-read-button {
509 
    .normal-icon {
510 
        display: inline-block;
511 
    }
512 
 
513 
    .loading-icon {
514 
        display: none;
515 
        height: 12px;
516 
        width: 12px;
517 
    }
518 
 
519 
    &.loading {
520 
        .normal-icon {
521 
            display: none;
522 
        }
523 
 
524 
        .loading-icon {
525 
            display: inline-block;
526 
        }
527 
    }
528 
}
529 
 
530 
.rui-notification-pref {
531 
    //background-color: $dropdown-link-hover-bg;
532 
    color: $dropdown-link-hover-color;
533 
 
534 
    .theme-dark & {
535 
        //background-color: $dm-dropdown-link-hover-bg;
536 
        color: $dm-dropdown-link-hover-color;
537 
    }
538 
 
539 
    &:hover {
540 
        background-color: $dropdown-link-active-bg;
541 
        color: $dropdown-link-active-color;
542 
 
543 
        .theme-dark & {
544 
            background-color: $dm-dropdown-link-active-bg;
545 
            color: $dm-dropdown-link-active-color;
546 
        }
547 
    }
548 
}
549 
 
550 
.rui-unreadcount:not(.hidden) {
551 
    position: absolute;
552 
    padding: 4px;
553 
    top: 0;
554 
    right: 0;
555 
    min-width: 16px;
556 
    height: 16px;
557 
    display: inline-flex;
558 
    align-items: center;
559 
    justify-content: center;
560 
    background-color: var(--main-theme-color);
561 
    color: var(--primary-color-200);
562 
    border-radius: 16px;
563 
    font-size: 10px;
564 
    font-weight: $font-weight-medium;
565 
}
566 
 
567 
.see-all-link {
568 
    width: 100%;
569 
    margin: 20px 0 0;
570 
    padding: 7px 20px;
571 
    border-radius: $btn-border-radius;
572 
 
573 
    font-size: $font-size-xs;
574 
    font-weight: $font-weight-medium;
575 
    background-color: darken($dropdown-bg, 10);
576 
    color: $dropdown-link-color;
577 
 
578 
    .theme-dark & {
579 
        background-color: $dm-dropdown-link-hover-bg;
580 
        color: $dm-dropdown-link-hover-color;
581 
    }
582 
 
583 
    &:hover {
584 
        background-color: $dropdown-link-hover-bg;
585 
        color: $dropdown-link-hover-color;
586 
        text-decoration: none;
587 
        opacity: .7;
588 
 
589 
        .theme-dark & {
590 
            background-color: $dm-dropdown-link-hover-bg;
591 
            color: $dm-dropdown-link-hover-color;
592 
        }
593 
    }
594 
}