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 
$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 
 
1441 ariadna 129 
    @include thin-scrolls($dm-drawer-scroll-bg-track);
1 efrain 130 
 
131 
    >.loading-icon {
132 
        display: none;
133 
        text-align: center;
134 
        padding: 5px;
135 
        box-sizing: border-box;
136 
    }
137 
 
138 
    .empty-message {
139 
        display: none;
140 
        text-align: center;
141 
        padding: 10px;
142 
    }
143 
 
144 
    &.loading {
145 
        >.loading-icon {
146 
            display: block;
147 
        }
148 
 
149 
        .empty-message {
150 
            display: none;
151 
        }
152 
    }
153 
}
154 
 
155 
 
156 
.popover-region {
157 
    &.collapsed {
158 
        .popover-region-container {
159 
            @include invisible();
160 
            overflow: hidden;
161 
            transition: $transition-base;
162 
        }
163 
    }
164 
}
165 
 
166 
// .count-container--dot {
167 
//     width: 5px;
168 
//     height: 5px;
169 
//     border-radius: 5px;
170 
 
171 
//     background-color: $red-600;
172 
 
173 
//     position: absolute;
174 
//     top: 3px;
175 
//     right: 3px;
176 
 
177 
//     text-indent: -999px;
178 
 
179 
//     animation-name: alertDot;
180 
//     animation-duration: 2s;
181 
//     animation-iteration-count: infinite;
182 
//     animation-timing-function: ease-in-out;
183 
// }
184 
 
185 
.content-item-container {
186 
    box-sizing: border-box;
187 
 
188 
    padding: 10px;
189 
    margin-top: 4px;
190 
    margin-bottom: 4px;
191 
 
192 
    border-radius: $btn-border-radius;
193 
    position: relative;
194 
 
195 
    display: block;
196 
    color: inherit;
197 
    text-decoration: none;
198 
 
199 
    position: relative;
200 
 
201 
    &:after {
202 
        content: '';
203 
        background-color: $border-color;
204 
        width: calc(100% - 20px);
205 
        height: 1px;
206 
 
207 
        position: absolute;
208 
        left: 10px;
209 
        bottom: -2px;
210 
 
211 
        .popover-region-container & {
212 
            background-color: $dropdown-border-color;
213 
        }
214 
 
215 
        .theme-dark & {
216 
            background-color: $dm-border-color;
217 
        }
218 
    }
219 
 
220 
    &:last-child {
221 
        margin-bottom: 0;
222 
    }
223 
 
224 
    &:hover {
225 
        background-color: $dropdown-link-hover-bg;
226 
        color: $dropdown-link-hover-color;
227 
 
228 
        .theme-dark & {
229 
            background-color: $dm-dropdown-link-hover-bg;
230 
            color: $dm-dropdown-link-hover-color;
231 
        }
232 
    }
233 
 
234 
    &.unread {
235 
        background-color: var(--main-theme-color);
236 
        color: var(--primary-color-100);
237 
 
238 
        &:hover {
239 
            background-color: $dropdown-link-hover-bg;
240 
            color: $dropdown-link-hover-color;
241 
 
242 
            .theme-dark & {
243 
                background-color: $dm-dropdown-link-hover-bg;
244 
                color: $dm-dropdown-link-hover-color;
245 
            }
246 
        }
247 
 
248 
        .content-item-body {
249 
            .notification-message {
250 
                font-weight: $font-weight-medium;
251 
            }
252 
        }
253 
    }
254 
 
255 
    .context-link {
256 
        color: $dropdown-color;
257 
        text-decoration: none;
258 
 
259 
        .theme-dark & {
260 
            color: $dm-dropdown-color;
261 
        }
262 
    }
263 
 
264 
    .content-item-footer {
265 
        text-align: left;
266 
        box-sizing: border-box;
267 
 
268 
        .timestamp {
269 
            font-size: $font-size-xs;
270 
            font-weight: $font-weight-normal;
271 
            opacity: .7;
272 
            margin-top: 5px;
273 
            margin-left: 43px;
274 
        }
275 
    }
276 
 
277 
    .view-more {
278 
        margin-top: 7px;
279 
        margin-left: 43px;
280 
 
281 
        font-size: $font-size-xs;
282 
        font-weight: $font-weight-medium;
283 
        color: $dropdown-link-color;
284 
 
285 
        .theme-dark & {
286 
            color: $dm-dropdown-link-color;
287 
        }
288 
 
289 
        &:hover {
290 
            color: $dropdown-link-hover-color;
291 
 
292 
            .theme-dark & {
293 
                color: $dm-dropdown-link-hover-color;
294 
            }
295 
        }
296 
    }
297 
 
298 
    &.notification {
299 
        .content-item-body {
300 
            .notification-image {
301 
                display: inline-flex;
302 
                width: 30px;
303 
                height: 30px;
304 
                background-color: $gray-100;
305 
                border-radius: $btn-border-radius;
306 
            }
307 
 
308 
            .notification-message {
309 
                display: inline-block;
310 
                font-size: $font-size-xs;
311 
                font-weight: $font-weight-medium;
312 
                line-height: 1.4;
313 
 
314 
                margin-left: 10px;
315 
                width: calc(100% - 60px);
316 
            }
317 
        }
318 
    }
319 
 
320 
    &.selected {
321 
        background-color: $dropdown-link-hover-bg;
322 
        color: $dropdown-link-hover-color;
323 
 
324 
        .theme-dark & {
325 
            background-color: $dm-dropdown-link-hover-bg;
326 
            color: $dm-dropdown-link-hover-color;
327 
        }
328 
    }
329 
}
330 
 
331 
.popover-region-notifications {
332 
    .popover-region-header-container {
333 
        .mark-all-read-button {
334 
            .normal-icon {
335 
                display: inline-block;
336 
            }
337 
 
338 
            &.loading {
339 
                .normal-icon {
340 
                    display: none;
341 
                }
342 
 
343 
                .loading-icon {
344 
                    display: inline-block;
345 
                }
346 
            }
347 
        }
348 
    }
349 
 
350 
    .all-notifications {
351 
        @include visible();
352 
 
353 
 
354 
        &:empty+.empty-message {
355 
            display: block;
356 
        }
357 
    }
358 
 
359 
    .notification-image {
360 
        display: inline-block;
361 
        width: 8%;
362 
        vertical-align: top;
363 
    }
364 
 
365 
    .notification-message {
366 
        display: inline-block;
367 
        font-size: 12px;
368 
    }
369 
 
370 
    .popover-region-content-container {
371 
        &.loading {
372 
            .all-notifications {
373 
                &:empty+.empty-message {
374 
                    display: none;
375 
                }
376 
            }
377 
        }
378 
    }
379 
}
380 
 
381 
.popover-region-messages {
382 
    .mark-all-read-button {
383 
        .normal-icon {
384 
            display: inline-block;
385 
        }
386 
 
387 
        &.loading {
388 
            .normal-icon {
389 
                display: none;
390 
            }
391 
 
392 
            .loading-icon {
393 
                display: inline-block;
394 
            }
395 
        }
396 
    }
397 
 
398 
    .popover-region-content-container {
399 
        &.loading {
400 
            .popover-region-content {
401 
                .messages {
402 
                    &:empty+.empty-message {
403 
                        display: none;
404 
                    }
405 
                }
406 
            }
407 
        }
408 
    }
409 
 
410 
    .messages {
411 
        &:empty+.empty-message {
412 
            display: block;
413 
        }
414 
    }
415 
 
416 
    .content-item-container {
417 
        &.unread {
418 
            .content-item-body {
419 
                width: calc(90% - 30px);
420 
            }
421 
 
422 
            .unread-count-container {
423 
                display: inline-block;
424 
                width: 10%;
425 
                text-align: center;
426 
            }
427 
        }
428 
    }
429 
 
430 
    .content-item {
431 
        height: 100%;
432 
        width: 100%;
433 
        box-sizing: border-box;
434 
    }
435 
 
436 
    .profile-image-container {
437 
        width: 30px;
438 
        display: inline-block;
439 
        text-align: center;
440 
 
441 
        img {
442 
            width: 100%;
443 
            display: inline-block;
444 
            vertical-align: middle;
445 
            border-radius: $btn-border-radius-xl;
446 
        }
447 
    }
448 
 
449 
    .content-item-body {
450 
        display: inline-block;
451 
        box-sizing: border-box;
452 
        width: calc(100% - 30px);
453 
        font-size: 12px;
454 
        padding-left: 10px;
455 
        overflow: hidden;
456 
 
457 
        h3 {
458 
            font-size: 12px;
459 
            line-height: 12px;
460 
            margin: 0;
461 
            width: 100%;
462 
        }
463 
 
464 
        p {
465 
            margin: 0;
466 
        }
467 
    }
468 
 
469 
    .unread-count-container {
470 
        display: none;
471 
    }
472 
}
473 
 
474 
.rui-notification-pref,
475 
.rui-markallread {
476 
    width: 30px;
477 
    height: 30px;
478 
    padding: 3px;
479 
    justify-content: center;
480 
    align-items: center;
481 
    border-radius: $btn-border-radius-lg;
482 
 
483 
    &:hover {
484 
        color: $dropdown-link-hover-color;
485 
        background-color: $dropdown-link-hover-bg;
486 
 
487 
        .theme-dark & {
488 
            color: var(--primary-color-100);
489 
            background-color: var(--main-theme-color);
490 
        }
491 
    }
492 
 
493 
    .theme-dark & {
494 
        background-color: $dm-dropdown-link-hover-bg;
495 
        color: $dm-dropdown-link-hover-color;
496 
    }
497 
}
498 
 
499 
.rui-markallread {
500 
    background-color: transparent;
501 
    color: $dropdown-link-color;
502 
}
503 
 
504 
.mark-all-read-button {
505 
    .normal-icon {
506 
        display: inline-block;
507 
    }
508 
 
509 
    .loading-icon {
510 
        display: none;
511 
        height: 12px;
512 
        width: 12px;
513 
    }
514 
 
515 
    &.loading {
516 
        .normal-icon {
517 
            display: none;
518 
        }
519 
 
520 
        .loading-icon {
521 
            display: inline-block;
522 
        }
523 
    }
524 
}
525 
 
526 
.rui-notification-pref {
527 
    //background-color: $dropdown-link-hover-bg;
528 
    color: $dropdown-link-hover-color;
529 
 
530 
    .theme-dark & {
531 
        //background-color: $dm-dropdown-link-hover-bg;
532 
        color: $dm-dropdown-link-hover-color;
533 
    }
534 
 
535 
    &:hover {
536 
        background-color: $dropdown-link-active-bg;
537 
        color: $dropdown-link-active-color;
538 
 
539 
        .theme-dark & {
540 
            background-color: $dm-dropdown-link-active-bg;
541 
            color: $dm-dropdown-link-active-color;
542 
        }
543 
    }
544 
}
545 
 
546 
.rui-unreadcount:not(.hidden) {
547 
    position: absolute;
548 
    padding: 4px;
549 
    top: 0;
550 
    right: 0;
551 
    min-width: 16px;
552 
    height: 16px;
553 
    display: inline-flex;
554 
    align-items: center;
555 
    justify-content: center;
556 
    background-color: var(--main-theme-color);
557 
    color: var(--primary-color-200);
558 
    border-radius: 16px;
559 
    font-size: 10px;
560 
    font-weight: $font-weight-medium;
561 
}
562 
 
563 
.see-all-link {
564 
    width: 100%;
565 
    margin: 20px 0 0;
566 
    padding: 7px 20px;
567 
    border-radius: $btn-border-radius;
568 
 
569 
    font-size: $font-size-xs;
570 
    font-weight: $font-weight-medium;
571 
    background-color: darken($dropdown-bg, 10);
572 
    color: $dropdown-link-color;
573 
 
574 
    .theme-dark & {
575 
        background-color: $dm-dropdown-link-hover-bg;
576 
        color: $dm-dropdown-link-hover-color;
577 
    }
578 
 
579 
    &:hover {
580 
        background-color: $dropdown-link-hover-bg;
581 
        color: $dropdown-link-hover-color;
582 
        text-decoration: none;
583 
        opacity: .7;
584 
 
585 
        .theme-dark & {
586 
            background-color: $dm-dropdown-link-hover-bg;
587 
            color: $dm-dropdown-link-hover-color;
588 
        }
589 
    }
590 
}