chore: toast 默认放中间 (#2608)

This commit is contained in:
吴多益 2021-09-24 11:22:46 +08:00 committed by GitHub
parent d32ae887c2
commit 2177b3cb34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 28 deletions

View File

@ -1240,8 +1240,9 @@
--Toast-close-color: var(--white);
--Toast-color: var(--white);
--Toast-icon-width: #{px2rem(16px)};
--Toast-icon-height: var(--Toast-icon-width);
--Toast-icon-width: #{px2rem(30px)};
--Toast-opacity: 0.8;
--Toast-paddingL: #{px2rem(40px)};
--Toast-paddingX: var(--gap-sm);

View File

@ -412,6 +412,5 @@ $zindex-top: 3000 !default;
$Form--horizontal-columns: 12;
$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
$Toast-icon-fillHeight: true !default;
$Number-handler-mode: 'vertical';
$Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;

View File

@ -63,18 +63,11 @@
z-index: $zindex-toast;
}
width: var(--Toast-width);
max-width: var(--Toast-width);
pointer-events: auto;
margin-bottom: var(--gap-xs);
@if $Toast-icon-fillHeight {
padding: var(--Toast-paddingY)
var(--Toast-paddingX)
var(--Toast-paddingY)
calc(var(--Toast-paddingX) + var(--Toast-paddingL));
} @else {
padding: var(--Toast-paddingY) var(--Toast-paddingX);
}
box-shadow: var(--Toast-box-shadow);
border-radius: var(--Toast-borderRadius);
@ -103,7 +96,8 @@
&-close {
color: var(--Toast-close-color);
line-height: 1;
display: inline-flex;
margin-left: var(--gap-xs);
opacity: 0.8;
&:hover {
@ -125,17 +119,7 @@
-webkit-font-smoothing: antialiased;
vertical-align: middle;
@if $Toast-icon-fillHeight {
position: absolute;
left: var(--Toast-paddingX);
top: var(--Toast-paddingY);
width: calc(var(--Toast-paddingL) - var(--Toast-paddingX));
height: calc(var(--Toast-paddingL) - var(--Toast-paddingX));
align-items: center;
justify-content: center;
} @else {
margin-right: var(--gap-xs);
}
> svg {
top: 0;

View File

@ -19,7 +19,6 @@ $danger-bg: #fff5f5;
$text-color: #666;
$Toast-icon-fillHeight: false;
$Number-handler-mode: 'horizontal';
// css 变量似乎没法用 !important所以这里用 sass 变量
$Wizard-steps-liAfterBorder: none !important;
@ -408,8 +407,6 @@ $Wizard-steps-liAfterBorder: none !important;
--Toast-paddingL: #{px2rem(26px)};
--Toast--info-paddingL: 0;
--Toast-border-width: #{px2rem(1px)};
--Toast-icon-width: #{px2rem(16px)};
--Toast-icon-height: #{px2rem(16px)};
--Toast-opacity: 1;
--Toast-title-display: inline;

View File

@ -80,7 +80,7 @@ export class ToastComponent extends React.Component<
ToastComponentProps,
'position' | 'closeButton' | 'timeout'
> = {
position: 'top-right',
position: 'top-center',
closeButton: false,
timeout: 5000
};
@ -228,7 +228,7 @@ export class ToastMessage extends React.Component<
static defaultProps = {
timeout: 5000,
classPrefix: '',
position: 'top-right',
position: 'top-center',
allowHtml: true,
level: 'info'
};