mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 11:07:52 +08:00
feat: toast主题组件 (#6380)
* feat: m * feat: spinner删除propriety中css变量 * feat: 修改spinner变量 * feat: 删除多余代码 * fix: spinner css变量修改 * fix: spinner * feat: toast接入主题 * feat: 去掉多余代码 --------- Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
This commit is contained in:
qiaoganggang
hongyang03
parent
ef32b32c09
commit
5c0758a388
@ -3280,8 +3280,6 @@
|
||||
--Spinner-width: var(--spinner-size-size);
|
||||
--Spinner-color: var(--spinner-base-color);
|
||||
|
||||
|
||||
|
||||
--Tag-base-fontSize: var(--fonts-size-8);
|
||||
--Tag-base-fontWeight: var(--fonts-weight-6);
|
||||
--Tag-base-height: var(--sizes-base-12);
|
||||
@ -3423,5 +3421,106 @@
|
||||
var(--Tag-model-rounded-bottom-border-color)
|
||||
var(--Tag-model-rounded-left-border-color);
|
||||
|
||||
--Toast-color: var(--colors-neutral-text-11);
|
||||
--Toast-paddingTop: var(--sizes-size-3);
|
||||
--Toast-paddingBottom: var(--sizes-size-3);
|
||||
--Toast-paddingLeft: var(--sizes-size-9);
|
||||
--Toast-paddingRight: var(--sizes-size-9);
|
||||
--Toast-top-right-border-radius: var(--borders-radius-3);
|
||||
--Toast-top-left-border-radius: var(--borders-radius-3);
|
||||
--Toast-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--Toast-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--Toast-icon-size: var(--sizes-size-9);
|
||||
|
||||
--Toast--danger-color: var(--colors-neutral-text-2);
|
||||
--Toast--danger-fontSize: var(--fonts-size-8);
|
||||
--Toast--danger-fontWeight: var(--fonts-weight-6);
|
||||
--Toast--danger-top-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--danger-top-border-width: var(--borders-width-2);
|
||||
--Toast--danger-top-border-style: var(--borders-style-2);
|
||||
--Toast--danger-right-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--danger-right-border-width: var(--borders-width-2);
|
||||
--Toast--danger-right-border-style: var(--borders-style-2);
|
||||
--Toast--danger-bottom-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--danger-bottom-border-width: var(--borders-width-2);
|
||||
--Toast--danger-bottom-border-style: var(--borders-style-2);
|
||||
--Toast--danger-left-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--danger-left-border-width: var(--borders-width-2);
|
||||
--Toast--danger-left-border-style: var(--borders-style-2);
|
||||
--Toast--danger-top-right-border-radius: var(--borders-radius-3);
|
||||
--Toast--danger-top-left-border-radius: var(--borders-radius-3);
|
||||
--Toast--danger-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--Toast--danger-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--Toast--danger-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--info-color: var(--colors-neutral-text-2);
|
||||
--Toast--info-fontSize: var(--fonts-size-6);
|
||||
--Toast--info-fontWeight: var(--fonts-weight-6);
|
||||
--Toast--info-top-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--info-top-border-width: var(--borders-width-2);
|
||||
--Toast--info-top-border-style: var(--borders-style-2);
|
||||
--Toast--info-right-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--info-right-border-width: var(--borders-width-2);
|
||||
--Toast--info-right-border-style: var(--borders-style-2);
|
||||
--Toast--info-bottom-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--info-bottom-border-width: var(--borders-width-2);
|
||||
--Toast--info-bottom-border-style: var(--borders-style-2);
|
||||
--Toast--info-left-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--info-left-border-width: var(--borders-width-2);
|
||||
--Toast--info-left-border-style: var(--borders-style-2);
|
||||
--Toast--info-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--success-color: var(--colors-neutral-text-2);
|
||||
--Toast--success-fontSize: var(--fonts-weight-6);
|
||||
--Toast--success-fontWeight: var(--fonts-weight-6);
|
||||
--Toast--success-fontSize: var(--fonts-size-8);
|
||||
--Toast--success-fontWeight: var(--fonts-weight-6);
|
||||
--Toast--success-top-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--success-top-border-width: var(--borders-width-2);
|
||||
--Toast--success-top-border-style: var(--borders-style-2);
|
||||
--Toast--success-right-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--success-right-border-width: var(--borders-width-2);
|
||||
--Toast--success-right-border-style: var(--borders-style-2);
|
||||
--Toast--success-bottom-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--success-bottom-border-width: var(--borders-width-2);
|
||||
--Toast--success-bottom-border-style: var(--borders-style-2);
|
||||
--Toast--success-left-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--success-left-border-width: var(--borders-width-2);
|
||||
--Toast--success-left-border-style: var(--borders-style-2);
|
||||
--Toast--success-top-right-border-radius: var(--borders-radius-3);
|
||||
--Toast--success-top-left-border-radius: var(--borders-radius-3);
|
||||
--Toast--success-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--Toast--success-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--Toast--success-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--warning-color: var(--colors-neutral-text-2);
|
||||
--Toast--warning-fontSize: var(--fonts-size-8);
|
||||
--Toast--warning-fontWeight: var(--fonts-weight-6);
|
||||
--Toast--warning-top-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--warning-top-border-width: var(--borders-width-2);
|
||||
--Toast--warning-top-border-style: var(--borders-style-2);
|
||||
--Toast--warning-right-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--warning-right-border-width: var(--borders-width-2);
|
||||
--Toast--warning-right-border-style: var(--borders-style-2);
|
||||
--Toast--warning-bottom-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--warning-bottom-border-width: var(--borders-width-2);
|
||||
--Toast--warning-bottom-border-style: var(--borders-style-2);
|
||||
--Toast--warning-left-border-color: var(--colors-neutral-line-11);
|
||||
--Toast--warning-left-border-width: var(--borders-width-2);
|
||||
--Toast--warning-left-border-style: var(--borders-style-2);
|
||||
--Toast--warning-top-right-border-radius: var(--borders-radius-3);
|
||||
--Toast--warning-top-left-border-radius: var(--borders-radius-3);
|
||||
--Toast--warning-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--Toast--warning-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--Toast--warning-bgColor: var(--colors-neutral-fill-11);
|
||||
|
||||
--Toast-border-width: var(--borders-width-2);
|
||||
--Toast-borderRadius: var(--borders-radius-3);
|
||||
--Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
0px 1px 10px 0px rgba(8, 14, 26, 0.05),
|
||||
0px 2px 4px -1px rgba(8, 14, 26, 0.04);
|
||||
--Toast-close-color: var(--colors-neutral-text-5);
|
||||
--Toast-close--onHover-color: var(--colors-brand-5);
|
||||
--Toast-icon-width: var(--Toast-icon-size);
|
||||
--Toast-icon-height: var(--Toast-icon-size);
|
||||
--Toast-opacity: 1;
|
||||
--Toast-title-display: inline;
|
||||
--Toast-width: #{px2rem(400px)};
|
||||
}
|
||||
@ -826,40 +826,6 @@ $remFactor: 16px;
|
||||
);
|
||||
--TagControl-sugTip-color: var(--colors-brand-5);
|
||||
|
||||
--Toast-color: var(--colors-neutral-text-11);
|
||||
--Toast--danger-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--danger-borderColor: var(--colors-neutral-line-11);
|
||||
--Toast--danger-color: var(--colors-neutral-text-2);
|
||||
--Toast--info-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--info-borderColor: var(--colors-neutral-line-11);
|
||||
--Toast--info-color: var(--colors-neutral-text-2);
|
||||
--Toast--success-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--success-borderColor: var(--colors-neutral-line-11);
|
||||
--Toast--success-color: var(--colors-neutral-text-2);
|
||||
--Toast--warning-bgColor: var(--colors-neutral-fill-11);
|
||||
--Toast--warning-borderColor: var(--colors-neutral-line-11);
|
||||
--Toast--warning-color: var(--colors-neutral-text-2);
|
||||
|
||||
--Toast-border-width: var(--borders-width-2);
|
||||
--Toast-borderRadius: var(--borders-radius-3);
|
||||
--Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
0px 1px 10px 0px rgba(8, 14, 26, 0.05),
|
||||
0px 2px 4px -1px rgba(8, 14, 26, 0.04);
|
||||
--Toast-close-color: var(--colors-neutral-text-5);
|
||||
--Toast-close--onHover-color: var(--colors-brand-5);
|
||||
|
||||
--Toast-icon-width: #{px2rem(16px)};
|
||||
--Toast-icon-height: var(--Toast-icon-width);
|
||||
|
||||
--Toast-opacity: 1;
|
||||
--Toast-paddingL: var(--sizes-base-13);
|
||||
--Toast-paddingX: var(--sizes-size-9);
|
||||
--Toast-paddingY: var(--gap-xs);
|
||||
--Toast-title-display: inline;
|
||||
--Toast-width: #{px2rem(400px)};
|
||||
|
||||
--Toast--info-paddingL: var(--sizes-size-0);
|
||||
|
||||
--Tooltip--attr-bg: rgba(0, 0, 0, 0.7);
|
||||
--Tooltip--attr-borderColor: var(--borderColor);
|
||||
--Tooltip--attr-borderRadius: var(--borderRadius);
|
||||
|
||||
@ -69,10 +69,13 @@
|
||||
pointer-events: auto;
|
||||
margin-bottom: var(--gap-xs);
|
||||
|
||||
padding: var(--Toast-paddingY) var(--Toast-paddingX);
|
||||
|
||||
padding: var(--Toast-paddingTop) var(--Toast-paddingRight)
|
||||
var(--Toast-paddingBottom) var(--Toast-paddingLeft);
|
||||
box-shadow: var(--Toast-box-shadow);
|
||||
border-radius: var(--Toast-borderRadius);
|
||||
border-radius: var(--Toast-top-left-border-radius)
|
||||
var(--Toast-top-right-border-radius)
|
||||
var(--Toast-bottom-right-border-radius)
|
||||
var(--Toast-bottom-left-border-radius);
|
||||
border: var(--Toast-border-width) solid;
|
||||
color: var(--Toast-color);
|
||||
position: relative;
|
||||
@ -133,7 +136,6 @@
|
||||
}
|
||||
|
||||
.#{$ns}Toast-body {
|
||||
font-size: var(--fontSizeSm);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: pre-wrap;
|
||||
@ -166,26 +168,80 @@
|
||||
// colors
|
||||
&--error {
|
||||
color: var(--Toast--danger-color);
|
||||
border-color: var(--Toast--danger-borderColor);
|
||||
background: var(--Toast--danger-bgColor);
|
||||
font-size: var(--Toast--danger-fontSize);
|
||||
font-weight: var(--Toast--danger-fontWeight);
|
||||
background: var(--Toast--danger-bgColor);
|
||||
border-width: var(--Toast--danger-top-border-width)
|
||||
var(--Toast--danger-right-border-width)
|
||||
var(--Toast--danger-bottom-border-width)
|
||||
var(--Toast--danger-left-border-width);
|
||||
border-style: var(--Toast--danger-top-border-style)
|
||||
var(--Toast--danger-right-border-style)
|
||||
var(--Toast--danger-bottom-border-style)
|
||||
var(--Toast--danger-left-border-style);
|
||||
border-color: var(--Toast--danger-top-border-color)
|
||||
var(--Toast--danger-right-border-color)
|
||||
var(--Toast--danger-bottom-border-color)
|
||||
var(--Toast--danger-left-border-color);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: var(--Toast--warning-color);
|
||||
border-color: var(--Toast--warning-borderColor);
|
||||
background: var(--Toast--warning-bgColor);
|
||||
font-size: var(--Toast--warning-fontSize);
|
||||
font-weight: var(--Toast--warning-fontWeight);
|
||||
background: var(--Toast--warning-bgColor);
|
||||
border-width: var(--Toast--warning-top-border-width)
|
||||
var(--Toast--warning-right-border-width)
|
||||
var(--Toast--warning-bottom-border-width)
|
||||
var(--Toast--warning-left-border-width);
|
||||
border-style: var(--Toast--warning-top-border-style)
|
||||
var(--Toast--warning-right-border-style)
|
||||
var(--Toast--warning-bottom-border-style)
|
||||
var(--Toast--warning-left-border-style);
|
||||
border-color: var(--Toast--warning-top-border-color)
|
||||
var(--Toast--warning-right-border-color)
|
||||
var(--Toast--warning-bottom-border-color)
|
||||
var(--Toast--warning-left-border-color);
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: var(--Toast--info-color);
|
||||
border-color: var(--Toast--info-borderColor);
|
||||
font-size: var(--Toast--info-fontSize);
|
||||
font-weight: var(--Toast--info-fontWeight);
|
||||
background: var(--Toast--info-bgColor);
|
||||
border-width: var(--Toast--info-top-border-width)
|
||||
var(--Toast--info-right-border-width)
|
||||
var(--Toast--info-bottom-border-width)
|
||||
var(--Toast--info-left-border-width);
|
||||
border-style: var(--Toast--info-top-border-style)
|
||||
var(--Toast--info-right-border-style)
|
||||
var(--Toast--info-bottom-border-style)
|
||||
var(--Toast--info-left-border-style);
|
||||
border-color: var(--Toast--info-top-border-color)
|
||||
var(--Toast--info-right-border-color)
|
||||
var(--Toast--info-bottom-border-color)
|
||||
var(--Toast--info-left-border-color);
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: var(--Toast--success-color);
|
||||
border-color: var(--Toast--success-borderColor);
|
||||
font-size: var(--Toast--success-fontSize);
|
||||
font-weight: var(--Toast--success-fontWeight);
|
||||
background: var(--Toast--success-bgColor);
|
||||
border-width: var(--Toast--success-top-border-width)
|
||||
var(--Toast--success-right-border-width)
|
||||
var(--Toast--success-bottom-border-width)
|
||||
var(--Toast--success-left-border-width);
|
||||
border-style: var(--Toast--success-top-border-style)
|
||||
var(--Toast--success-right-border-style)
|
||||
var(--Toast--success-bottom-border-style)
|
||||
var(--Toast--success-left-border-style);
|
||||
border-color: var(--Toast--success-top-border-color)
|
||||
var(--Toast--success-right-border-color)
|
||||
var(--Toast--success-bottom-border-color)
|
||||
var(--Toast--success-left-border-color);
|
||||
}
|
||||
|
||||
// positions
|
||||
|
||||
Loading…
Reference in New Issue
Block a user