mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Auto adjust notification style for singleline message, close #5846

Browse Source
This commit is contained in:
afc163 2017-04-22 01:11:18 +08:00
parent f5fa64c17b
commit 12a9f1e5b5
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/notification/index.tsx
View File

@ -124,7 +124,10 @@ function notice(args) {
content: (
<div className={iconNode ? `${prefixCls}-with-icon` : ''}>
{iconNode}
<div className={`${prefixCls}-message`}>{args.message}</div>
<div className={`${prefixCls}-message`}>
<span className={`${prefixCls}-message-single-line-auto-margin`} />
{args.message}
</div>
<div className={`${prefixCls}-description`}>{args.description}</div>
{args.btn ? <span className={`${prefixCls}-btn`}>{args.btn}</span> : null}
</div>

17
components/notification/style/index.less
View File

@ -38,6 +38,21 @@
color: @heading-color;
margin-bottom: 4px;
line-height: 20px;
display: inline-block;
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
&-single-line-auto-margin {
width: ~"calc(@{notification-width} - @{notification-padding} * 2 - 24px - 48px - 100%)";
background-color: transparent;
pointer-events: none;
display: block;
max-width: 4px;
&:before {
content: '';
display: block;
padding-bottom: 100%;
}
}
}
&-description {
@ -60,7 +75,7 @@
}
&-icon {
float: left;
position: absolute;
font-size: 32px;
line-height: 32px;