mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
66483cbf67
* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * feat: badge,steps,timeline对齐4.0 * BCE-JC-20760 feat: 合并冲突 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
261 lines
7.4 KiB
SCSS
261 lines
7.4 KiB
SCSS
.#{$ns}Timeline-vertical {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.#{$ns}TimelineItem {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
|
|
&:last-of-type {
|
|
.#{$ns}TimelineItem-axle .#{$ns}TimelineItem-line {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-axle {
|
|
position: relative;
|
|
flex: var(--TimelineItem--axle-flex);
|
|
|
|
.#{$ns}TimelineItem-line {
|
|
position: absolute;
|
|
height: calc(100% - var(--TimelineItem--left-line-top));
|
|
width: var(--TimelineItem--left-line-width);
|
|
left: var(--TimelineItem--left-line-left);
|
|
top: var(--TimelineItem--left-line-top);
|
|
background-color: var(--TimelineItem--line-bg);
|
|
&-icon {
|
|
left: var(--TimelineItem--icon-left-line-left);
|
|
}
|
|
}
|
|
|
|
.#{$ns}TimelineItem-round {
|
|
position: absolute;
|
|
width: var(--TimelineItem--round-width);
|
|
height: var(--TimelineItem--round-height);
|
|
left: var(--TimelineItem--round-left);
|
|
top: var(--TimelineItem--round-top);
|
|
background: var(--TimelineItem-round-bg);
|
|
border-radius: var(--TimelineItem--round-radius);
|
|
|
|
&--danger {
|
|
background: var(--Timeline--danger-bg);
|
|
}
|
|
|
|
&--info {
|
|
background: var(--Timeline--info-bg);
|
|
}
|
|
|
|
&--success {
|
|
background: var(--Timeline--success-bg);
|
|
}
|
|
|
|
&--warning {
|
|
background: var(--Timeline--warning-bg);
|
|
}
|
|
}
|
|
|
|
.#{$ns}TimelineItem-icon {
|
|
position: absolute;
|
|
width: var(--TimelineItem--icon-width);
|
|
height: var(--TimelineItem--icon-height);
|
|
left: var(--TimelineItem--icon-left);
|
|
border-radius: var(--TimelineItem--icon-radius);
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
padding-bottom: var(--TimelineItem--content-padding-bottom);
|
|
margin-left: var(--TimelineItem--content-margin-left);
|
|
|
|
.#{$ns}TimelineItem-time {
|
|
color: var(--TimelineItem--text-secondary-color);
|
|
font-size: var(--Timeline--font-size);
|
|
margin-bottom: var(--TimelineItem--content-time-margin-bottom);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-title {
|
|
display: flex;
|
|
color: var(--TimelineItem--text-primary-color);
|
|
font-size: var(--Timeline--font-size);
|
|
margin-bottom: var(--TimelineItem--content-title-margin-bottom);
|
|
.#{$ns}PlainField {
|
|
padding-right: var(--TimelineItem-custem-time-padding-right);
|
|
}
|
|
.#{$ns}Button {
|
|
margin-left: var(--TimelineItem-custem-button-margin-left);
|
|
}
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail {
|
|
.#{$ns}TimelineItem-detail-button {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
font-size: var(--Timeline--font-size);
|
|
color: var(--TimelineItem--detail-button-color);
|
|
margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-arrow {
|
|
width: var(--TimelineItem-detail-arrow-width);
|
|
height: var(--TimelineItem-detail-arrow-width);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-arrow-top {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-visible {
|
|
display: block;
|
|
border-radius: var(--Timeline-visible-border-radius);
|
|
max-width: var(--TimelineItem-detail-visible-max-width);
|
|
font-size: var(--Timeline--font-size);
|
|
padding: var(--TimelineItem-detail-visible-padding);
|
|
box-shadow: var(--TimelineItem-detail-visible-shadow);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-invisible {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.#{$ns}Timeline-left {
|
|
.#{$ns}TimelineItem {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
&.#{$ns}Timeline-alternate {
|
|
.#{$ns}TimelineItem:nth-child(odd) {
|
|
flex-direction: row-reverse;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.#{$ns}TimelineItem:nth-child(even) {
|
|
margin-left: calc(50% - var(--Timeline-alternate-margin-left));
|
|
max-width: calc(50% + var(--Timeline-alternate-margin-left));
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Timeline-horizontal {
|
|
display: flex;
|
|
flex-flow: row;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.#{$ns}TimelineItem {
|
|
display: flex;
|
|
width: -webkit-fill-available;
|
|
flex-flow: column;
|
|
|
|
&:last-of-type {
|
|
.#{$ns}TimelineItem-axle .#{$ns}TimelineItem-line {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-axle {
|
|
position: relative;
|
|
flex: var(--TimelineItem--axle-flex);
|
|
|
|
.#{$ns}TimelineItem-line {
|
|
position: absolute;
|
|
height: var(--TimelineItem--left-line-width);
|
|
width: calc(100% - var(--TimelineItem--left-line-left));
|
|
left: var(--TimelineItem--horizontal-left-line-top);
|
|
top: var(--TimelineItem--left-line-left);
|
|
background-color: var(--TimelineItem--line-bg);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-round {
|
|
position: absolute;
|
|
width: var(--TimelineItem--round-width);
|
|
height: var(--TimelineItem--round-height);
|
|
left: var(--TimelineItem--round-top);
|
|
top: var(--TimelineItem--round-left);
|
|
background: var(--TimelineItem-round-bg);
|
|
border-radius: var(--TimelineItem--round-radius);
|
|
|
|
&--danger {
|
|
background: var(--Timeline--danger-bg);
|
|
}
|
|
|
|
&--info {
|
|
background: var(--Timeline--info-bg);
|
|
}
|
|
|
|
&--success {
|
|
background: var(--Timeline--success-bg);
|
|
}
|
|
|
|
&--warning {
|
|
background: var(--Timeline--warning-bg);
|
|
}
|
|
}
|
|
|
|
.#{$ns}TimelineItem-icon {
|
|
position: absolute;
|
|
width: var(--TimelineItem--icon-width);
|
|
height: var(--TimelineItem--icon-height);
|
|
left: var(--TimelineItem--icon-left);
|
|
border-radius: var(--TimelineItem--icon-radius);
|
|
}
|
|
}
|
|
&-content {
|
|
margin-top: var(--Timeline-horizontal-content-margin-top);
|
|
padding-bottom: var(--TimelineItem--content-padding-bottom);
|
|
margin-left: var(--TimelineItem--content-margin-left);
|
|
|
|
.#{$ns}TimelineItem-time {
|
|
color: var(--TimelineItem--text-secondary-color);
|
|
font-size: var(--Timeline--font-size);
|
|
margin-bottom: var(--TimelineItem--content-time-margin-bottom);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-title {
|
|
color: var(--TimelineItem--text-primary-color);
|
|
font-size: var(--Timeline--font-size);
|
|
margin-bottom: var(--TimelineItem--content-title-margin-bottom);
|
|
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail {
|
|
.#{$ns}TimelineItem-detail-button {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
font-size: var(--Timeline--font-size);
|
|
color: var(--TimelineItem--detail-button-color);
|
|
margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-arrow {
|
|
width: var(--TimelineItem-detail-arrow-width);
|
|
height: var(--TimelineItem-detail-arrow-width);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-arrow-top {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-visible {
|
|
display: block;
|
|
border-radius: var(--Timeline-visible-border-radius);
|
|
max-width: var(--TimelineItem-detail-visible-max-width);
|
|
font-size: var(--Timeline--font-size);
|
|
padding: var(--TimelineItem-detail-visible-padding);
|
|
box-shadow: var(--TimelineItem-detail-visible-shadow);
|
|
}
|
|
|
|
.#{$ns}TimelineItem-detail-invisible {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|