change notification styles

This commit is contained in:
bechi 2015-01-23 17:12:00 -03:00
parent 02444a9c43
commit 4e144cf907
2 changed files with 41 additions and 47 deletions

View File

@ -724,7 +724,7 @@ input[type=number]::-webkit-outer-spin-button {
} }
.dr-notification-container.top { .dr-notification-container.top {
top: 60px; top: 70px;
} }
.dr-notification-container.center { .dr-notification-container.center {
@ -733,44 +733,40 @@ input[type=number]::-webkit-outer-spin-button {
} }
.dr-notification-wrapper { .dr-notification-wrapper {
width: 400px; width: 375px;
position: relative; position: relative;
margin: 0 0 1px 0; margin: 0 0 1px 0;
} }
.dr-notification {
width: 400px;
clear: both;
overflow: hidden;
}
.dr-notification-close-btn { .dr-notification-close-btn {
-webkit-border-radius: 20px; color: #A5B2BF;
-moz-border-radius: 20px; border: 1px solid #CED5DC;
-ms-border-radius: 20px; border-radius: 100%;
border-radius: 20px;
display: inline-block; display: inline-block;
padding: 5px; padding: 4px 7px;
font-size: 18px; font-size: 18px;
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
cursor: pointer; cursor: pointer;
z-index: 10; z-index: 10;
margin: 13px 8px 0;
} }
.dr-notification-image { .dr-notification-image {
float: left; float: left;
display: block; display: block;
font-size: 40px; padding: 0.8rem;
color: white; color: white;
text-align: center; text-align: center;
border-right: 1px dashed #415970;
} }
.dr-notification-image i { .dr-notification-image i {
height: 40px;
width: 40px;
padding: 0.3rem 0.5rem;
display: block; display: block;
width: 100%; border-radius: 100%;
padding: 20px; font-size: 30px;
} }
.dr-notification-image img { .dr-notification-image img {
margin: 15px; margin: 15px;
@ -779,48 +775,48 @@ input[type=number]::-webkit-outer-spin-button {
} }
.dr-notification-content { .dr-notification-content {
padding-left: 80px; padding: 7px 70px 5px 65px;
padding-right: 30px;
padding-top: 5px;
padding-bottom: 5px;
} }
.dr-notification-title { .dr-notification-title {
color: white; color: #4B6178;
padding: 0px; padding: 0px;
font-size: 16px; font-size: 16px;
margin-top: 0; margin-bottom: 3px;
font-weight: 700;
} }
.dr-notification { .dr-notification {
background-color: #34495E; background: rgba(255,255,255,0.90);
color: #eee; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.20);
border: 1px solid #2C3E50; width: 400px;
} clear: both;
.dr-notification-close-btn { overflow: hidden;
background-color: #34495E; border-radius: 3px 0 0 3px;
color: #fff;
border: 1px solid #3C5269;
} }
.dr-notification-image.dr-notification-type-info { .dr-notification-image.dr-notification-type-funds i {
color: #FFF; background-color: #7A8C9E;
} }
.dr-notification-image.dr-notification-type-warning { .dr-notification-image.dr-notification-type-info i {
color: #FFA226; background-color: #7A8C9E;
} }
.dr-notification-image.dr-notification-type-error { .dr-notification-image.dr-notification-type-warning i {
color: #FF4B4F; background-color: #FFA226;
} }
.dr-notification-image.dr-notification-type-success { .dr-notification-image.dr-notification-type-error i {
color: #1ABC9C; background-color: #FF4B4F;
} }
.dr-notification-image.success { .dr-notification-image.dr-notification-type-success i {
color: #1ABC9C; background-color: #1ABC9C;
}
.dr-notification-image.success i {
background-color: #1ABC9C;
} }
.success { .success {
@ -875,6 +871,7 @@ input[type=number]::-webkit-outer-spin-button {
.dr-notification-text { .dr-notification-text {
font-size: 12px; font-size: 12px;
line-height: 120%; line-height: 120%;
color: #7A8C9E;
} }
.ellipsis { .ellipsis {

View File

@ -369,6 +369,7 @@
.dr-notification { .dr-notification {
width: 100%; width: 100%;
border-radius: 0;
} }
.dr-notification-container { .dr-notification-container {
@ -393,12 +394,8 @@
} }
.dr-notification-text { .dr-notification-text {
font-size: 10px; font-size: 12px;
line-height: 100%; line-height: 120%;
}
.dr-notification-image i {
padding: 15px;
} }
} }