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-width: 330px;
$--notification-padding: 20px;
$--notification-shadow: $--box-shadow-base;
$--notification-icon-size: 40px;
$--notification-padding: 14px 26px 14px 13px;
$--notification-raduis: 8px;
$--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-color: $--border-color-hover;
$--notification-color: $--color-text-regular;
$--notification-title-font-size: 16px;
$--notification-title-color: $--color-text-primary;
$--notification-close-color: $--color-text-placeholder;
$--notification-close-hover-color: $--color-text-secondary;
$--notification-close-color: $--color-text-secondary;
$--notification-close-hover-color: $--color-text-regular;
$--notification-success-color: $--color-success;
$--notification-info-color: $--color-info;

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

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