|
|
|
|
|
|
|
|
|
|
|
.timeline {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-vertical {
|
|
|
|
|
|
padding-top: 24px;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 2px;
|
|
|
|
|
|
background: var(--palette-divider);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
padding-bottom: 24px;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
max-width: calc(50% - 48px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
min-width: 96px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
|
max-width: calc(50% - 48px);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-horizontal {
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
height: 2px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background: var(--palette-divider);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
padding-left: 24px;
|
|
|
|
|
|
padding-right: 24px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
max-height: calc(50% - 48px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
min-height: 96px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
align-self: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-vertical {
|
|
|
|
|
|
&.timeline-align-start {
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
align-self: flex-start;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-align-end {
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
align-self: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-alternate {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
right: calc(50% - 1px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd):not(.timeline-item-start), &.timeline-item-end {
|
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
text-align: end;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n):not(.timeline-item-end) {
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
text-align: start;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-reverse {
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd):not(.timeline-item-end), &.timeline-item-start {
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
text-align: start;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n):not(.timeline-item-start) {
|
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
text-align: end;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-start {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
left: 47px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-rtl {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
right: 47px;
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-end {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
right: 47px;
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-rtl {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
left: 47px;
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/* Both Start & End */
|
|
|
|
|
|
&.timeline-position {
|
|
|
|
|
|
&-start, &-end {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
max-width: calc(100% - 96px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-horizontal {
|
|
|
|
|
|
&.timeline-align-start {
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
align-self: flex-start;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-align-end {
|
|
|
|
|
|
.timeline-item-divider {
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
align-self: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-alternate {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
top: auto;
|
|
|
|
|
|
bottom: calc(50% - 1px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd), &.timeline-item-end {
|
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
/* I dont know */
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n), &.timeline-item-start {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
/* I dont know */
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-reverse {
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd), &.timeline-item-end {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
/* I dont know */
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n), &.timeline-item-start {
|
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
/* I dont know */
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-top {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
top: 47px;
|
|
|
|
|
|
bottom: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-bottom {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
top: auto;
|
|
|
|
|
|
bottom: 47px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/* Both Top & Bottom */
|
|
|
|
|
|
&.timeline-position {
|
|
|
|
|
|
&-top, &-bottom {
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
max-height: calc(100% - 96px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-opposite {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*Dot*/
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-dot {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background: var(--palette-surface);
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
left: calc(50% - 19px);
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-dot-size-small {
|
|
|
|
|
|
width: 24px;
|
|
|
|
|
|
height: 24px;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-dot-inner {
|
|
|
|
|
|
height: 18px;
|
|
|
|
|
|
width: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-dot-size-medium {
|
|
|
|
|
|
width: 38px;
|
|
|
|
|
|
height: 38px;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-dot-inner {
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-dot-size-large {
|
|
|
|
|
|
width: 52px;
|
|
|
|
|
|
height: 52px;
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-dot-inner {
|
|
|
|
|
|
height: 42px;
|
|
|
|
|
|
width: 42px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-dot-inner {
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-dot-fill {
|
|
|
|
|
|
height: inherit;
|
|
|
|
|
|
width: inherit;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-dot-default {
|
|
|
|
|
|
background-color: var(--palette-grey-light);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@each $color in $palette-colors {
|
|
|
|
|
|
&.timeline-dot-#{$color} {
|
|
|
|
|
|
color: var(--palette-#{$color}-text);
|
|
|
|
|
|
background-color: var(--palette-#{$color});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*Modifiers*/
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-modifiers {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-vertical {
|
|
|
|
|
|
&.timeline-position-start:not(.timeline-rtl), &.timeline-position-end.timeline-rtl {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(0);
|
|
|
|
|
|
left: -16px;
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
left: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-end:not(.timeline-rtl), &.timeline-position-start.timeline-rtl {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
right: -16px;
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
right: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-alternate {
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd):not(.timeline-item-start), &.timeline-item-end {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(0);
|
|
|
|
|
|
left: -16px;
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
left: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n):not(.timeline-item-end) {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
right: -16px;
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
right: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-reverse:not(.timeline-rtl), &.timeline-position-alternate.timeline-rtl:not(.timeline-reverse) {
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd):not(.timeline-item-end), &.timeline-item-start {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
right: -16px;
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
right: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n):not(.timeline-item-start) {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(0);
|
|
|
|
|
|
left: -16px;
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
left: -15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-horizontal {
|
|
|
|
|
|
&.timeline-position-top {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
|
top: -24px;
|
|
|
|
|
|
bottom: auto;
|
|
|
|
|
|
left: calc(50% - 8px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
top: -23px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-bottom {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(270deg);
|
|
|
|
|
|
bottom: -24px;
|
|
|
|
|
|
top: auto;
|
|
|
|
|
|
left: calc(50% - 8px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
bottom: -23px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-position-alternate {
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd):not(.timeline-item-start), &.timeline-item-end {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
|
top: -24px;
|
|
|
|
|
|
bottom: auto;
|
|
|
|
|
|
left: calc(50% - 8px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
top: -23px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n):not(.timeline-item-end) {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(270deg);
|
|
|
|
|
|
bottom: -24px;
|
|
|
|
|
|
top: auto;
|
|
|
|
|
|
left: calc(50% - 8px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
bottom: -23px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.timeline-reverse {
|
|
|
|
|
|
.timeline-item {
|
|
|
|
|
|
&:nth-child(odd):not(.timeline-item-start), &.timeline-item-end {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(270deg);
|
|
|
|
|
|
bottom: -24px;
|
|
|
|
|
|
top: auto;
|
|
|
|
|
|
left: calc(50% - 8px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
bottom: -23px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(2n):not(.timeline-item-end) {
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
|
top: -24px;
|
|
|
|
|
|
bottom: auto;
|
|
|
|
|
|
left: calc(50% - 8px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
top: -23px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.timeline-item-content {
|
|
|
|
|
|
.card {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
border-top: 16px solid transparent;
|
|
|
|
|
|
border-bottom: 16px solid transparent;
|
|
|
|
|
|
border-right: 16px solid rgba(0,0,0,.10);
|
|
|
|
|
|
top: calc(50% - 14px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
border-top: 16px solid transparent;
|
|
|
|
|
|
border-bottom: 16px solid transparent;
|
|
|
|
|
|
border-right: 16px solid var(--palette-surface);
|
|
|
|
|
|
top: calc(50% - 16px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.paper-outlined {
|
|
|
|
|
|
&::before {
|
|
|
|
|
|
top: calc(50% - 16px);
|
|
|
|
|
|
border-right-color: var(--palette-lines-default);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
