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

notification messages example

stable
Xavier Julián 2014-06-24 09:29:43 +02:00
parent 79cdc0c7e4
commit c4ebee7a15
3 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/partials/issues.jade
View File

@ -4,15 +4,14 @@ block head
title Taiga Project management web application with scrum in mind!
block content
include views/components/notification-message
div.wrapper
include views/components/notification-message
sidebar.menu-secondary.sidebar
header
h1 Filters
include views/modules/search-in
include views/modules/filter-tags
section.main.issues-page
header
include views/components/mainTitle

15
app/partials/views/components/notification-message.jade
View File

@ -1,2 +1,13 @@
div.notification-message.notification-message-success
div.icon.icon
//div.notification-message.notification-message-success
// div.icon.icon-notification-success
// div.text
// h4.warning Everything is ok
// p Our oompa Loompas saved all your changes!
// a.icon.icon-delete(href="", title="Close notification")
div.notification-message.notification-message-error
div.icon.icon-notification-error
div.text
h4.warning Oops, something happened...
p Our oompa Loompas are sad, your changes were not saved!
a.icon.icon-delete(href="", title="Close notification")

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

@ -0,0 +1,44 @@
.notification-message {
background: $grayer;
color: $white;
padding: 1rem;
padding-bottom: .5em;
position: relative;
width: 100%;
z-index: 999;
.text {
display: inline-block;
margin-left: .5rem;
width: 80%;
}
.warning {
@extend %xlarge;
color: $white;
font-family: 'DroidSans-Bold';
line-height: 2.4rem;
}
.icon-delete {
color: $white;
position: absolute;
right: 1rem;
top: 1rem;
}
}
.notification-message-success {
background: $fresh-taiga;
.icon-notification-success {
@extend %xxlarge;
display: inline;
vertical-align: sub;
}
}
.notification-message-error {
background: $red;
.icon-notification-error {
@extend %xxlarge;
display: inline;
vertical-align: sub;
}
}