weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / popover-region.scss
CommitLineData
963ba889
RW
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;
d3d0248a 6$region-footer-height: 30px;
963ba889
RW
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;
d3d0248a 11$content-header-footer-height: $region-header-height + $region-footer-height;
963ba889
RW
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 {
963ba889
RW
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 #ddd;
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 #fff;
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: red;
75 color: white;
97b04014
SR
76 font-size: 11px;
77 line-height: 11px;
963ba889
RW
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: #fff;
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
d3d0248a
AG
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
963ba889
RW
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 }
81517613
AG
134
135 .newmessage-link {
136 margin-right: 10px;
137 }
138
963ba889
RW
139 label {
140 display: inline-block;
141 text-align: center;
142 margin-bottom: 0;
143 }
144}
145
146.popover-region-content-container {
d3d0248a 147 height: calc(100% - #{$content-header-footer-height});
963ba889
RW
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 {
177 .popover-region {
963ba889
RW
178 &.collapsed {
179 .popover-region-container {
180 @include invisible();
181
182 height: 0;
183 overflow: hidden;
184 transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
185 }
186 }
187 }
188
963ba889
RW
189 .count-container {
190 padding: 2px;
191 border-radius: 2px;
192 background-color: red;
193 color: white;
97b04014
SR
194 font-size: 11px;
195 line-height: 11px;
963ba889
RW
196 position: absolute;
197 top: 5px;
198 right: 0;
199 }
200
201 .popover-region-container {
757f42cb 202 top: $line-height-base * 1.4 * $font-size-base;
963ba889 203 }
757f42cb 204
963ba889
RW
205}
206
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;
217
218 &:hover {
219 color: $content-item-hover-colour-text;
220 background-color: $content-item-hover-colour-bg;
221
222 .content-item-footer {
223 .timestamp {
224 color: $content-item-hover-colour-text;
225 }
226 }
227 }
228
229 &.unread {
8387932d 230 margin: 0;
963ba889
RW
231 background-color: $content-item-unread-colour;
232
233 &:hover {
234 color: $content-item-hover-colour-text;
235 background-color: $content-item-hover-colour-bg;
236 }
237
238 .content-item-body {
239 .notification-message {
240 font-weight: 600;
241 }
242 }
243 }
244
245 .context-link {
246 color: inherit;
247 text-decoration: none;
248 }
249
250 .content-item-body {
251 box-sizing: border-box;
252 margin-bottom: 5px;
253 }
254
255 .content-item-footer {
256 text-align: left;
257 box-sizing: border-box;
258
259 .timestamp {
260 font-size: 10px;
261 line-height: 10px;
262 margin: 0;
263 color: #666;
264 margin-left: 24px;
265 }
266 }
267
268 .view-more {
269 position: absolute;
270 bottom: 5px;
271 right: 5px;
272 font-size: 12px;
273 line-height: 12px;
274 }
275
276 &.notification {
277 .content-item-body {
278 .notification-image {
279 display: inline-block;
280 width: 24px;
281 height: 24px;
282 float: left;
283
284 img {
285 height: 75%;
286 }
287 }
288
289 .notification-message {
290 display: inline-block;
291 font-size: 12px;
292 width: calc(100% - 24px);
293 }
294 }
295 }
296
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;
301
302 .content-item-footer {
303 .timestamp {
304 color: $content-item-hover-colour-text;
305 }
306 }
307 }
308}
309
310.popover-region-notifications {
311 .popover-region-header-container {
312 .mark-all-read-button {
313 .normal-icon {
314 display: inline-block;
315 }
316
317 &.loading {
318 .normal-icon {
319 display: none;
320 }
321 .loading-icon {
322 display: inline-block;
323 }
324 }
325 }
326 }
327
328 .all-notifications {
329 @include visible();
330
331 height: auto;
332 overflow: hidden;
333
334 &:empty + .empty-message {
335 display: block;
336 }
337 }
338
339 .notification-image {
340 display: inline-block;
341 width: 8%;
342 vertical-align: top;
343
344 img {
345 height: 75%;
346 }
347 }
348
349 .notification-message {
350 display: inline-block;
351 font-size: 12px;
352 }
353
354 .popover-region-content-container {
355 &.loading {
356 .all-notifications {
357 &:empty + .empty-message {
358 display: none;
359 }
360 }
361 }
362 }
363}
364
365.popover-region-messages {
366 .mark-all-read-button {
367 .normal-icon {
368 display: inline-block;
369 }
370
371 &.loading {
372 .normal-icon {
373 display: none;
374 }
375 .loading-icon {
376 display: inline-block;
377 }
378 }
379 }
380
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 }
392
393 .messages {
394 &:empty + .empty-message {
395 display: block;
396 }
397 }
398
399 .content-item-container {
400 &.unread {
401 .content-item-body {
402 font-weight: 600;
403 width: calc(90% - 30px);
404 }
405
406 .unread-count-container {
407 display: inline-block;
408 width: 10%;
409 text-align: center;
410 float: right;
411 }
412 }
413 }
414
415 .content-item {
416 height: 100%;
417 width: 100%;
418 box-sizing: border-box;
419 }
420
421 .profile-image-container {
422 width: 30px;
423 display: inline-block;
424 text-align: center;
425 float: left;
426
427 img {
428 width: 100%;
429 display: inline-block;
430 vertical-align: middle;
431 border-radius: 50%;
432 }
433 }
434
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;
442
443 h3 {
444 font-size: 12px;
445 line-height: 12px;
446 margin: 0;
447 width: 100%;
448 }
449
450 p {
451 margin: 0;
452 }
453 }
454
455 .unread-count-container {
456 display: none;
457 }
458}
459
460@media (max-width: 767px) {
461 .navbar {
462 .popover-region {
463 .popover-region-container {
464 right: -70px;
465 }
466 }
467 }
468}
469
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 }
484}