Added light notification messages

stable
Xavier Julián 2014-07-09 16:41:09 +02:00
parent 7b85ea6f60
commit 805c827bb1
5 changed files with 42 additions and 13 deletions

View File

@ -13,7 +13,6 @@ div.hidden.notification-message.notification-message-error
a.icon.icon-delete(href="", title="Close notification") a.icon.icon-delete(href="", title="Close notification")
div.hidden.notification-light.notification-message-light-error div.hidden.notification-light.notification-message-light-error
div.icon.icon-notification-error
div.text div.text
h4.warning Oops, something happened... h4.warning Oops, something happened...
p Our oompa Loompas are sad, your changes were not saved! p Our oompa Loompas are sad, your changes were not saved!

View File

@ -42,3 +42,39 @@
vertical-align: sub; vertical-align: sub;
} }
} }
.notification-light {
@include transition(padding .2s linear);
background: rgba(0, 0, 0, .8);
color: $white;
left: calc(50% - 200px);
padding: 4% 1rem .2rem;
position: absolute;
top: 0;
width: 400px;
z-index: 999;
&.hidden {
@include transition (padding .2s linear);
padding: 1% 1rem .2rem;
}
.text {
display: inline-block;
margin-left: .5rem;
width: 80%;
}
.warning {
@extend %large;
@extend %bold;
color: $white;
line-height: 2.4rem;
}
.icon-delete {
color: $white;
position: absolute;
right: 1rem;
}
}
.notification-message-light-error {
@include background(240, 15, 8, .8);
}

View File

@ -19,6 +19,8 @@ $very-light-gray: #e3e3e3;
$red-light: #ff8282; $red-light: #ff8282;
$red: #f00; $red: #f00;
$rgba-red: 240, 15, 0, .8;
$orange: #d98a0b; $orange: #d98a0b;
$button-green: #699b05; $button-green: #699b05;

View File

@ -50,3 +50,7 @@
max-height: $max; max-height: $max;
} }
} }
@mixin background($red: 255, $green: 255, $blue: 255, $opacity: 1) {
background: rgba($red, $green, $blue, $opacity);
}

View File

@ -52,18 +52,6 @@
background: $fresh-taiga; background: $fresh-taiga;
} }
} }
.reset-pass-text {
display: none;
span,
strong {
display: block;
text-align: center;
}
.title {
@extend %large;
line-height: 2rem;
}
}
} }
.login-error { .login-error {