-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
【全局提示 第二轮UI验收问题】1. icon24px 2. icon和标题水平居中 3. 弹窗中font family调用错误
【消息通知 第二轮UI验收问题】关闭按钮颜色:grey-7
- Loading branch information
1 parent
6d688bd
commit d214ad3
Showing
2 changed files
with
77 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
150 changes: 75 additions & 75 deletions
150
src/components/notification/notification-body/index.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,97 +1,97 @@ | ||
@import '../../style/index'; | ||
|
||
.@{prefix}-notification { | ||
display: flex; | ||
align-items: baseline; | ||
gap: 9px; | ||
padding: 20px; | ||
background: #FFFFFF; | ||
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1), 0 0 1px 0 rgba(0,0,0,0.3); | ||
border-radius: 12px; | ||
|
||
&.small { | ||
border-radius: 3px; | ||
} | ||
display: flex; | ||
align-items: baseline; | ||
gap: 9px; | ||
padding: 20px; | ||
background: #ffffff; | ||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.3); | ||
border-radius: 12px; | ||
|
||
&.middle { | ||
border-radius: 6px; | ||
} | ||
&.small { | ||
border-radius: 3px; | ||
} | ||
|
||
&.light-theme { | ||
color: white; | ||
&.middle { | ||
border-radius: 6px; | ||
} | ||
|
||
.info-icon { | ||
color: white!important; | ||
} | ||
&.light-theme { | ||
color: white; | ||
|
||
header, | ||
main, | ||
header i.close-icon { | ||
color: white; | ||
} | ||
.info-icon { | ||
color: white !important; | ||
} | ||
|
||
&-content { | ||
flex: 1; | ||
header, | ||
main, | ||
header i.close-icon { | ||
color: @gray-7; | ||
} | ||
} | ||
|
||
.info-icon { | ||
position: relative; | ||
top: 2px; | ||
font-size: 20px; | ||
&-content { | ||
flex: 1; | ||
} | ||
|
||
&.info { | ||
color: #496BF5; | ||
} | ||
.info-icon { | ||
position: relative; | ||
top: 2px; | ||
font-size: 20px; | ||
|
||
&.success { | ||
color: #21BA45; | ||
} | ||
|
||
&.fail { | ||
color: #E74949; | ||
} | ||
&.info { | ||
color: #496bf5; | ||
} | ||
|
||
&.warn { | ||
color: #FD830A; | ||
} | ||
&.success { | ||
color: #21ba45; | ||
} | ||
|
||
header { | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
height: 24px; | ||
line-height: 24px; | ||
font-size: 16px; | ||
font-weight: 500; | ||
color: @gray-9; | ||
margin-bottom: 8px; | ||
|
||
i.close-icon { | ||
font-size: 16px; | ||
color: #D8D8D8; | ||
cursor: pointer; | ||
} | ||
&.fail { | ||
color: #e74949; | ||
} | ||
|
||
main { | ||
line-height: 20px; | ||
font-size: 14px; | ||
font-weight: 400; | ||
color: @gray-8; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
display: -webkit-box; | ||
-webkit-line-clamp: 3; | ||
-webkit-box-orient: vertical; | ||
&.warn { | ||
color: #fd830a; | ||
} | ||
} | ||
|
||
footer { | ||
display: flex; | ||
align-items: center; | ||
flex-direction: row-reverse; | ||
gap: 16px; | ||
margin-top: 20px; | ||
header { | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
height: 24px; | ||
line-height: 24px; | ||
font-size: 16px; | ||
font-weight: 500; | ||
color: @gray-9; | ||
margin-bottom: 8px; | ||
|
||
i.close-icon { | ||
font-size: 16px; | ||
color: @gray-7; | ||
cursor: pointer; | ||
} | ||
} | ||
|
||
main { | ||
line-height: 20px; | ||
font-size: 14px; | ||
font-weight: 400; | ||
color: @gray-8; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
display: -webkit-box; | ||
-webkit-line-clamp: 3; | ||
-webkit-box-orient: vertical; | ||
} | ||
|
||
footer { | ||
display: flex; | ||
align-items: center; | ||
flex-direction: row-reverse; | ||
gap: 16px; | ||
margin-top: 20px; | ||
} | ||
} |