Fixes notification message position

stable
Xavier Julián 2015-04-13 13:28:13 +02:00
parent 6269798089
commit ad023ef453
2 changed files with 27 additions and 24 deletions

View File

@ -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

View File

@ -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;