github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Notification: add chalk theme

pull/7011/head
Dreamacro 2017-09-07 17:53:08 +08:00 committed by 杨奕
parent 4c2a0d40e9
commit c20954f1f2
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/theme-chalk/src/common/var.scss
View File

@ -278,16 +278,20 @@ $--message-danger-color: $--color-danger;
/* Notification /* Notification
-------------------------- */ -------------------------- */
$--notification-width: 330px; $--notification-width: 330px;
$--notification-padding: 20px; $--notification-padding: 14px 26px 14px 13px;
$--notification-shadow: $--box-shadow-base; $--notification-raduis: 8px;
$--notification-icon-size: 40px; $--notification-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
$--notification-border-color: $--border-color-lighter;
$--notification-icon-size: 24px;
$--notification-close-font-size: 12px;
$--notification-group-margin: 13px;
$--notification-font-size: $--font-size-base; $--notification-font-size: $--font-size-base;
$--notification-color: $--border-color-hover; $--notification-color: $--color-text-regular;
$--notification-title-font-size: 16px; $--notification-title-font-size: 16px;
$--notification-title-color: $--color-text-primary; $--notification-title-color: $--color-text-primary;
$--notification-close-color: $--color-text-placeholder; $--notification-close-color: $--color-text-secondary;
$--notification-close-hover-color: $--color-text-secondary; $--notification-close-hover-color: $--color-text-regular;
$--notification-success-color: $--color-success; $--notification-success-color: $--color-success;
$--notification-info-color: $--color-info; $--notification-info-color: $--color-info;

23
packages/theme-chalk/src/notification.scss
View File

@ -2,10 +2,12 @@
@import "common/var"; @import "common/var";
@include b(notification) { @include b(notification) {
display: flex;
width: $--notification-width; width: $--notification-width;
padding: $--notification-padding; padding: $--notification-padding;
border-radius: $--notification-raduis;
box-sizing: border-box; box-sizing: border-box;
border-radius: $--border-radius-small; border: 1px solid $--notification-border-color;
position: fixed; position: fixed;
background-color: $--color-white; background-color: $--color-white;
box-shadow: $--notification-shadow; box-shadow: $--notification-shadow;
@ -21,14 +23,11 @@
} }
@include e(group) { @include e(group) {
margin-left: 0; margin-left: $--notification-group-margin;
@include when(with-icon) {
margin-left: 55px;
}
} }
@include e(title) { @include e(title) {
font-weight: normal; font-weight: bold;
font-size: $--notification-title-font-size; font-size: $--notification-title-font-size;
color: $--notification-title-color; color: $--notification-title-color;
margin: 0; margin: 0;
@ -37,7 +36,7 @@
@include e(content) { @include e(content) {
font-size: $--notification-font-size; font-size: $--notification-font-size;
line-height: 21px; line-height: 21px;
margin: 10px 0 0 0; margin: 6px 0 0 0;
color: $--notification-color; color: $--notification-color;
text-align: justify; text-align: justify;
@ -50,18 +49,16 @@
height: $--notification-icon-size; height: $--notification-icon-size;
width: $--notification-icon-size; width: $--notification-icon-size;
font-size: $--notification-icon-size; font-size: $--notification-icon-size;
float: left; transform: translateY(4px);
position: relative;
top: 3px;
} }
@include e(closeBtn) { @include e(closeBtn) {
position: absolute; position: absolute;
top: 20px; top: 15px;
right: 20px; right: 15px;
cursor: pointer; cursor: pointer;
color: $--notification-close-color; color: $--notification-close-color;
font-size: $--notification-font-size; font-size: $--notification-close-font-size;
&:hover { &:hover {
color: $--notification-close-hover-color; color: $--notification-close-hover-color;