mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +08:00
dd91d9660c
* 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>
273 lines
4.9 KiB
SCSS
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);
|
|
}
|
|
}
|