Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
$standard-border: 1px solid $popover-standard-border-color;
2 
$region-container-height: 500px;
3 
$region-container-width: 380px;
4 
$region-container-z-index: 1;
5 
$region-header-height: 25px;
6 
$region-footer-height: 30px;
7 
$content-item-hover-colour-bg: $primary;
8 
$content-item-hover-colour-text: $white;
9 
$content-item-selected-colour-bg: #3279b3;
10 
$content-item-unread-colour: #f4f4f4;
11 
$content-header-footer-height: $region-header-height + $region-footer-height;
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 
    &.collapsed {
27 
        .popover-region-toggle {
28 
            &:before,
29 
            &:after {
30 
                display: none;
31 
            }
32 
        }
33 
 
34 
        .popover-region-container {
35 
            @include invisible();
36 
 
37 
            height: 0;
38 
            overflow: hidden;
39 
            transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
40 
        }
41 
    }
42 
}
43 
 
44 
.popover-region-toggle {
45 
    cursor: pointer;
46 
 
47 
    &::before {
48 
        content: '';
49 
        display: inline-block;
50 
        border-left: 10px solid transparent;
51 
        border-right: 10px solid transparent;
52 
        border-bottom: 10px solid $popover-standard-border-color;
53 
        position: absolute;
54 
        bottom: 0;
55 
        right: 7px;
56 
    }
57 
 
58 
    &::after {
59 
        content: '';
60 
        display: inline-block;
61 
        border-left: 9px solid transparent;
62 
        border-right: 9px solid transparent;
63 
        border-bottom: 9px solid $popover-region-toggle-border-bottom-color;
64 
        position: absolute;
65 
        bottom: -1px;
66 
        right: 8px;
67 
        z-index: $region-container-z-index + 1;
68 
    }
69 
}
70 
 
71 
.count-container {
72 
    padding: 2px;
73 
    border-radius: 2px;
74 
    background-color: $danger;
75 
    color: $popover-count-color;
76 
    font-size: 11px;
77 
    line-height: 11px;
78 
    position: absolute;
79 
    top: 5px;
80 
    right: 0;
81 
}
82 
 
83 
.popover-region-container {
84 
    @include visible();
85 
 
86 
    position: absolute;
87 
    right: 0;
88 
    top: 0;
89 
    height: $region-container-height;
90 
    width: $region-container-width;
91 
    border: $standard-border;
92 
    transition: height 0.25s;
93 
    background-color: $popover-region-container-bg;
94 
    z-index: $region-container-z-index;
95 
}
96 
 
97 
.popover-region-header-container {
98 
    height: $region-header-height;
99 
    line-height: $region-header-height;
100 
    padding-left: 5px;
101 
    padding-right: 5px;
102 
    border-bottom: $standard-border;
103 
    box-sizing: border-box;
104 
}
105 
 
106 
.popover-region-footer-container {
107 
    height: $region-footer-height;
108 
    text-align: center;
109 
    border-top: $standard-border;
110 
    background-color: $popover-bg;
111 
    padding-top: 3px;
112 
}
113 
 
114 
.popover-region-header-text {
115 
    float: left;
116 
    margin: 0;
117 
    font-size: 14px;
118 
    line-height: $region-header-height;
119 
}
120 
 
121 
.popover-region-header-actions {
122 
    float: right;
123 
 
124 
    > * {
125 
        margin-left: 10px;
126 
        min-width: 20px;
127 
        display: inline-block;
128 
    }
129 
    .loading-icon {
130 
        display: none;
131 
        height: 12px;
132 
        width: 12px;
133 
    }
134 
 
135 
    .newmessage-link {
136 
        margin-right: 10px;
137 
    }
138 
 
139 
    label {
140 
        display: inline-block;
141 
        text-align: center;
142 
        margin-bottom: 0;
143 
    }
144 
}
145 
 
146 
.popover-region-content-container {
147 
    height: calc(100% - #{$content-header-footer-height});
148 
    width: 100%;
149 
    overflow-y: auto;
150 
    -webkit-overflow-scrolling: touch;
151 
 
152 
    > .loading-icon {
153 
        display: none;
154 
        text-align: center;
155 
        padding: 5px;
156 
        box-sizing: border-box;
157 
    }
158 
 
159 
    .empty-message {
160 
        display: none;
161 
        text-align: center;
162 
        padding: 10px;
163 
    }
164 
 
165 
    &.loading {
166 
        > .loading-icon {
167 
            display: block;
168 
        }
169 
 
170 
        .empty-message {
171 
            display: none;
172 
        }
173 
    }
174 
}
175 
 
176 
.navbar-nav {
177 
    .popover-region {
178 
        .icon {
179 
            font-weight: bolder;
180 
        }
181 
        .notification-image {
182 
            .icon {
183 
                font-weight: 400;
184 
            }
185 
        }
186 
    }
187 
}
188 
 
189 
.navbar {
190 
    .popover-region {
191 
        &.collapsed {
192 
            .popover-region-container {
193 
                @include invisible();
194 
 
195 
                height: 0;
196 
                overflow: hidden;
197 
                transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
198 
            }
199 
        }
200 
    }
201 
 
202 
    .count-container {
203 
        padding: 2px;
204 
        border-radius: 2px;
205 
        background-color: $danger;
206 
        color: $popover-count-color;
207 
        font-size: 11px;
208 
        line-height: 11px;
209 
        position: absolute;
210 
        top: $navbar-height * 0.25;
211 
        right: 0;
212 
    }
213 
 
214 
    .popover-region-container {
215 
        top: $navbar-height;
216 
    }
217 
 
218 
}
219 
 
220 
.content-item-container {
221 
    width: 100%;
222 
    border-bottom: $standard-border;
223 
    box-sizing: border-box;
224 
    padding: 5px;
225 
    position: relative;
226 
    margin: 0;
227 
    display: block;
228 
    color: inherit;
229 
    text-decoration: none;
230 
 
231 
    &:hover {
232 
        color: $content-item-hover-colour-text;
233 
        background-color: $content-item-hover-colour-bg;
234 
 
235 
        .content-item-footer {
236 
            .timestamp {
237 
                color: $content-item-hover-colour-text;
238 
            }
239 
        }
240 
 
241 
        .view-more {
242 
            color: inherit;
243 
        }
244 
    }
245 
 
246 
    &.unread {
247 
        margin: 0;
248 
        background-color: $content-item-unread-colour;
249 
 
250 
        &:hover {
251 
            color: $content-item-hover-colour-text;
252 
            background-color: $content-item-hover-colour-bg;
253 
        }
254 
 
255 
        .content-item-body {
256 
            .notification-message {
257 
                font-weight: 600;
258 
            }
259 
        }
260 
    }
261 
 
262 
    .context-link {
263 
        color: inherit;
264 
        text-decoration: none;
265 
    }
266 
 
267 
    .content-item-body {
268 
        box-sizing: border-box;
269 
        margin-bottom: 5px;
270 
    }
271 
 
272 
    .content-item-footer {
273 
        text-align: left;
274 
        box-sizing: border-box;
275 
 
276 
        .timestamp {
277 
            font-size: 10px;
278 
            line-height: 10px;
279 
            margin: 0;
280 
            color: inherit;
281 
            margin-left: 24px;
282 
        }
283 
    }
284 
 
285 
    .view-more {
286 
        &:hover {
287 
            color: inherit;
288 
        }
289 
 
290 
        position: absolute;
291 
        bottom: 5px;
292 
        right: 5px;
293 
        font-size: 12px;
294 
        line-height: 12px;
295 
    }
296 
 
297 
    &.notification {
298 
        .content-item-body {
299 
            .notification-image {
300 
                display: inline-block;
301 
                width: 24px;
302 
                height: 24px;
303 
                float: left;
304 
 
305 
                img {
306 
                    height: 75%;
307 
                }
308 
            }
309 
 
310 
            .notification-message {
311 
                display: inline-block;
312 
                font-size: 12px;
313 
                width: calc(100% - 24px);
314 
            }
315 
        }
316 
    }
317 
 
318 
    &.selected {
319 
        background-color: $content-item-selected-colour-bg;
320 
        color: $content-item-hover-colour-text;
321 
        border-color: $content-item-selected-colour-bg;
322 
 
323 
        .content-item-footer {
324 
            .timestamp {
325 
                color: $content-item-hover-colour-text;
326 
            }
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 
                .loading-icon {
343 
                    display: inline-block;
344 
                }
345 
            }
346 
        }
347 
    }
348 
 
349 
    .all-notifications {
350 
        @include visible();
351 
 
352 
        height: auto;
353 
        overflow: hidden;
354 
 
355 
        &:empty + .empty-message {
356 
            display: block;
357 
        }
358 
    }
359 
 
360 
    .notification-image {
361 
        display: inline-block;
362 
        width: 8%;
363 
        vertical-align: top;
364 
 
365 
        img {
366 
            height: 75%;
367 
        }
368 
    }
369 
 
370 
    .notification-message {
371 
        display: inline-block;
372 
        font-size: 12px;
373 
    }
374 
 
375 
    .popover-region-content-container {
376 
        &.loading {
377 
            .all-notifications {
378 
                &:empty + .empty-message {
379 
                    display: none;
380 
                }
381 
            }
382 
        }
383 
    }
384 
}
385 
 
386 
.popover-region-messages {
387 
    .mark-all-read-button {
388 
        .normal-icon {
389 
            display: inline-block;
390 
        }
391 
 
392 
        &.loading {
393 
            .normal-icon {
394 
                display: none;
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 
                font-weight: 600;
424 
                width: calc(90% - 30px);
425 
            }
426 
 
427 
            .unread-count-container {
428 
                display: inline-block;
429 
                width: 10%;
430 
                text-align: center;
431 
                float: right;
432 
            }
433 
        }
434 
    }
435 
 
436 
    .content-item {
437 
        height: 100%;
438 
        width: 100%;
439 
        box-sizing: border-box;
440 
    }
441 
 
442 
    .profile-image-container {
443 
        width: 30px;
444 
        display: inline-block;
445 
        text-align: center;
446 
        float: left;
447 
 
448 
        img {
449 
            width: 100%;
450 
            display: inline-block;
451 
            vertical-align: middle;
452 
            border-radius: 50%;
453 
        }
454 
    }
455 
 
456 
    .content-item-body {
457 
        display: inline-block;
458 
        box-sizing: border-box;
459 
        width: calc(100% - 30px);
460 
        font-size: 12px;
461 
        padding-left: 10px;
462 
        overflow: hidden;
463 
 
464 
        h3 {
465 
            font-size: 12px;
466 
            line-height: 12px;
467 
            margin: 0;
468 
            width: 100%;
469 
        }
470 
 
471 
        p {
472 
            margin: 0;
473 
        }
474 
    }
475 
 
476 
    .unread-count-container {
477 
        display: none;
478 
    }
479 
}
480 
 
481 
@media (max-width: 767px) {
482 
    .navbar {
483 
        .popover-region {
484 
            .popover-region-container {
485 
                right: -70px;
486 
            }
487 
        }
488 
    }
489 
}
490 
 
491 
@media (max-width: 480px) {
492 
    .navbar {
493 
        .popover-region {
494 
            .popover-region-container {
495 
                position: fixed;
496 
                top: 46px;
497 
                right: 0;
498 
                left: 0;
499 
                bottom: 0;
500 
                width: auto;
501 
                height: auto;
502 
            }
503 
        }
504 
    }
505 
}