mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 10:59:42 +08:00
4dfb286507
* feat: 组件折叠面板collapse * feat: 组件折叠面板collapse * fix: collapse组件部分抽象到component * feat:增加collapse-group组件 * fix: 修复collapse样式 * feat: collapse组件扩充 * fix: 使用header兼容title * fix: collapse参数调整 * fix: 修改collapse的参数 * fix: collapse参数修改 * fix: update tests * fix: schema中去掉function Co-authored-by: hongyang03 <hongyang03@baidu.com>
120 lines
2.6 KiB
SCSS
120 lines
2.6 KiB
SCSS
.#{$ns}Collapse {
|
|
border: var(--Collapse-border);
|
|
padding: 0;
|
|
line-height: px2rem(20px);
|
|
|
|
&-header {
|
|
font-size: var(--Collapse-header-fontSize);
|
|
font-weight: var(--Collapse-header-fontWeight);
|
|
color: var(--text--loud-color);
|
|
padding: var(--Collapse-header-padding);
|
|
margin: 0;
|
|
border-bottom: var(--borderWidth) solid var(--Collapse-border-color);
|
|
cursor: pointer;
|
|
background: var(--Collapse-header-bg);
|
|
|
|
&-wrapper {
|
|
display: inline-flex;
|
|
flex-direction: var(--Collapse-header-wrapper-direction);
|
|
}
|
|
|
|
&-tpl {
|
|
margin-right: px2rem(8px);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--Collapse-header-onHover-bg);
|
|
}
|
|
}
|
|
|
|
&-arrow {
|
|
display: inline-block;
|
|
width: px2rem(16px);
|
|
text-align: center;
|
|
margin-right: var(--gap-xs);
|
|
|
|
&:before {
|
|
content: '';
|
|
position: relative;
|
|
display: inline-block;
|
|
width: px2rem(6px);
|
|
height: px2rem(6px);
|
|
top: px2rem(-2px);
|
|
border-color: var(--text-color);
|
|
border-style: solid;
|
|
border-width: px2rem(1px) px2rem(1px) 0 0;
|
|
transform: rotate(45deg);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
}
|
|
|
|
&-icon-tranform {
|
|
display: inline-block;
|
|
width: px2rem(16px);
|
|
text-align: center;
|
|
margin-right: var(--gap-xs);
|
|
}
|
|
|
|
.#{$ns}TplField {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.is-active &-arrow:before {
|
|
transform: rotate(135deg);
|
|
transform-origin: 50% 30%;
|
|
}
|
|
&.is-active &-icon-tranform {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&--disabled &-header {
|
|
cursor: not-allowed;
|
|
user-select: none;
|
|
color: var(--text--muted-color);
|
|
&:hover {
|
|
background-color: var(--Collapse-header-bg-disabled-color);
|
|
}
|
|
}
|
|
|
|
&--disabled &-arrow:before {
|
|
border-color: var(--text--muted-color);
|
|
}
|
|
|
|
// title 显示在底部的模式
|
|
&--title-bottom &-header {
|
|
text-align: center;
|
|
font-size: var(--fontSizeBase);
|
|
border-top: var(--Collapse-header-collapsed-borderTop);
|
|
border-bottom: var(--Collapse-header-collapsed-borderBottom);
|
|
}
|
|
|
|
&--title-bottom.is-collapsed &-header {
|
|
border-top: none;
|
|
}
|
|
|
|
&--title-bottom &-arrow:before {
|
|
top: px2rem(-4px);
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
&--title-bottom.is-active &-arrow:before {
|
|
top: 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
&-contentWrapper {
|
|
transition: height var(--animation-duration) ease;
|
|
&.in,
|
|
&.out {
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
&-content {
|
|
padding: var(--Collapse-content-padding);
|
|
color: var(--body-color);
|
|
font-size: var(--Collapse-content-fontSize);
|
|
font-weight: var(--Collapse-content-fontWeight);
|
|
}
|
|
}
|