291 lines
8.7 KiB
SCSS
291 lines
8.7 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-time-fontSize);
|
||
|
|
font-weight: var(--Timeline-time-fontWeight);
|
||
|
|
margin-bottom: var(--TimelineItem--content-time-margin-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}TimelineItem-title {
|
||
|
|
display: flex;
|
||
|
|
word-break: break-word;
|
||
|
|
color: var(--TimelineItem--text-primary-color);
|
||
|
|
font-size: var(--Timeline-title-fontSize);
|
||
|
|
font-weight: var(--Timeline-title-fontWeight);
|
||
|
|
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-detail-label-fontSize);
|
||
|
|
color: var(--TimelineItem--detail-button-color);
|
||
|
|
font-weight: var(--Timeline-detail-label-fontWeight);
|
||
|
|
margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
|
||
|
|
}
|
||
|
|
.#{$ns}TimelineItem-detail-arrow {
|
||
|
|
color: var(--Timeline-detail-icon-color);
|
||
|
|
width: var(--TimelineItem-detail-arrow-width);
|
||
|
|
height: var(--TimelineItem-detail-arrow-width);
|
||
|
|
transition: transform var(--animation-duration);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}TimelineItem-detail-arrow-top {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}TimelineItem-detail-visible {
|
||
|
|
display: block;
|
||
|
|
word-break: break-word;
|
||
|
|
border-radius: var(--Timeline-visible-border-radius);
|
||
|
|
font-size: var(--Timeline-detail-content-fontSize);
|
||
|
|
font-weight: var(--Timeline-detail-content-fontWeight);
|
||
|
|
color: var(--Timeline-detail-content-color);
|
||
|
|
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}TimelineItem-title {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.#{$ns}TimelineItem-content,
|
||
|
|
.#{$ns}TimelineItem-detail {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.#{$ns}Timeline-alternate {
|
||
|
|
.#{$ns}TimelineItem:nth-child(odd) {
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
max-width: 50%;
|
||
|
|
.#{$ns}TimelineItem-title {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.#{$ns}TimelineItem-content,
|
||
|
|
.#{$ns}TimelineItem-detail {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$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-time-fontSize);
|
||
|
|
font-weight: var(--Timeline-time-fontWeight);
|
||
|
|
margin-bottom: var(--TimelineItem--content-time-margin-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}TimelineItem-title {
|
||
|
|
color: var(--TimelineItem--text-primary-color);
|
||
|
|
font-size: var(--Timeline-title-fontSize);
|
||
|
|
font-weight: var(--Timeline-title-fontWeight);
|
||
|
|
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-detail-label-fontSize);
|
||
|
|
color: var(--TimelineItem--detail-button-color);
|
||
|
|
font-weight: var(--Timeline-detail-label-fontWeight);
|
||
|
|
margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}TimelineItem-detail-arrow {
|
||
|
|
color: var(--Timeline-detail-icon-color);
|
||
|
|
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;
|
||
|
|
word-break: break-word;
|
||
|
|
border-radius: var(--Timeline-visible-border-radius);
|
||
|
|
font-size: var(--Timeline-detail-content-fontSize);
|
||
|
|
font-weight: var(--Timeline-detail-content-fontWeight);
|
||
|
|
color: var(--Timeline-detail-content-color);
|
||
|
|
padding: var(--TimelineItem-detail-visible-padding);
|
||
|
|
box-shadow: var(--TimelineItem-detail-visible-shadow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}TimelineItem-detail-invisible {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|