taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #430 from taigaio/issue/2483/notification-message 

Issue/2483/notification message
stable
Alejandro 2015-04-09 13:03:02 +02:00
parent d8908fd6fd fedcf5787c
commit 524c90ddb7
2 changed files with 66 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/partials/includes/components/notification-message.jade
View File

@ -10,11 +10,9 @@
//-See coffe/modules/base/confirm.coffee
div.notification-message.notification-message-success
div.icon.icon-notification-success
div.text
h4.warning(translate="NOTIFICATION.OK")
p(translate="NOTIFICAION.SAVED")
a.icon.icon-delete(href="", title="{{'NOTIFICATION.CLOSE' | translate}}")
div.notification-message.notification-message-error
div.icon.icon-notification-error

97
app/styles/components/notification-message.scss
View File

@ -1,21 +1,72 @@
.notification-message {
background: rgba($gray-light, .95);
color: $white;
.notification-message-success {
background: rgba($fresh-taiga, .95);
box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05);
opacity: 0;
padding: 1rem;
position: fixed;
right: 1%;
top: 1%;
transition: opacity .2s ease-in;
&.active {
animation: animSlide 1000ms linear both;
opacity: 1;
}
p {
margin: 0;
}
.warning {
@extend %large;
@extend %bold;
color: $white;
line-height: 1.2;
}
}
// Generated with Bounce.js. Edit at http://goo.gl/02G9MY \
@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); }
}
.notification-message-error {
background: rgba($red, .9);
top: 0;
transform: translateY(-100%);
width: 100%;
z-index: 99920;
&.inactive {
transition: all .6s ease-in-out;
}
&.active {
opacity: 1;
transform: translateY(0);
transition: all .6s ease-in-out;
}
&.inactive {
transition: all .6s ease-in-out;
}
.icon-notification-error {
@extend %xxlarge;
display: inline;
vertical-align: sub;
}
.warning {
@extend %xlarge;
@extend %bold;
color: $white;
line-height: 2.4rem;
}
.text {
display: inline-block;
margin-left: .5rem;
@ -24,12 +75,6 @@
margin: 0;
}
}
.warning {
@extend %xlarge;
@extend %bold;
color: $white;
line-height: 2.4rem;
}
.icon-delete {
color: $white;
position: absolute;
@ -38,22 +83,12 @@
}
}
.notification-message-success {
background: rgba($fresh-taiga, .9);
.icon-notification-success {
@extend %xxlarge;
display: inline;
vertical-align: sub;
}
}
.notification-message-error {
background: rgba($red, .9);
.icon-notification-error {
@extend %xxlarge;
display: inline;
vertical-align: sub;
}
.notification-message {
color: $white;
opacity: 0;
padding: 1rem;
position: fixed;
z-index: 99920;
}
.notification-light {