mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: notification width in small screen (#27189)

Browse Source 
close #27188
This commit is contained in:
偏右 2020-10-16 16:07:56 +08:00 committed by GitHub
parent 274871b50c
commit fb9d2e6738
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,19 +6,19 @@
@notification-width: 384px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;
@notification-margin-edge: 24px;
.@{notification-prefix-cls} {
.reset-component;
position: fixed;
z-index: @zindex-notification;
max-width: ~'calc(100vw - 32px)';
margin-right: 24px;
margin-right: @notification-margin-edge;
&-topLeft,
&-bottomLeft {
margin-right: 0;
margin-left: 24px;
margin-left: @notification-margin-edge;
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
@ -35,6 +35,7 @@
&-notice {
position: relative;
width: @notification-width;
max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
margin-bottom: @notification-margin-bottom;
margin-left: auto;
overflow: hidden;