MDL-54708 message: add notification popover to nav bar
[moodle.git] / theme / bootstrapbase / less / moodle / popover.less
1 .mdl-popover {
2     float: right;
3     position: relative;
5     .mdl-popover-toggle {
6         cursor: pointer;
8         .count-container {
9             padding: 2px;
10             border-radius: 2px;
11             background-color: red;
12             color: white;
13             font-size: 10px;
14             line-height: 10px;
15             position: absolute;
16             top: 5px;
17             right: 0;
18         }
19     }
21     .mdl-popover-container {
22         position: absolute;
23         right: 0;
24         top: 0;
25         height: 500px;
26         width: 380px;
27         border: 1px solid #ddd;
28         transition: height 0.25s;
29         opacity: 1;
30         visibility: visible;
31         background-color: #fff;
32         z-index: 10000;
34         .mdl-popover-header-container {
35             height: 25px;
36             line-height: 24px;
37             padding-left: 5px;
38             padding-right: 5px;
39             border-bottom: 1px solid #ddd;
40             box-sizing: border-box;
42             .mdl-popover-header-text {
43                 float: left;
44                 margin: 0;
45                 font-size: 14px;
46                 line-height: 25px;
47             }
49             .mdl-popover-header-actions {
50                 float: right;
52                 > * {
53                     margin-left: 5px;
54                 }
55             }
56         }
58         .mdl-popover-content-container {
59             height: ~"calc(100% - 25px)";
60             width: 100%;
61             overflow-y: auto;
63             .loading-icon {
64                 display: none;
65                 text-align: center;
66                 padding: 5px;
67                 box-sizing: border-box;
68             }
69             .empty-message {
70                 display: none;
71                 text-align: center;
72                 padding: 10px;
73             }
75             &.loading {
76                 .loading-icon {
77                     display: block;
78                 }
79             }
80         }
81     }
83     &.collapsed {
84         .mdl-popover-container {
85             height: 0;
86             overflow: hidden;
87             opacity: 0;
88             visibility: hidden;
89             transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
90         }
91     }
92 }
94 .navbar {
95     .mdl-popover {
96         float: right;
98         .mdl-popover-toggle {
99             height: 42px;
100             line-height: 42px;
101             padding-left: 10px;
102             padding-right: 10px;
104             .count-container {
105                 padding: 2px;
106                 border-radius: 2px;
107                 background-color: red;
108                 color: white;
109                 font-size: 10px;
110                 line-height: 10px;
111                 position: absolute;
112                 top: 5px;
113                 right: 0;
114             }
115         }
116         .mdl-popover-container {
117             top: 42px;
119             &::before {
120                 content: '';
121                 display: inline-block;
122                 border-left: 10px solid transparent;
123                 border-right: 10px solid transparent;
124                 border-bottom: 10px solid #ddd;
125                 position: absolute;
126                 top: -10px;
127                 right: 7px;
128             }
129             &::after {
130                 content: '';
131                 display: inline-block;
132                 border-left: 9px solid transparent;
133                 border-right: 9px solid transparent;
134                 border-bottom: 9px solid #fff;
135                 position: absolute;
136                 top: -9px;
137                 right: 8px;
138             }
139         }
140         &.collapsed {
141             .mdl-popover-container {
142                 height: 0;
143                 overflow: hidden;
144                 opacity: 0;
145                 visibility: hidden;
146                 transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
147             }
148         }
149     }
152 .mdl-popover-notifications {
153     &.mdl-popover {
154         .mdl-popover-container {
155             .mdl-popover-header-container {
156                 .mdl-popover-header-actions {
157                     .fancy-toggle {
158                         position: relative;
159                         display: inline-block;
160                         border-radius: 4px;
161                         box-sizing: border-box;
162                         line-height: 25px;
163                         height: 20px;
164                         vertical-align: middle;
165                         cursor: pointer;
166                         overflow: hidden;
168                         .slider-container {
169                             width: 100%;
170                             height: 100%;
171                             position: absolute;
173                             .slider {
174                                 width: 10px;
175                                 height: ~"calc(100% - 2px)";
176                                 background-color: #fff;
177                                 border-radius: 4px;
178                                 margin: 1px;
179                                 display: inline-block;
180                             }
181                         }
182                         .on-text {
183                             padding: 2px 5px 2px 14px;
184                             box-sizing: border-box;
185                             line-height: 16px;
186                             vertical-align: top;
187                             display: inline-block;
188                         }
189                         .off-text {
190                             padding: 2px 14px 2px 5px;
191                             box-sizing: border-box;
192                             line-height: 16px;
193                             vertical-align: top;
194                             display: inline-block;
195                         }
197                         &.on {
198                             background-color: green;
199                             color: #fff;
201                             .slider-container {
202                                 transform: translateX(0);
203                                 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
204                             }
205                             .on-text {
206                                 display: block;
207                             }
208                             .off-text {
209                                 display: none;
210                             }
211                         }
212                         &.off {
213                             background-color: red;
214                             color: #fff;
216                             .slider-container {
217                                 transform: translateX(100%);
218                                 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
220                                 .slider {
221                                     transform: translateX(-110%);
222                                 }
223                             }
224                             .on-text {
225                                 display: none;
226                             }
227                             .off-text {
228                                 display: block;
229                             }
230                         }
231                     }
232                 }
234                 #mark-all-read-button {
235                     .normal-icon {
236                         display: inline-block;
237                     }
238                     .loading-icon {
239                         display: none;
240                         height: 12px;
241                         width: 12px;
242                     }
244                     &.loading {
245                         .normal-icon {
246                             display: none;
247                         }
248                         .loading-icon {
249                             display: inline-block;
250                         }
251                     }
252                 }
253             }
254         }
255         .mdl-popover-container {
256             .mdl-popover-content-container {
257                 &.loading {
258                     .mdl-popover-content {
259                         .unread-notifications,
260                         .all-notifications {
261                             &:empty + .empty-message,
262                             & + .empty-message {
263                                 display: none;
264                             }
265                         }
266                     }
267                 }
269                 .mdl-popover-content {
270                     .unread-notifications {
271                         opacity: 0;
272                         visibility: hidden;
273                         height: 0;
274                         overflow: hidden;
275                         transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
277                         & + .empty-message {
278                             display: none;
279                         }
280                     }
281                     .all-notifications {
282                         opacity: 1;
283                         visibility: visible;
284                         height: auto;
285                         overflow: hidden;
286                         transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
288                         &:empty + .empty-message {
289                             display: block;
290                         }
291                     }
292                     .content-item-container {
293                         width: 100%;
294                         border-bottom: 1px solid #ddd;
295                         box-sizing: border-box;
296                         padding: 5px;
298                         &:hover {
299                             opacity: 0.8;
300                         }
302                         &[data-context-url] {
303                             cursor: pointer;
304                         }
306                         .content-item {
307                             width: ~"calc(100% - 45px)";
308                             display: inline-block;
309                             box-sizing: border-box;
311                             .content-item-header {
312                                 height: 20px;
313                                 margin-bottom: 5px;
314                                 box-sizing: border-box;
316                                 h3 {
317                                     font-size: 14px;
318                                     line-height: 14px;
319                                     float: left;
320                                     margin: 0;
321                                     max-width: 80%;
322                                 }
323                             }
325                             .content-item-body {
326                                 box-sizing: border-box;
328                                 .content-body-short {
329                                     max-height: 1000px;
330                                     width: 100%;
331                                     height: 30px;
332                                     opacity: 1;
333                                     visibility: visible;
334                                     transition: opacity 101ms 0.5s, visibility 101ms 0.5s, max-height 1s 0.5s;
336                                     .notification-image {
337                                         display: inline-block;
338                                         width: 10%;
340                                         img {
341                                             height: 30px;
342                                         }
343                                     }
344                                     .notification-message {
345                                         display: inline-block;
346                                         font-size: 12px;
347                                         line-height: 15px;
348                                         margin: 0;
349                                         vertical-align: top;
350                                         max-width: 80%;
351                                     }
352                                 }
353                                 .content-body-full {
354                                     overflow: hidden;
355                                     width: 100%;
356                                     max-height: 0;
357                                     opacity: 0;
358                                     visibility: hidden;
359                                     transition: max-height 0.5s, opacity 101ms 0.5s, visibility 101ms 0.5s;
361                                     pre {
362                                         word-break: normal;
363                                         word-wrap: normal;
364                                         font-size: 12px;
365                                         margin: 0;
366                                     }
367                                 }
368                             }
370                             .content-item-footer {
371                                 text-align: left;
372                                 margin: 5px 0 0;
373                                 box-sizing: border-box;
375                                 p {
376                                     font-size: 10px;
377                                     line-height: 10px;
378                                     margin: 0;
379                                 }
380                             }
381                         }
383                         .content-item-controls {
384                             width: 40px;
385                             height: 100%;
386                             display: inline-block;
387                             vertical-align: top;
388                             box-sizing: border-box;
389                             text-align: right;
391                             .block-button {
392                                 margin-left: 5px;
394                                 img {
395                                     height: 15px;
396                                 }
397                             }
398                             .mark-read-button {
399                                 img {
400                                     height: 15px;
401                                 }
402                             }
403                             .expand-buttons {
404                                 display: inline-block;
405                                 height: 30px;
406                                 width: 100%;
407                                 vertical-align: top;
408                                 float: right;
409                                 text-align: center;
411                                 img {
412                                     vertical-align: middle;
413                                     height: 100%;
414                                 }
415                                 .show-button {
416                                     width: 100%;
417                                     height: 100%;
418                                     display: block;
419                                 }
420                                 .hide-button {
421                                     width: 100%;
422                                     height: 100%;
423                                     display: none;
424                                 }
425                             }
426                         }
428                         &.expanded {
429                             .content-item {
430                                 .content-item-body {
431                                     .content-body-short {
432                                         opacity: 0;
433                                         visibility: hidden;
434                                         max-height: 0;
435                                         overflow: hidden;
436                                         transition: opacity 101ms 0.25s, visibility 101ms 0.25s, max-height 0.25s;
437                                     }
438                                     .content-body-full {
439                                         max-height: 1000px;
440                                         opacity: 1;
441                                         visibility: visible;
442                                         transition: max-height 2s 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s;
443                                     }
444                                 }
445                             }
447                             .content-item-controls {
448                                 .expand-buttons {
449                                     .show-button {
450                                         display: none;
451                                     }
452                                     .hide-button {
453                                         display: block;
454                                     }
455                                 }
456                             }
457                         }
459                         &:last-child {
460                             border-bottom: none;
461                         }
462                     }
463                 }
464             }
465         }
467         &.unread-only {
468             .mdl-popover-container {
469                 .mdl-popover-content-container {
470                     .mdl-popover-content {
471                         .all-notifications {
472                             opacity: 0;
473                             visibility: hidden;
474                             height: 0;
475                             transition: opacity 0.25s, visibility 101ms 0.25s, height 101ms 0.25s;
477                             & + .empty-message {
478                                 display: none;
479                             }
480                         }
481                         .unread-notifications {
482                             opacity: 1;
483                             visibility: visible;
484                             height: auto;
485                             transition: opacity 0.25s 0.25s, visibility 101ms 0.5s, height 101ms 0.5s;
487                             &:empty + .empty-message {
488                                 display: block;
489                             }
490                         }
491                     }
493                     &.loading {
494                         .mdl-popover-content {
495                             .unread-notifications,
496                             .all-notifications {
497                                 &:empty + .empty-message,
498                                 & + .empty-message {
499                                     display: none;
500                                 }
501                             }
502                         }
503                     }
504                 }
505             }
506         }
507     }
510 .dir-rtl {
511     .mdl-popover {
512         .mdl-popover-container {
513             left: 0;
514             right: auto;
516             .mdl-popover-header-container {
517                 .mdl-popover-header-text {
518                     float: right;
519                 }
520                 .mdl-popover-header-actions {
521                     float: left;
522                 }
523             }
525             .mdl-popover-content-container {
526                 .mdl-popover-content {
527                     .content-item-container {
528                         .content-item {
529                             .content-item-header {
530                                 h3 {
531                                     float: right;
532                                 }
533                             }
534                             .content-item-footer {
535                                 text-align: right;
536                             }
537                         }
538                         .content-item-controls {
539                             text-align: left;
540                         }
541                     }
542                 }
543             }
544         }
545     }
546     .navbar {
547         .mdl-popover {
548             float: left;
550             .mdl-popover-container {
551                 &::before {
552                     right: auto;
553                     left: 7px;
554                 }
555                 &::after {
556                     right: auto;
557                     left: 8px;
558                 }
560                 .mdl-popover-header-container {
561                     .mdl-popover-header-text {
562                         float: right;
563                     }
564                     .mdl-popover-header-actions {
565                         float: left;
566                     }
567                 }
568             }
569         }
570     }
571     .mdl-popover-notifications {
572         .mdl-popover {
573             .mdl-popover-container {
574                 .mdl-popover-header-container {
575                     .mdl-popover-header-actions {
576                         .fancy-toggle {
577                             &.off {
578                                 .slider-container {
579                                     transform: translateX(0);
581                                     .slider {
582                                         transform: translateX(0);
583                                     }
584                                 }
585                             }
586                             &.on {
587                                 .slider-container {
588                                     transform: translateX(-100%);
590                                     .slider {
591                                         transform: translateX(110%);
592                                     }
593                                 }
594                             }
595                         }
596                     }
597                 }
598                 .mdl-popover-content-container {
599                     .mdl-popover-content {
600                         .content-item-container {
601                             .content-item {
602                                 .content-item-header {
603                                     h3 {
604                                         float: right;
605                                     }
606                                 }
607                                 .content-item-footer {
608                                     text-align: right;
609                                 }
610                             }
611                             .content-item-controls {
612                                 text-align: left;
613                             }
614                         }
615                     }
616                 }
617             }
618         }
619     }