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