weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / popover-region.scss
1 $standard-border: 1px solid #ddd;
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: #79b5e6;
8 $content-item-hover-colour-text: #fff;
9 $content-item-selected-colour-bg: #4f94cd;
10 $content-item-unread-colour: #f4f4f4;
11 $content-header-footer-height: $region-header-height + $region-footer-height;
13 @mixin invisible() {
14     opacity: 0;
15     visibility: hidden;
16 }
18 @mixin visible() {
19     opacity: 1;
20     visibility: visible;
21 }
23 .popover-region {
24     position: relative;
26     &.collapsed {
27         .popover-region-toggle {
28             &:before,
29             &:after {
30                 display: none;
31             }
32         }
34         .popover-region-container {
35             @include invisible();
37             height: 0;
38             overflow: hidden;
39             transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
40         }
41     }
42 }
44 .popover-region-toggle {
45     cursor: pointer;
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 #ddd;
53         position: absolute;
54         bottom: 0;
55         right: 7px;
56     }
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 #fff;
64         position: absolute;
65         bottom: -1px;
66         right: 8px;
67         z-index: $region-container-z-index + 1;
68     }
69 }
71 .count-container {
72     padding: 2px;
73     border-radius: 2px;
74     background-color: red;
75     color: white;
76     font-size: 11px;
77     line-height: 11px;
78     position: absolute;
79     top: 5px;
80     right: 0;
81 }
83 .popover-region-container {
84     @include visible();
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: #fff;
94     z-index: $region-container-z-index;
95 }
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;
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;
114 .popover-region-header-text {
115     float: left;
116     margin: 0;
117     font-size: 14px;
118     line-height: $region-header-height;
121 .popover-region-header-actions {
122     float: right;
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     }
135     .newmessage-link {
136         margin-right: 10px;
137     }
139     label {
140         display: inline-block;
141         text-align: center;
142         margin-bottom: 0;
143     }
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;
152     > .loading-icon {
153         display: none;
154         text-align: center;
155         padding: 5px;
156         box-sizing: border-box;
157     }
159     .empty-message {
160         display: none;
161         text-align: center;
162         padding: 10px;
163     }
165     &.loading {
166         > .loading-icon {
167             display: block;
168         }
170         .empty-message {
171             display: none;
172         }
173     }
176 .navbar {
177     .popover-region {
178         &.collapsed {
179             .popover-region-container {
180                 @include invisible();
182                 height: 0;
183                 overflow: hidden;
184                 transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
185             }
186         }
187     }
189     .count-container {
190         padding: 2px;
191         border-radius: 2px;
192         background-color: red;
193         color: white;
194         font-size: 11px;
195         line-height: 11px;
196         position: absolute;
197         top: 5px;
198         right: 0;
199     }
201     .popover-region-container {
202         top: $line-height-base * 1.4 * $font-size-base;
203     }
207 .content-item-container {
208     width: 100%;
209     border-bottom: $standard-border;
210     box-sizing: border-box;
211     padding: 5px;
212     position: relative;
213     margin: 0;
214     display: block;
215     color: inherit;
216     text-decoration: none;
218     &:hover {
219         color: $content-item-hover-colour-text;
220         background-color: $content-item-hover-colour-bg;
222         .content-item-footer {
223             .timestamp {
224                 color: $content-item-hover-colour-text;
225             }
226         }
227     }
229     &.unread {
230         margin: 0;
231         background-color: $content-item-unread-colour;
233         &:hover {
234             color: $content-item-hover-colour-text;
235             background-color: $content-item-hover-colour-bg;
236         }
238         .content-item-body {
239             .notification-message {
240                 font-weight: 600;
241             }
242         }
243     }
245     .context-link {
246         color: inherit;
247         text-decoration: none;
248     }
250     .content-item-body {
251         box-sizing: border-box;
252         margin-bottom: 5px;
253     }
255     .content-item-footer {
256         text-align: left;
257         box-sizing: border-box;
259         .timestamp {
260             font-size: 10px;
261             line-height: 10px;
262             margin: 0;
263             color: #666;
264             margin-left: 24px;
265         }
266     }
268     .view-more {
269         position: absolute;
270         bottom: 5px;
271         right: 5px;
272         font-size: 12px;
273         line-height: 12px;
274     }
276     &.notification {
277         .content-item-body {
278             .notification-image {
279                 display: inline-block;
280                 width: 24px;
281                 height: 24px;
282                 float: left;
284                 img {
285                     height: 75%;
286                 }
287             }
289             .notification-message {
290                 display: inline-block;
291                 font-size: 12px;
292                 width: calc(100% - 24px);
293             }
294         }
295     }
297     &.selected {
298         background-color: $content-item-selected-colour-bg;
299         color: $content-item-hover-colour-text;
300         border-color: $content-item-selected-colour-bg;
302         .content-item-footer {
303             .timestamp {
304                 color: $content-item-hover-colour-text;
305             }
306         }
307     }
310 .popover-region-notifications {
311     .popover-region-header-container {
312         .mark-all-read-button {
313             .normal-icon {
314                 display: inline-block;
315             }
317             &.loading {
318                 .normal-icon {
319                     display: none;
320                 }
321                 .loading-icon {
322                     display: inline-block;
323                 }
324             }
325         }
326     }
328     .all-notifications {
329         @include visible();
331         height: auto;
332         overflow: hidden;
334         &:empty + .empty-message {
335             display: block;
336         }
337     }
339     .notification-image {
340         display: inline-block;
341         width: 8%;
342         vertical-align: top;
344         img {
345             height: 75%;
346         }
347     }
349     .notification-message {
350         display: inline-block;
351         font-size: 12px;
352     }
354     .popover-region-content-container {
355         &.loading {
356             .all-notifications {
357                 &:empty + .empty-message {
358                     display: none;
359                 }
360             }
361         }
362     }
365 .popover-region-messages {
366     .mark-all-read-button {
367         .normal-icon {
368             display: inline-block;
369         }
371         &.loading {
372             .normal-icon {
373                 display: none;
374             }
375             .loading-icon {
376                 display: inline-block;
377             }
378         }
379     }
381     .popover-region-content-container {
382         &.loading {
383             .popover-region-content {
384                 .messages {
385                     &:empty + .empty-message {
386                         display: none;
387                     }
388                 }
389             }
390         }
391     }
393     .messages {
394         &:empty + .empty-message {
395             display: block;
396         }
397     }
399     .content-item-container {
400         &.unread {
401             .content-item-body {
402                 font-weight: 600;
403                 width: calc(90% - 30px);
404             }
406             .unread-count-container {
407                 display: inline-block;
408                 width: 10%;
409                 text-align: center;
410                 float: right;
411             }
412         }
413     }
415     .content-item {
416         height: 100%;
417         width: 100%;
418         box-sizing: border-box;
419     }
421     .profile-image-container {
422         width: 30px;
423         display: inline-block;
424         text-align: center;
425         float: left;
427         img {
428             width: 100%;
429             display: inline-block;
430             vertical-align: middle;
431             border-radius: 50%;
432         }
433     }
435     .content-item-body {
436         display: inline-block;
437         box-sizing: border-box;
438         width: calc(100% - 30px);
439         font-size: 12px;
440         padding-left: 10px;
441         overflow: hidden;
443         h3 {
444             font-size: 12px;
445             line-height: 12px;
446             margin: 0;
447             width: 100%;
448         }
450         p {
451             margin: 0;
452         }
453     }
455     .unread-count-container {
456         display: none;
457     }
460 @media (max-width: 767px) {
461     .navbar {
462         .popover-region {
463             .popover-region-container {
464                 right: -70px;
465             }
466         }
467     }
470 @media (max-width: 480px) {
471     .navbar {
472         .popover-region {
473             .popover-region-container {
474                 position: fixed;
475                 top: 46px;
476                 right: 0;
477                 left: 0;
478                 bottom: 0;
479                 width: auto;
480                 height: auto;
481             }
482         }
483     }