amis2/scss/components/_toast.scss
qinhaoyan dd91d9660c
style:cxd主题对齐云舍4.0样式 (#4354)
* Select Options等组件样式对齐4.0

* 更新测试快照

* 修改部分测试用例

* feat:4.0样式修改

* 修改checkboxes hover问题

* Feat image 4.0 (#4242)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* fix: textarea组件对齐4.0标准 (#4149)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: inputTree组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: textarea组件对齐4.0标准

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* fix: inputTree 组价对齐4.0标准 (#4148)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: inputTree组件对齐4.0标准

* fix: inputtree组件图标颜色修改

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* feat: 部分组件样式问题修复 (#4154)

* feat: input-text 样式

* feat: input-range 样式

* feat: table  样式 1

* feat: search-box

* feat: curd icon

* feat: table 空状态

* feat: input-text 多选,最大宽度设置

* feat: search-box 搜索图标颜色

* feat: crud 编辑、过滤、搜索、排序 图标样式修改

* feat: 更新快照

* feat: 更新快照 2

* feat: curd fix

* feat: curd edit icon fix

* feat: input-password 不可见 icon 修改

* feat: input-password snapshot update

* docs:完善对话框size参数说明

* feat: Log 组件支持虚拟渲染及限制最大行数

* 修复不支持 loading 问题

* 换一下名字

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>
Co-authored-by: liweijian <liweijian@hkmtl.com>
Co-authored-by: wuduoyi <wuduoyi@baidu.com>
Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>

* fix:修复删除图标颜色问题 (#4245)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

* fix: 修复conditionbuilder组价图标颜色问题

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* form表单对齐云社4.0 (#4248)

* feat: form增加表单项 label文本对齐方式选项

* fix: remark 支持在表单内配置

* style: form 间距对齐云社4.0

Co-authored-by: sarding <hongfuquan@baidu.com>

* Fix chart radios name (#4251)

* fix:  Chart 单选框 修改为  ChartRadios 图表单选框

* fix: input-password 修改 可见 图标

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

* feat: checkboxes内边距&nestedSelect箭头修改 (#4254)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* Feature style 4.0 cxd (#4261)

* feat: 日期&折叠面板&提示样式对齐

* fix:测试用例修复

* feat: timeRange开始和结束分开&日期样式优化

* styles: 日历样式修复

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* 整体字体大小调整 (#4264)

* feat: form增加表单项 label文本对齐方式选项

* fix: remark 支持在表单内配置

* style: form 间距对齐云社4.0

* 修改表单的字体

Co-authored-by: sarding <hongfuquan@baidu.com>

* inputfile  和 drawer对齐云社4.0 (#4249)

* fix: drawer 和 inputfile 关闭图标对齐云社4.0

* fix:修改 drawer的图标大小 和边框圆角

* drawer  样式调整

Co-authored-by: sarding <hongfuquan@baidu.com>

* Fix style (#4265)

* fix: input-password icon 高度

* fix: input-password icon 换行问题

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

* fix: curd 图标垂直居中 (#4271)

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

* fix:修复nestedSelect无法动态调整位置及溢出问题 (#4292)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* style: 优化switch组件动效 (#4302)

* style:优化date组件最小宽度 (#4303)

* style:cxd主题移动端基础字号调整为16px (#4305)

* style:switch调整动效速度

* chore:更新快照

* chore:更新快照

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
Co-authored-by: qiaogg <43558337+qiaogg@users.noreply.github.com>
Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
Co-authored-by: sansiro <sansiro@sansiro.me>
Co-authored-by: liuzedong02 <liuzedong02@baidu.com>
Co-authored-by: liweijian <liweijian@hkmtl.com>
Co-authored-by: wuduoyi <wuduoyi@baidu.com>
Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>
Co-authored-by: sarding <37691952+sarding@users.noreply.github.com>
Co-authored-by: sarding <hongfuquan@baidu.com>
Co-authored-by: 徐佳豪 <53201551+blue-squirrel@users.noreply.github.com>
Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com>
Co-authored-by: hongyang03 <hongyang03@baidu.com>
2022-05-18 10:03:56 +08:00

273 lines
4.9 KiB
SCSS

@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceOut {
20% {
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
}
.#{$ns}Toast {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
&-wrap {
pointer-events: none;
position: fixed;
z-index: $zindex-toast;
}
max-width: var(--Toast-width);
pointer-events: auto;
margin-bottom: var(--gap-xs);
padding: var(--Toast-paddingY) var(--Toast-paddingX);
box-shadow: var(--Toast-box-shadow);
border-radius: var(--Toast-borderRadius);
border: var(--Toast-border-width) solid;
color: var(--Toast-color);
position: relative;
opacity: var(--Toast-opacity);
opacity: 0;
transform: translateZ(0);
width: px2rem(400px);
&.in,
&.out {
animation-fill-mode: both;
animation-duration: var(--animation-duration);
opacity: 1;
}
&.in {
animation-name: bounceIn;
}
&.out {
animation-name: bounceOut;
}
&-close {
display: inline-flex;
font-size: var(--fontSizeLg);
line-height: var(--gap-xl);
height: var(--gap-xl);
color: var(--Toast-close-color);
margin-left: var(--gap-sm);
opacity: 0.8;
align-items: center;
cursor: pointer;
&:hover {
color: var(--Toast-close--onHover-color);
opacity: 1;
}
& > svg {
top: 0;
}
}
&-content {
flex: 1;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: flex-start;
.#{$ns}Toast-title {
color: var(--text-color);
font-size: var(--fontSizeBase);
font-weight: 500;
line-height: var(--gap-xl);
margin-bottom: var(--gap-xs);
}
.#{$ns}Toast-body {
font-size: var(--fontSizeSm);
display: inline-block;
vertical-align: middle;
white-space: pre-wrap;
flex-grow: 1;
line-height: var(--gap-xl);
.#{$ns}Html {
word-break: break-word;
}
}
}
&-icon {
display: inline-flex;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
vertical-align: middle;
margin-right: var(--gap-sm);
height: var(--gap-xl);
line-height: var(--gap-xl);
align-items: center;
> svg {
top: 0;
width: var(--Toast-icon-width);
height: var(--Toast-icon-height);
color: inherit;
}
}
// colors
&--error {
color: var(--Toast--danger-color);
border-color: var(--Toast--danger-borderColor);
background: var(--Toast--danger-bgColor);
}
&--warning {
color: var(--Toast--warning-color);
border-color: var(--Toast--warning-borderColor);
background: var(--Toast--warning-bgColor);
}
&--info {
color: var(--Toast--info-color);
border-color: var(--Toast--info-borderColor);
background: var(--Toast--info-bgColor);
}
&--success {
color: var(--Toast--success-color);
border-color: var(--Toast--success-borderColor);
background: var(--Toast--success-bgColor);
}
// positions
&-wrap--topRight {
top: var(--gap-base);
right: var(--gap-base);
}
&-wrap--topCenter {
top: var(--gap-base);
left: 50%;
transform: translateX(-50%);
}
&-wrap--topLeft {
top: var(--gap-base);
left: var(--gap-base);
}
&-wrap--bottomLeft {
left: var(--gap-base);
bottom: var(--gap-base);
}
&-wrap--bottomCenter {
left: 50%;
transform: translateX(-50%);
bottom: var(--gap-base);
}
&-wrap--bottomRight {
bottom: var(--gap-base);
right: var(--gap-base);
}
&-wrap--center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.#{$ns}Toast-mobile {
.#{$ns}Toast {
background-color: rgba($color: #000000, $alpha: 0.9);
border-radius: px2rem(4px);
color: #fff;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--gap-base) var(--gap-md);
text-align: center;
width: auto;
&-title {
color: #fff;
width: 100%;
}
&-body {
line-height: px2rem(18px);
font-size: var(--fontSizeMd);
}
&-icon {
margin-right: 0 !important;
margin: var(--gap-base) 0;
width: px2rem(40px);
height: px2rem(40px);
> svg {
width: px2rem(40px);
height: px2rem(40px);
}
}
}
& &--has-icon {
min-width: px2rem(120px);
padding-bottom: var(--gap-lg);
}
}