2acb9c67933e3fd3598cae6f4c7b1ce354bcb487
[moodle.git] / theme / boost / scss / moodle / popover-region.scss
1 $toggle-width: 25px;
2 $standard-border: 1px solid #ddd;
3 $region-container-height: 500px;
4 $region-container-width: 380px;
5 $region-container-z-index: 1;
6 $region-header-height: 25px;
7 $region-footer-height: 30px;
8 $content-item-hover-colour-bg: #79b5e6;
9 $content-item-hover-colour-text: #fff;
10 $content-item-selected-colour-bg: #4f94cd;
11 $content-item-unread-colour: #f4f4f4;
12 $content-header-footer-height: $region-header-height + $region-footer-height;
14 @mixin invisible() {
15     opacity: 0;
16     visibility: hidden;
17 }
19 @mixin visible() {
20     opacity: 1;
21     visibility: visible;
22 }
24 .popover-region {
25     position: relative;
27     &.collapsed {
28         .popover-region-toggle {
29             &:before,
30             &:after {
31                 display: none;
32             }
33         }
35         .popover-region-container {
36             @include invisible();
38             height: 0;
39             overflow: hidden;
40             transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
41         }
42     }
43 }
45 .popover-region-toggle {
46     cursor: pointer;
48     &::before {
49         content: '';
50         display: inline-block;
51         border-left: 10px solid transparent;
52         border-right: 10px solid transparent;
53         border-bottom: 10px solid #ddd;
54         position: absolute;
55         bottom: 0;
56         right: 7px;
57     }
59     &::after {
60         content: '';
61         display: inline-block;
62         border-left: 9px solid transparent;
63         border-right: 9px solid transparent;
64         border-bottom: 9px solid #fff;
65         position: absolute;
66         bottom: -1px;
67         right: 8px;
68         z-index: $region-container-z-index + 1;
69     }
70 }
72 .count-container {
73     padding: 2px;
74     border-radius: 2px;
75     background-color: red;
76     color: white;
77     font-size: 10px;
78     line-height: 10px;
79     position: absolute;
80     top: 5px;
81     right: 0;
82 }
84 .popover-region-container {
85     @include visible();
87     position: absolute;
88     right: 0;
89     top: 0;
90     height: $region-container-height;
91     width: $region-container-width;
92     border: $standard-border;
93     transition: height 0.25s;
94     background-color: #fff;
95     z-index: $region-container-z-index;
96 }
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;
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;
115 .popover-region-header-text {
116     float: left;
117     margin: 0;
118     font-size: 14px;
119     line-height: $region-header-height;
122 .popover-region-header-actions {
123     float: right;
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     }
136     .newmessage-link {
137         margin-right: 10px;
138     }
140     label {
141         display: inline-block;
142         text-align: center;
143         margin-bottom: 0;
144     }
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;
153     > .loading-icon {
154         display: none;
155         text-align: center;
156         padding: 5px;
157         box-sizing: border-box;
158     }
160     .empty-message {
161         display: none;
162         text-align: center;
163         padding: 10px;
164     }
166     &.loading {
167         > .loading-icon {
168             display: block;
169         }
171         .empty-message {
172             display: none;
173         }
174     }
177 .navbar {
178     .popover-region {
179         float: left;
180         margin-right: 10px;
182         &.collapsed {
183             .popover-region-container {
184                 @include invisible();
186                 height: 0;
187                 overflow: hidden;
188                 transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
189             }
190         }
191     }
193     .popover-region-toggle {
194         width: $toggle-width;
195     }
197     .count-container {
198         padding: 2px;
199         border-radius: 2px;
200         background-color: red;
201         color: white;
202         font-size: 10px;
203         line-height: 10px;
204         position: absolute;
205         top: 5px;
206         right: 0;
207     }
209     .popover-region-container {
210         top: $line-height-base * 1.4 * $font-size-base;
211     }
215 .content-item-container {
216     width: 100%;
217     border-bottom: $standard-border;
218     box-sizing: border-box;
219     padding: 5px;
220     position: relative;
221     margin: 0;
222     display: block;
223     color: inherit;
224     text-decoration: none;
226     &:hover {
227         color: $content-item-hover-colour-text;
228         background-color: $content-item-hover-colour-bg;
230         .content-item-footer {
231             .timestamp {
232                 color: $content-item-hover-colour-text;
233             }
234         }
235     }
237     &.unread {
238         margin: 0;
239         background-color: $content-item-unread-colour;
241         &:hover {
242             color: $content-item-hover-colour-text;
243             background-color: $content-item-hover-colour-bg;
244         }
246         .content-item-body {
247             .notification-message {
248                 font-weight: 600;
249             }
250         }
251     }
253     .context-link {
254         color: inherit;
255         text-decoration: none;
256     }
258     .content-item-body {
259         box-sizing: border-box;
260         margin-bottom: 5px;
261     }
263     .content-item-footer {
264         text-align: left;
265         box-sizing: border-box;
267         .timestamp {
268             font-size: 10px;
269             line-height: 10px;
270             margin: 0;
271             color: #666;
272             margin-left: 24px;
273         }
274     }
276     .view-more {
277         position: absolute;
278         bottom: 5px;
279         right: 5px;
280         font-size: 12px;
281         line-height: 12px;
282     }
284     &.notification {
285         .content-item-body {
286             .notification-image {
287                 display: inline-block;
288                 width: 24px;
289                 height: 24px;
290                 float: left;
292                 img {
293                     height: 75%;
294                 }
295             }
297             .notification-message {
298                 display: inline-block;
299                 font-size: 12px;
300                 width: calc(100% - 24px);
301             }
302         }
303     }
305     &.selected {
306         background-color: $content-item-selected-colour-bg;
307         color: $content-item-hover-colour-text;
308         border-color: $content-item-selected-colour-bg;
310         .content-item-footer {
311             .timestamp {
312                 color: $content-item-hover-colour-text;
313             }
314         }
315     }
318 .popover-region-notifications {
319     .popover-region-header-container {
320         .mark-all-read-button {
321             .normal-icon {
322                 display: inline-block;
323             }
325             &.loading {
326                 .normal-icon {
327                     display: none;
328                 }
329                 .loading-icon {
330                     display: inline-block;
331                 }
332             }
333         }
334     }
336     .all-notifications {
337         @include visible();
339         height: auto;
340         overflow: hidden;
342         &:empty + .empty-message {
343             display: block;
344         }
345     }
347     .notification-image {
348         display: inline-block;
349         width: 8%;
350         vertical-align: top;
352         img {
353             height: 75%;
354         }
355     }
357     .notification-message {
358         display: inline-block;
359         font-size: 12px;
360     }
362     .popover-region-content-container {
363         &.loading {
364             .all-notifications {
365                 &:empty + .empty-message {
366                     display: none;
367                 }
368             }
369         }
370     }
373 .popover-region-messages {
374     .mark-all-read-button {
375         .normal-icon {
376             display: inline-block;
377         }
379         &.loading {
380             .normal-icon {
381                 display: none;
382             }
383             .loading-icon {
384                 display: inline-block;
385             }
386         }
387     }
389     .popover-region-content-container {
390         &.loading {
391             .popover-region-content {
392                 .messages {
393                     &:empty + .empty-message {
394                         display: none;
395                     }
396                 }
397             }
398         }
399     }
401     .messages {
402         &:empty + .empty-message {
403             display: block;
404         }
405     }
407     .content-item-container {
408         &.unread {
409             .content-item-body {
410                 font-weight: 600;
411                 width: calc(90% - 30px);
412             }
414             .unread-count-container {
415                 display: inline-block;
416                 width: 10%;
417                 text-align: center;
418                 float: right;
419             }
420         }
421     }
423     .content-item {
424         height: 100%;
425         width: 100%;
426         box-sizing: border-box;
427     }
429     .profile-image-container {
430         width: 30px;
431         display: inline-block;
432         text-align: center;
433         float: left;
435         img {
436             width: 100%;
437             display: inline-block;
438             vertical-align: middle;
439             border-radius: 50%;
440         }
441     }
443     .content-item-body {
444         display: inline-block;
445         box-sizing: border-box;
446         width: calc(100% - 30px);
447         font-size: 12px;
448         padding-left: 10px;
449         overflow: hidden;
451         h3 {
452             font-size: 12px;
453             line-height: 12px;
454             margin: 0;
455             width: 100%;
456         }
458         p {
459             margin: 0;
460         }
461     }
463     .unread-count-container {
464         display: none;
465     }
468 @media (max-width: 767px) {
469     .navbar {
470         .popover-region {
471             .popover-region-container {
472                 right: -70px;
473             }
474         }
475     }
478 @media (max-width: 480px) {
479     .navbar {
480         .popover-region {
481             .popover-region-container {
482                 position: fixed;
483                 top: 46px;
484                 right: 0;
485                 left: 0;
486                 bottom: 0;
487                 width: auto;
488                 height: auto;
489             }
490         }
491     }