Gestion du 'fadeOut' pour les notifications en javascript
This commit is contained in:
xdrm-brackets
parent
3e0fcc2929
commit
c584da7f76
|
|
@ -28,6 +28,15 @@ body > #notification-container{
|
||||||
|
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
|
||||||
|
// ANIMATION DE fadeIn + fadeOut
|
||||||
|
transition: opacity .5s ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&.notification-visible{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// DIFFERENTS THEMES
|
// DIFFERENTS THEMES
|
||||||
strong[class]{
|
strong[class]{
|
||||||
|
|
@ -36,28 +45,30 @@ body > #notification-container{
|
||||||
|
|
||||||
&:before{
|
&:before{
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.2em;
|
top: 1.2em;
|
||||||
left: 1em;
|
left: 1em;
|
||||||
width: .9em;
|
width: .9em;
|
||||||
height: .9em;
|
height: .9em;
|
||||||
|
|
||||||
border-radius: 50% / 50%;
|
border-radius: 50% / 50%;
|
||||||
box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);
|
box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);
|
||||||
|
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// WARNING
|
||||||
|
&.warning:before{ background-color: #dd6a45; }
|
||||||
|
// INFO
|
||||||
|
&.info:before{ background-color: #2195da; }
|
||||||
|
// SUCCESS
|
||||||
|
&.success:before{ background-color: #5fca4a; }
|
||||||
|
// ERROR
|
||||||
|
&.error:before{ background-color: #d94747; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// WARNING
|
|
||||||
strong.warning:before{ background-color: #dd6a45; }
|
|
||||||
// INFO
|
|
||||||
strong.info:before{ background-color: #2195da; }
|
|
||||||
// SUCCESS
|
|
||||||
strong.success:before{ background-color: #5fca4a; }
|
|
||||||
// ERROR
|
|
||||||
strong.error:before{ background-color: #d94747; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,12 @@ body > #notification-container .notification-element {
|
||||||
box-shadow: inset 0 0 1em #eee;
|
box-shadow: inset 0 0 1em #eee;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
transition: opacity .5s ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > #notification-container .notification-element.notification-visible {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > #notification-container .notification-element strong[class] {
|
body > #notification-container .notification-element strong[class] {
|
||||||
|
|
@ -40,20 +46,20 @@ body > #notification-container .notification-element strong[class]:before {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > #notification-container .notification-element strong.warning:before {
|
body > #notification-container .notification-element strong[class].warning:before {
|
||||||
background-color: #dd6a45;
|
background-color: #dd6a45;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > #notification-container .notification-element strong.info:before {
|
body > #notification-container .notification-element strong[class].info:before {
|
||||||
background-color: #2195da;
|
background-color: #2195da;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > #notification-container .notification-element strong.success:before {
|
body > #notification-container .notification-element strong[class].success:before {
|
||||||
background-color: #5fca4a;
|
background-color: #5fca4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > #notification-container .notification-element strong.error:before {
|
body > #notification-container .notification-element strong[class].error:before {
|
||||||
background-color: #d94747;
|
background-color: #d94747;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9ub3RpZi5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiYm9keSA+ICNub3RpZmljYXRpb24tY29udGFpbmVye1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG5cbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuXG4gICAgei1pbmRleDogMjAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cbiAgICAubm90aWZpY2F0aW9uLWVsZW1lbnR7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBtYXJnaW46IC4yZW0gYXV0bztcbiAgICAgICAgICAgIHBhZGRpbmc6IDAgMWVtO1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDtcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNiYmI7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAxZW0gI2VlZTtcblxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG5cblxuICAgICAgICAvLyBESUZGRVJFTlRTIFRIRU1FU1xuICAgICAgICBzdHJvbmdbY2xhc3Nde1xuXG4gICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDEuNWVtO1xuXG4gICAgICAgICAgICAmOmJlZm9yZXtcbiAgICAgICAgICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDEuMmVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgbGVmdDogMWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6IC45ZW07XG4gICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IC45ZW07XG5cbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCUgLyA1MCU7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgLTFweCAxcHggMnB4IHJnYmEoNTAsIDUwLCA1MCwgLjUpO1xuXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgLy8gV0FSTklOR1xuICAgICAgICBzdHJvbmcud2FybmluZzpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkZDZhNDU7IH1cbiAgICAgICAgLy8gSU5GT1xuICAgICAgICBzdHJvbmcuaW5mbzpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICMyMTk1ZGE7IH1cbiAgICAgICAgLy8gU1VDQ0VTU1xuICAgICAgICBzdHJvbmcuc3VjY2VzczpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICM1ZmNhNGE7IH1cbiAgICAgICAgLy8gRVJST1JcbiAgICAgICAgc3Ryb25nLmVycm9yOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogI2Q5NDc0NzsgfVxuICAgIH1cblxufVxuIgoJXSwKCSJtYXBwaW5ncyI6ICJBQUFBLElBQUksR0FBRyx1QkFBdUIsQ0FBQTtFQUUxQixPQUFPLEVBQUUsSUFBSztFQUNkLFFBQVEsRUFBRSxRQUFTO0VBQ2YsTUFBTSxFQUFFLENBQUU7RUFDVixJQUFJLEVBQUUsQ0FBRTtFQUNSLEtBQUssRUFBRSxJQUFLO0VBRWhCLGNBQWMsRUFBRSxNQUFPO0VBQ3ZCLFNBQVMsRUFBRSxNQUFPO0VBRWxCLE9BQU8sRUFBRSxHQUFJO0VBQ2IsY0FBYyxFQUFFLElBQUs7Q0FrRHhCOztBQTlERCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQUFBO0VBQ2pCLE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDZixNQUFNLEVBQUUsU0FBVTtFQUNsQixPQUFPLEVBQUUsS0FBTTtFQUVuQixhQUFhLEVBQUUsR0FBSTtFQUNuQixNQUFNLEVBQUUsY0FBZTtFQUN2QixhQUFhLEVBQUUsY0FBZTtFQUM5QixVQUFVLEVBQUUsa0JBQW1CO0VBRS9CLGdCQUFnQixFQUFFLElBQUs7RUFFdkIsY0FBYyxFQUFFLEdBQUk7Q0FnQ3ZCOztBQTVETCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQWlCakIsTUFBTSxDQUFBLEFBQUEsS0FBQyxBQUFBLEVBQU07RUFFVCxZQUFZLEVBQUUsS0FBTTtDQWdCdkI7O0FBbERULElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBaUJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FJRixPQUFPLENBQUE7RUFDSixPQUFPLEVBQUUsRUFBRztFQUNSLE9BQU8sRUFBRSxZQUFhO0VBQ3RCLFFBQVEsRUFBRSxRQUFTO0VBQ2YsR0FBRyxFQUFFLEtBQU07RUFDWCxJQUFJLEVBQUUsR0FBSTtFQUNWLEtBQUssRUFBRSxJQUFLO0VBQ1osTUFBTSxFQUFFLElBQUs7RUFFckIsYUFBYSxFQUFFLFNBQVU7RUFDekIsVUFBVSxFQUFFLEtBQUssQ0FBRSxJQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxxQkFBSTtFQUVuQyxnQkFBZ0IsRUFBRSxHQUFJO0NBQ3pCOztBQWpEYixJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQXNDakIsTUFBTSxBQUFBLFFBQVEsQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUk7O0FBckQ3RCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQXdDakIsTUFBTSxBQUFBLEtBQUssQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUk7O0FBdkQxRCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTBDakIsTUFBTSxBQUFBLFFBQVEsQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUk7O0FBekQ3RCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTRDakIsTUFBTSxBQUFBLE1BQU0sQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUkiLAoJIm5hbWVzIjogW10KfQ== */
|
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9ub3RpZi5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiYm9keSA+ICNub3RpZmljYXRpb24tY29udGFpbmVye1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG5cbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuXG4gICAgei1pbmRleDogMjAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cbiAgICAubm90aWZpY2F0aW9uLWVsZW1lbnR7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBtYXJnaW46IC4yZW0gYXV0bztcbiAgICAgICAgICAgIHBhZGRpbmc6IDAgMWVtO1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDtcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNiYmI7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAxZW0gI2VlZTtcblxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG5cbiAgICAgICAgLy8gQU5JTUFUSU9OIERFIGZhZGVJbiArIGZhZGVPdXRcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAuNXMgZWFzZS1pbi1vdXQ7XG4gICAgICAgIG9wYWNpdHk6IDA7XG5cbiAgICAgICAgJi5ub3RpZmljYXRpb24tdmlzaWJsZXtcbiAgICAgICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIH1cblxuXG5cbiAgICAgICAgLy8gRElGRkVSRU5UUyBUSEVNRVNcbiAgICAgICAgc3Ryb25nW2NsYXNzXXtcblxuICAgICAgICAgICAgcGFkZGluZy1sZWZ0OiAxLjVlbTtcblxuICAgICAgICAgICAgJjpiZWZvcmV7XG4gICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB0b3A6IDEuMmVtO1xuICAgICAgICAgICAgICAgIGxlZnQ6IDFlbTtcbiAgICAgICAgICAgICAgICB3aWR0aDogLjllbTtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IC45ZW07XG5cbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCUgLyA1MCU7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgLTFweCAxcHggMnB4IHJnYmEoNTAsIDUwLCA1MCwgLjUpO1xuXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAvLyBXQVJOSU5HXG4gICAgICAgICAgICAmLndhcm5pbmc6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjZGQ2YTQ1OyB9XG4gICAgICAgICAgICAvLyBJTkZPXG4gICAgICAgICAgICAmLmluZm86YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE5NWRhOyB9XG4gICAgICAgICAgICAvLyBTVUNDRVNTXG4gICAgICAgICAgICAmLnN1Y2Nlc3M6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjNWZjYTRhOyB9XG4gICAgICAgICAgICAvLyBFUlJPUlxuICAgICAgICAgICAgJi5lcnJvcjpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkOTQ3NDc7IH1cbiAgICAgICAgfVxuXG5cbiAgICB9XG5cbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFBQSxJQUFJLEdBQUcsdUJBQXVC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 */
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
"../notif.scss"
|
"../notif.scss"
|
||||||
],
|
],
|
||||||
"sourcesContent": [
|
"sourcesContent": [
|
||||||
"body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n }\n\n // WARNING\n strong.warning:before{ background-color: #dd6a45; }\n // INFO\n strong.info:before{ background-color: #2195da; }\n // SUCCESS\n strong.success:before{ background-color: #5fca4a; }\n // ERROR\n strong.error:before{ background-color: #d94747; }\n }\n\n}\n"
|
"body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n // ANIMATION DE fadeIn + fadeOut\n transition: opacity .5s ease-in-out;\n opacity: 0;\n\n &.notification-visible{\n opacity: 1;\n }\n\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n\n // WARNING\n &.warning:before{ background-color: #dd6a45; }\n // INFO\n &.info:before{ background-color: #2195da; }\n // SUCCESS\n &.success:before{ background-color: #5fca4a; }\n // ERROR\n &.error:before{ background-color: #d94747; }\n }\n\n\n }\n\n}\n"
|
||||||
],
|
],
|
||||||
"mappings": "AAAA,IAAI,GAAG,uBAAuB,CAAA;EAE1B,OAAO,EAAE,IAAK;EACd,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,CAAE;EACV,IAAI,EAAE,CAAE;EACR,KAAK,EAAE,IAAK;EAEhB,cAAc,EAAE,MAAO;EACvB,SAAS,EAAE,MAAO;EAElB,OAAO,EAAE,GAAI;EACb,cAAc,EAAE,IAAK;CAkDxB;;AA9DD,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAAA;EACjB,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,KAAM;EAEnB,aAAa,EAAE,GAAI;EACnB,MAAM,EAAE,cAAe;EACvB,aAAa,EAAE,cAAe;EAC9B,UAAU,EAAE,kBAAmB;EAE/B,gBAAgB,EAAE,IAAK;EAEvB,cAAc,EAAE,GAAI;CAgCvB;;AA5DL,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,EAAM;EAET,YAAY,EAAE,KAAM;CAgBvB;;AAlDT,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,CAAA;EACJ,OAAO,EAAE,EAAG;EACR,OAAO,EAAE,YAAa;EACtB,QAAQ,EAAE,QAAS;EACf,GAAG,EAAE,KAAM;EACX,IAAI,EAAE,GAAI;EACV,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,IAAK;EAErB,aAAa,EAAE,SAAU;EACzB,UAAU,EAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,qBAAI;EAEnC,gBAAgB,EAAE,GAAI;CACzB;;AAjDb,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAsCjB,MAAM,AAAA,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AArD7D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAwCjB,MAAM,AAAA,KAAK,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AAvD1D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0CjB,MAAM,AAAA,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AAzD7D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA4CjB,MAAM,AAAA,MAAM,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI",
|
"mappings": "AAAA,IAAI,GAAG,uBAAuB,CAAA;EAE1B,OAAO,EAAE,IAAK;EACd,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,CAAE;EACV,IAAI,EAAE,CAAE;EACR,KAAK,EAAE,IAAK;EAEhB,cAAc,EAAE,MAAO;EACvB,SAAS,EAAE,MAAO;EAElB,OAAO,EAAE,GAAI;EACb,cAAc,EAAE,IAAK;CA6DxB;;AAzED,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAAA;EACjB,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,KAAM;EAEnB,aAAa,EAAE,GAAI;EACnB,MAAM,EAAE,cAAe;EACvB,aAAa,EAAE,cAAe;EAC9B,UAAU,EAAE,kBAAmB;EAE/B,gBAAgB,EAAE,IAAK;EAEvB,cAAc,EAAE,GAAI;EAGpB,UAAU,EAAE,uBAAwB;EACpC,OAAO,EAAE,CAAE;CAuCd;;AAvEL,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,AAmBhB,qBAAqB,CAAA;EAClB,OAAO,EAAE,CAAE;CACd;;AApCT,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,EAAM;EAET,YAAY,EAAE,KAAM;CAyBvB;;AApET,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,CAAA;EACJ,OAAO,EAAE,EAAG;EACZ,OAAO,EAAE,YAAa;EACtB,QAAQ,EAAE,QAAS;EACnB,GAAG,EAAE,KAAM;EACX,IAAI,EAAE,GAAI;EACV,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,IAAK;EAEb,aAAa,EAAE,SAAU;EACzB,UAAU,EAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,qBAAI;EAEnC,gBAAgB,EAAE,GAAI;CACzB;;AA1Db,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAoBF,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AA7D5D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAsBF,KAAK,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AA/DzD,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAwBF,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AAjE5D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CA0BF,MAAM,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI",
|
||||||
"names": []
|
"names": []
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
body>#notification-container{display:flex;position:absolute;bottom:0;left:0;width:100%;flex-direction:column;flex-wrap:nowrap;z-index:200;pointer-events:none}body>#notification-container .notification-element{display:block;position:relative;margin:.2em auto;padding:0 1em;border-radius:3px;border:1px solid #ddd;border-bottom:1px solid #bbb;box-shadow:inset 0 0 1em #eee;background-color:#fff;pointer-events:all}body>#notification-container .notification-element strong[class]{padding-left:1.5em}body>#notification-container .notification-element strong[class]:before{content:'';display:inline-block;position:absolute;top:1.2em;left:1em;width:.9em;height:.9em;border-radius:50% / 50%;box-shadow:inset -1px 1px 2px rgba(50,50,50,0.5);background-color:red}body>#notification-container .notification-element strong.warning:before{background-color:#dd6a45}body>#notification-container .notification-element strong.info:before{background-color:#2195da}body>#notification-container .notification-element strong.success:before{background-color:#5fca4a}body>#notification-container .notification-element strong.error:before{background-color:#d94747}
|
body>#notification-container{display:flex;position:absolute;bottom:0;left:0;width:100%;flex-direction:column;flex-wrap:nowrap;z-index:200;pointer-events:none}body>#notification-container .notification-element{display:block;position:relative;margin:.2em auto;padding:0 1em;border-radius:3px;border:1px solid #ddd;border-bottom:1px solid #bbb;box-shadow:inset 0 0 1em #eee;background-color:#fff;pointer-events:all;transition:opacity .5s ease-in-out;opacity:0}body>#notification-container .notification-element.notification-visible{opacity:1}body>#notification-container .notification-element strong[class]{padding-left:1.5em}body>#notification-container .notification-element strong[class]:before{content:'';display:inline-block;position:absolute;top:1.2em;left:1em;width:.9em;height:.9em;border-radius:50% / 50%;box-shadow:inset -1px 1px 2px rgba(50,50,50,0.5);background-color:red}body>#notification-container .notification-element strong[class].warning:before{background-color:#dd6a45}body>#notification-container .notification-element strong[class].info:before{background-color:#2195da}body>#notification-container .notification-element strong[class].success:before{background-color:#5fca4a}body>#notification-container .notification-element strong[class].error:before{background-color:#d94747}
|
||||||
|
|
||||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbm90aWYuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJImJvZHkgPiAjbm90aWZpY2F0aW9uLWNvbnRhaW5lcntcblxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBmbGV4LXdyYXA6IG5vd3JhcDtcblxuICAgIHotaW5kZXg6IDIwMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXG4gICAgLm5vdGlmaWNhdGlvbi1lbGVtZW50e1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgbWFyZ2luOiAuMmVtIGF1dG87XG4gICAgICAgICAgICBwYWRkaW5nOiAwIDFlbTtcblxuICAgICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XG4gICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjYmJiO1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMWVtICNlZWU7XG5cbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogYWxsO1xuXG5cbiAgICAgICAgLy8gRElGRkVSRU5UUyBUSEVNRVNcbiAgICAgICAgc3Ryb25nW2NsYXNzXXtcblxuICAgICAgICAgICAgcGFkZGluZy1sZWZ0OiAxLjVlbTtcblxuICAgICAgICAgICAgJjpiZWZvcmV7XG4gICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgICAgICAgICAgdG9wOiAxLjJlbTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGxlZnQ6IDFlbTtcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiAuOWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAuOWVtO1xuXG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IGluc2V0IC0xcHggMXB4IDJweCByZ2JhKDUwLCA1MCwgNTAsIC41KTtcblxuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFdBUk5JTkdcbiAgICAgICAgc3Ryb25nLndhcm5pbmc6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjZGQ2YTQ1OyB9XG4gICAgICAgIC8vIElORk9cbiAgICAgICAgc3Ryb25nLmluZm86YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE5NWRhOyB9XG4gICAgICAgIC8vIFNVQ0NFU1NcbiAgICAgICAgc3Ryb25nLnN1Y2Nlc3M6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjNWZjYTRhOyB9XG4gICAgICAgIC8vIEVSUk9SXG4gICAgICAgIHN0cm9uZy5lcnJvcjpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkOTQ3NDc7IH1cbiAgICB9XG5cbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFBQSxJQUFJLENBQUcsdUJBQXVCLEFBQUEsQ0FFMUIsT0FBTyxDQUFFLElBQUssQ0FDZCxRQUFRLENBQUUsUUFBUyxDQUNmLE1BQU0sQ0FBRSxDQUFFLENBQ1YsSUFBSSxDQUFFLENBQUUsQ0FDUixLQUFLLENBQUUsSUFBSyxDQUVoQixjQUFjLENBQUUsTUFBTyxDQUN2QixTQUFTLENBQUUsTUFBTyxDQUVsQixPQUFPLENBQUUsR0FBSSxDQUNiLGNBQWMsQ0FBRSxJQUFLLENBa0R4QixBQTlERCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixBQUFBLENBQ2pCLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDZixNQUFNLENBQUUsU0FBVSxDQUNsQixPQUFPLENBQUUsS0FBTSxDQUVuQixhQUFhLENBQUUsR0FBSSxDQUNuQixNQUFNLENBQUUsY0FBZSxDQUN2QixhQUFhLENBQUUsY0FBZSxDQUM5QixVQUFVLENBQUUsa0JBQW1CLENBRS9CLGdCQUFnQixDQUFFLElBQUssQ0FFdkIsY0FBYyxDQUFFLEdBQUksQ0FnQ3ZCLEFBNURMLElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBaUJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FBTSxDQUVULFlBQVksQ0FBRSxLQUFNLENBZ0J2QixBQWxEVCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQWlCakIsTUFBTSxDQUFBLEFBQUEsS0FBQyxBQUFBLENBSUYsT0FBTyxBQUFBLENBQ0osT0FBTyxDQUFFLEVBQUcsQ0FDUixPQUFPLENBQUUsWUFBYSxDQUN0QixRQUFRLENBQUUsUUFBUyxDQUNmLEdBQUcsQ0FBRSxLQUFNLENBQ1gsSUFBSSxDQUFFLEdBQUksQ0FDVixLQUFLLENBQUUsSUFBSyxDQUNaLE1BQU0sQ0FBRSxJQUFLLENBRXJCLGFBQWEsQ0FBRSxTQUFVLENBQ3pCLFVBQVUsQ0FBRSxLQUFLLENBQUUsSUFBRyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsa0JBQUksQ0FFbkMsZ0JBQWdCLENBQUUsR0FBSSxDQUN6QixBQWpEYixJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQXNDakIsTUFBTSxBQUFBLFFBQVEsQUFBQSxPQUFPLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxPQUFRLENBQUksQUFyRDdELElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBd0NqQixNQUFNLEFBQUEsS0FBSyxBQUFBLE9BQU8sQUFBQSxDQUFFLGdCQUFnQixDQUFFLE9BQVEsQ0FBSSxBQXZEMUQsSUFBSSxDQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQ0EwQ2pCLE1BQU0sQUFBQSxRQUFRLEFBQUEsT0FBTyxBQUFBLENBQUUsZ0JBQWdCLENBQUUsT0FBUSxDQUFJLEFBekQ3RCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTRDakIsTUFBTSxBQUFBLE1BQU0sQUFBQSxPQUFPLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxPQUFRLENBQUkiLAoJIm5hbWVzIjogW10KfQ== */
|
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbm90aWYuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJImJvZHkgPiAjbm90aWZpY2F0aW9uLWNvbnRhaW5lcntcblxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBmbGV4LXdyYXA6IG5vd3JhcDtcblxuICAgIHotaW5kZXg6IDIwMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXG4gICAgLm5vdGlmaWNhdGlvbi1lbGVtZW50e1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgbWFyZ2luOiAuMmVtIGF1dG87XG4gICAgICAgICAgICBwYWRkaW5nOiAwIDFlbTtcblxuICAgICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XG4gICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjYmJiO1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMWVtICNlZWU7XG5cbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogYWxsO1xuXG4gICAgICAgIC8vIEFOSU1BVElPTiBERSBmYWRlSW4gKyBmYWRlT3V0XG4gICAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgLjVzIGVhc2UtaW4tb3V0O1xuICAgICAgICBvcGFjaXR5OiAwO1xuXG4gICAgICAgICYubm90aWZpY2F0aW9uLXZpc2libGV7XG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICB9XG5cblxuXG4gICAgICAgIC8vIERJRkZFUkVOVFMgVEhFTUVTXG4gICAgICAgIHN0cm9uZ1tjbGFzc117XG5cbiAgICAgICAgICAgIHBhZGRpbmctbGVmdDogMS41ZW07XG5cbiAgICAgICAgICAgICY6YmVmb3Jle1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgdG9wOiAxLjJlbTtcbiAgICAgICAgICAgICAgICBsZWZ0OiAxZW07XG4gICAgICAgICAgICAgICAgd2lkdGg6IC45ZW07XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAuOWVtO1xuXG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IGluc2V0IC0xcHggMXB4IDJweCByZ2JhKDUwLCA1MCwgNTAsIC41KTtcblxuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgLy8gV0FSTklOR1xuICAgICAgICAgICAgJi53YXJuaW5nOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogI2RkNmE0NTsgfVxuICAgICAgICAgICAgLy8gSU5GT1xuICAgICAgICAgICAgJi5pbmZvOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogIzIxOTVkYTsgfVxuICAgICAgICAgICAgLy8gU1VDQ0VTU1xuICAgICAgICAgICAgJi5zdWNjZXNzOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogIzVmY2E0YTsgfVxuICAgICAgICAgICAgLy8gRVJST1JcbiAgICAgICAgICAgICYuZXJyb3I6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk0NzQ3OyB9XG4gICAgICAgIH1cblxuXG4gICAgfVxuXG59XG4iCgldLAoJIm1hcHBpbmdzIjogIkFBQUEsSUFBSSxDQUFHLHVCQUF1QixBQUFBLENBRTFCLE9BQU8sQ0FBRSxJQUFLLENBQ2QsUUFBUSxDQUFFLFFBQVMsQ0FDZixNQUFNLENBQUUsQ0FBRSxDQUNWLElBQUksQ0FBRSxDQUFFLENBQ1IsS0FBSyxDQUFFLElBQUssQ0FFaEIsY0FBYyxDQUFFLE1BQU8sQ0FDdkIsU0FBUyxDQUFFLE1BQU8sQ0FFbEIsT0FBTyxDQUFFLEdBQUksQ0FDYixjQUFjLENBQUUsSUFBSyxDQTZEeEIsQUF6RUQsSUFBSSxDQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQUFBQSxDQUNqQixPQUFPLENBQUUsS0FBTSxDQUNmLFFBQVEsQ0FBRSxRQUFTLENBQ2YsTUFBTSxDQUFFLFNBQVUsQ0FDbEIsT0FBTyxDQUFFLEtBQU0sQ0FFbkIsYUFBYSxDQUFFLEdBQUksQ0FDbkIsTUFBTSxDQUFFLGNBQWUsQ0FDdkIsYUFBYSxDQUFFLGNBQWUsQ0FDOUIsVUFBVSxDQUFFLGtCQUFtQixDQUUvQixnQkFBZ0IsQ0FBRSxJQUFLLENBRXZCLGNBQWMsQ0FBRSxHQUFJLENBR3BCLFVBQVUsQ0FBRSx1QkFBd0IsQ0FDcEMsT0FBTyxDQUFFLENBQUUsQ0F1Q2QsQUF2RUwsSUFBSSxDQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQUFtQmhCLHFCQUFxQixBQUFBLENBQ2xCLE9BQU8sQ0FBRSxDQUFFLENBQ2QsQUFwQ1QsSUFBSSxDQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQ0EwQmpCLE1BQU0sQ0FBQSxBQUFBLEtBQUMsQUFBQSxDQUFNLENBRVQsWUFBWSxDQUFFLEtBQU0sQ0F5QnZCLEFBcEVULElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBMEJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FJRixPQUFPLEFBQUEsQ0FDSixPQUFPLENBQUUsRUFBRyxDQUNaLE9BQU8sQ0FBRSxZQUFhLENBQ3RCLFFBQVEsQ0FBRSxRQUFTLENBQ25CLEdBQUcsQ0FBRSxLQUFNLENBQ1gsSUFBSSxDQUFFLEdBQUksQ0FDVixLQUFLLENBQUUsSUFBSyxDQUNaLE1BQU0sQ0FBRSxJQUFLLENBRWIsYUFBYSxDQUFFLFNBQVUsQ0FDekIsVUFBVSxDQUFFLEtBQUssQ0FBRSxJQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxrQkFBSSxDQUVuQyxnQkFBZ0IsQ0FBRSxHQUFJLENBQ3pCLEFBMURiLElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBMEJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FvQkYsUUFBUSxBQUFBLE9BQU8sQUFBQSxDQUFFLGdCQUFnQixDQUFFLE9BQVEsQ0FBSSxBQTdENUQsSUFBSSxDQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQ0EwQmpCLE1BQU0sQ0FBQSxBQUFBLEtBQUMsQUFBQSxDQXNCRixLQUFLLEFBQUEsT0FBTyxBQUFBLENBQUUsZ0JBQWdCLENBQUUsT0FBUSxDQUFJLEFBL0R6RCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTBCakIsTUFBTSxDQUFBLEFBQUEsS0FBQyxBQUFBLENBd0JGLFFBQVEsQUFBQSxPQUFPLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxPQUFRLENBQUksQUFqRTVELElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBMEJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0EwQkYsTUFBTSxBQUFBLE9BQU8sQUFBQSxDQUFFLGdCQUFnQixDQUFFLE9BQVEsQ0FBSSIsCgkibmFtZXMiOiBbXQp9 */
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
"../notif.scss"
|
"../notif.scss"
|
||||||
],
|
],
|
||||||
"sourcesContent": [
|
"sourcesContent": [
|
||||||
"body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n }\n\n // WARNING\n strong.warning:before{ background-color: #dd6a45; }\n // INFO\n strong.info:before{ background-color: #2195da; }\n // SUCCESS\n strong.success:before{ background-color: #5fca4a; }\n // ERROR\n strong.error:before{ background-color: #d94747; }\n }\n\n}\n"
|
"body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n // ANIMATION DE fadeIn + fadeOut\n transition: opacity .5s ease-in-out;\n opacity: 0;\n\n &.notification-visible{\n opacity: 1;\n }\n\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n\n // WARNING\n &.warning:before{ background-color: #dd6a45; }\n // INFO\n &.info:before{ background-color: #2195da; }\n // SUCCESS\n &.success:before{ background-color: #5fca4a; }\n // ERROR\n &.error:before{ background-color: #d94747; }\n }\n\n\n }\n\n}\n"
|
||||||
],
|
],
|
||||||
"mappings": "AAAA,IAAI,CAAG,uBAAuB,AAAA,CAE1B,OAAO,CAAE,IAAK,CACd,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,CAAE,CACV,IAAI,CAAE,CAAE,CACR,KAAK,CAAE,IAAK,CAEhB,cAAc,CAAE,MAAO,CACvB,SAAS,CAAE,MAAO,CAElB,OAAO,CAAE,GAAI,CACb,cAAc,CAAE,IAAK,CAkDxB,AA9DD,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,AAAA,CACjB,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,KAAM,CAEnB,aAAa,CAAE,GAAI,CACnB,MAAM,CAAE,cAAe,CACvB,aAAa,CAAE,cAAe,CAC9B,UAAU,CAAE,kBAAmB,CAE/B,gBAAgB,CAAE,IAAK,CAEvB,cAAc,CAAE,GAAI,CAgCvB,AA5DL,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAAM,CAET,YAAY,CAAE,KAAM,CAgBvB,AAlDT,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,AAAA,CACJ,OAAO,CAAE,EAAG,CACR,OAAO,CAAE,YAAa,CACtB,QAAQ,CAAE,QAAS,CACf,GAAG,CAAE,KAAM,CACX,IAAI,CAAE,GAAI,CACV,KAAK,CAAE,IAAK,CACZ,MAAM,CAAE,IAAK,CAErB,aAAa,CAAE,SAAU,CACzB,UAAU,CAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,CAEnC,gBAAgB,CAAE,GAAI,CACzB,AAjDb,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAsCjB,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AArD7D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAwCjB,MAAM,AAAA,KAAK,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AAvD1D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0CjB,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AAzD7D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA4CjB,MAAM,AAAA,MAAM,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI",
|
"mappings": "AAAA,IAAI,CAAG,uBAAuB,AAAA,CAE1B,OAAO,CAAE,IAAK,CACd,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,CAAE,CACV,IAAI,CAAE,CAAE,CACR,KAAK,CAAE,IAAK,CAEhB,cAAc,CAAE,MAAO,CACvB,SAAS,CAAE,MAAO,CAElB,OAAO,CAAE,GAAI,CACb,cAAc,CAAE,IAAK,CA6DxB,AAzED,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,AAAA,CACjB,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,KAAM,CAEnB,aAAa,CAAE,GAAI,CACnB,MAAM,CAAE,cAAe,CACvB,aAAa,CAAE,cAAe,CAC9B,UAAU,CAAE,kBAAmB,CAE/B,gBAAgB,CAAE,IAAK,CAEvB,cAAc,CAAE,GAAI,CAGpB,UAAU,CAAE,uBAAwB,CACpC,OAAO,CAAE,CAAE,CAuCd,AAvEL,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,AAmBhB,qBAAqB,AAAA,CAClB,OAAO,CAAE,CAAE,CACd,AApCT,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAAM,CAET,YAAY,CAAE,KAAM,CAyBvB,AApET,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,AAAA,CACJ,OAAO,CAAE,EAAG,CACZ,OAAO,CAAE,YAAa,CACtB,QAAQ,CAAE,QAAS,CACnB,GAAG,CAAE,KAAM,CACX,IAAI,CAAE,GAAI,CACV,KAAK,CAAE,IAAK,CACZ,MAAM,CAAE,IAAK,CAEb,aAAa,CAAE,SAAU,CACzB,UAAU,CAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,CAEnC,gBAAgB,CAAE,GAAI,CACzB,AA1Db,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAoBF,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AA7D5D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAsBF,KAAK,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AA/DzD,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAwBF,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AAjE5D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CA0BF,MAAM,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI",
|
||||||
"names": []
|
"names": []
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
var NotificationClass=function(a){this.container=a};NotificationClass.prototype={container:this.container,stack:[],types:["warning","info","success","error"]};NotificationClass.prototype.pushStack=function(a,d,e){if(!(a instanceof Array&&e instanceof Array))return null;var c=-1,b;for(b in a)if(-1<e.indexOf(a[b])){c=b;break}if(-1==c)return a.push(d)-1;a[c]=d;return c};
|
var NotificationClass=function(a){this.container=a};NotificationClass.prototype={container:this.container,stack:[],types:["warning","info","success","error"],defaultTimeout:2E3};NotificationClass.prototype.pushStack=function(a,d,e){if(!(a instanceof Array&&e instanceof Array))return null;var c=-1,b;for(b in a)if(-1<e.indexOf(a[b])){c=b;break}if(-1==c)return a.push(d)-1;a[c]=d;return c};
|
||||||
NotificationClass.prototype.hide=function(a){if(isNaN(a))return!1;a=parseInt(a);this.container.removeChild(this.stack[a].element);this.stack[a]=null};
|
NotificationClass.prototype.hide=function(a){if(isNaN(a))return!1;a=parseInt(a);this.container.removeChild(this.stack[a].element);this.stack[a]=null};
|
||||||
NotificationClass.prototype.show=function(a,d,e,c){a=-1<this.types.indexOf(a)?a:this.types[0];d="string"==typeof d?d:"";e="string"==typeof e?e:"...";c="number"==typeof c?c:400;var b={element:document.createElement("div"),type:a,title:d,message:e,timeout:null};b.element.className="notification-element";b.element.innerHTML='<p><strong class="'+a+'">'+d+"</strong>: "+e+"<p>";this.container.appendChild(b.element);var f=this.pushStack(this.stack,b,[null]);b.element.id=f;var g=this;b.timeout=setTimeout(function(){g.hide(f)},
|
NotificationClass.prototype.show=function(a,d,e,c){a=-1<this.types.indexOf(a)?a:this.types[0];d="string"==typeof d?d:"";e="string"==typeof e?e:"...";c="number"==typeof c?c:this.defaultTimeout;var b={element:document.createElement("div"),type:a,title:d,message:e,timeout:null};b.element.className="notification-element";b.element.innerHTML='<p><strong class="'+a+'">'+d+":</strong> "+e+"<p>";this.container.appendChild(b.element);var f=this.pushStack(this.stack,b,[null]);b.element.id=f;var g=this;b.element.className=
|
||||||
c)};
|
"notification-element notification-visible";setTimeout(function(){b.element.className="notification-element"},500+c);b.timeout=setTimeout(function(){g.hide(f)},500+c+500);b.element.addEventListener("click",function(a){g.hide(f)},!1)};
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,8 @@ NotificationClass.prototype = {
|
||||||
'info',
|
'info',
|
||||||
'success',
|
'success',
|
||||||
'error'
|
'error'
|
||||||
]
|
],
|
||||||
|
defaultTimeout: 2000 // Temps d'apparition par défaut
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -93,7 +94,7 @@ NotificationClass.prototype.hide = function(id){
|
||||||
* @type<String> Type de notification parmi 'warning', 'info', 'success', 'error'
|
* @type<String> Type de notification parmi 'warning', 'info', 'success', 'error'
|
||||||
* @title<String> Titre de la notification
|
* @title<String> Titre de la notification
|
||||||
* @message<String> Message de la notification
|
* @message<String> Message de la notification
|
||||||
* @timeout<int> Temps d'apparition de la notification en ms (millisecondes)
|
* @timeout<int> Temps d'apparition de la notification en ms (millisecondes) + 2 * 500ms (fadeIn+fadeOut)
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
NotificationClass.prototype.show = function(type, title, message, timeout){
|
NotificationClass.prototype.show = function(type, title, message, timeout){
|
||||||
|
|
@ -109,7 +110,7 @@ NotificationClass.prototype.show = function(type, title, message, timeout){
|
||||||
message = typeof message == 'string' ? message : '...';
|
message = typeof message == 'string' ? message : '...';
|
||||||
|
|
||||||
/* (4) Vérification de @timeout */
|
/* (4) Vérification de @timeout */
|
||||||
timeout = typeof timeout == 'number' ? timeout : 400;
|
timeout = typeof timeout == 'number' ? timeout : this.defaultTimeout;
|
||||||
|
|
||||||
/* (1) Construction de l'élément
|
/* (1) Construction de l'élément
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
|
|
@ -124,7 +125,7 @@ NotificationClass.prototype.show = function(type, title, message, timeout){
|
||||||
|
|
||||||
/* (2) Construction de l'élément */
|
/* (2) Construction de l'élément */
|
||||||
stackItem.element.className = 'notification-element';
|
stackItem.element.className = 'notification-element';
|
||||||
stackItem.element.innerHTML = '<p><strong class="'+type+'">'+title+'</strong>: '+message+'<p>';
|
stackItem.element.innerHTML = '<p><strong class="'+type+'">'+title+':</strong> '+message+'<p>';
|
||||||
|
|
||||||
/* (2) Ajout à la pile et au DOM
|
/* (2) Ajout à la pile et au DOM
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
|
|
@ -135,8 +136,25 @@ NotificationClass.prototype.show = function(type, title, message, timeout){
|
||||||
/* (3) Gestion du temps d'apparition
|
/* (3) Gestion du temps d'apparition
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
var ptr = this;
|
var ptr = this;
|
||||||
|
|
||||||
|
// {1} fadeIn START //
|
||||||
|
stackItem.element.className = 'notification-element notification-visible';
|
||||||
|
|
||||||
|
// {2} fadeOut START //
|
||||||
|
setTimeout(function(){
|
||||||
|
stackItem.element.className = 'notification-element';
|
||||||
|
}, 500+timeout);
|
||||||
|
|
||||||
|
// {3} fadeOut STOP + animation STOP //
|
||||||
stackItem.timeout = setTimeout(function(){
|
stackItem.timeout = setTimeout(function(){
|
||||||
ptr.hide(id);
|
ptr.hide(id);
|
||||||
}, timeout);
|
}, 500+timeout+500);
|
||||||
|
|
||||||
|
|
||||||
|
/* (4) Gestion du clic qui ferme la notification
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
stackItem.element.addEventListener('click', function(e){
|
||||||
|
ptr.hide(id);
|
||||||
|
}, false);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
21
view.php
21
view.php
|
|
@ -74,26 +74,7 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- CONTENEUR DES NOTIFICATIONS -->
|
<!-- CONTENEUR DES NOTIFICATIONS -->
|
||||||
<div id='notification-container'>
|
<div id='notification-container'></div>
|
||||||
<!-- <div class='notification-element'>
|
|
||||||
<p><strong class='warning'>Warning</strong> : Some warning test</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class='notification-element'>
|
|
||||||
<p><strong class='success'>Success</strong> : Some success test</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class='notification-element'>
|
|
||||||
<p><strong class='info'>Info</strong> : Some info test</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class='notification-element'>
|
|
||||||
<p><strong class='error'>Error</strong> : Some error test</p>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
var instance=new FormDeflater(document.getElementById("myform"),["input"],["name","data-name"]);console.log(instance.deflate());Notification=new NotificationClass($("#notification-container"));
|
var instance=new FormDeflater(document.getElementById("myform"),["input"],["name","data-name"]);console.log(instance.deflate());Notification=new NotificationClass($("#notification-container"));Notification.show("warning","ERREUR","Une erreur de chargement est intervenue..");
|
||||||
|
|
|
||||||
|
|
@ -9,3 +9,5 @@ console.log( instance.deflate() );
|
||||||
|
|
||||||
|
|
||||||
Notification = new NotificationClass( $('#notification-container') );
|
Notification = new NotificationClass( $('#notification-container') );
|
||||||
|
|
||||||
|
Notification.show( 'warning', 'ERREUR', 'Une erreur de chargement est intervenue..' );
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue