diff --git a/app/partials/includes/components/notification-message.jade b/app/partials/includes/components/notification-message.jade index a40af809..d0feaeaf 100644 --- a/app/partials/includes/components/notification-message.jade +++ b/app/partials/includes/components/notification-message.jade @@ -12,7 +12,7 @@ div.notification-message.notification-message-success div.text h4.warning(translate="NOTIFICATION.OK") - p(translate="NOTIFICAION.SAVED") + p(translate="NOTIFICATION.SAVED") div.notification-message.notification-message-error div.icon.icon-notification-error diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss index 7e4e7bba..f4a88862 100644 --- a/app/styles/components/notification-message.scss +++ b/app/styles/components/notification-message.scss @@ -1,12 +1,12 @@ .notification-message-success { background: rgba($fresh-taiga, .95); box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05); - opacity: 0; - right: 1%; - top: 1%; + opacity: 1; + right: -370px; + top: 2%; transition: opacity .2s ease-in; &.active { - animation: animSlide 1000ms linear both; + animation: animSlide 2000ms linear both; opacity: 1; } p { @@ -20,29 +20,32 @@ } } -// Generated with Bounce.js. Edit at http://goo.gl/02G9MY \ +// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR @keyframes animSlide { - 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); } - 0.52% { transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -274.136, 0, 0, 1); } - 1.02% { transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -250.084, 0, 0, 1); } - 2.28% { transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -193.907, 0, 0, 1); } - 3.52% { transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -145.805, 0, 0, 1); } - 4.1% { transform: matrix3d(1.238, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1); } - 4.78% { transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -104.714, 0, 0, 1); } - 6.03% { transform: matrix3d(.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -71.786, 0, 0, 1); } - 8.11% { transform: matrix3d(.986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1); } - 11.03% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.532, 0, 0, 1); } - 12.11% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1); } - 16.04% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.008, 0, 0, 1); } - 16.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1); } - 20% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.911, 0, 0, 1); } - 27.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1); } - 38.34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.311, 0, 0, 1); } - 82.78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } - 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + 0.52% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.485, 0, 0, 1); } + 1.02% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -66.555, 0, 0, 1); } + 2.28% { transform: matrix3d(1.111, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -141.457, 0, 0, 1); } + 3.52% { transform: matrix3d(1.281, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -205.594, 0, 0, 1); } + 4.1% { transform: matrix3d(1.111, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -232.117, 0, 0, 1); } + 4.78% { transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -260.381, 0, 0, 1); } + 6.03% { transform: matrix3d(.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -304.285, 0, 0, 1); } + 8.11% { transform: matrix3d(.986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -357.804, 0, 0, 1); } + 11.03% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -399.29, 0, 0, 1); } + 12.11% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -407.374, 0, 0, 1); } + 16.04% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -417.343, 0, 0, 1); } + 16.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -417.342, 0, 0, 1); } + 20% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -413.214, 0, 0, 1); } + 27.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -403.135, 0, 0, 1); } + 38.34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -399.585, 0, 0, 1); } + 60.56% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400.01, 0, 0, 1); } + 82.78% { opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); } + 100% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); } } + + .notification-message-error { background: rgba($red, .9); top: 0;