| | |
| | | } |
| | | .mk-timeline-item-head { |
| | | position: relative; |
| | | height: 20px; |
| | | height: 24px; |
| | | text-align: center; |
| | | .mk-dot { |
| | | position: absolute; |
| | | background: #e8e8e8; |
| | | padding: 5px; |
| | | display: inline-block; |
| | | border-radius: 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border-radius: 100%; |
| | | z-index: 1; |
| | | top: 50%; |
| | | left: 50%; |
| | |
| | | .anticon { |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | width: 16px; |
| | | height: 16px; |
| | | vertical-align: top; |
| | | } |
| | | } |
| | | .mk-dot:not(.mk-dot-icon) { |
| | | padding: 5px; |
| | | } |
| | | .mk-dot-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | padding: 4px; |
| | | } |
| | | } |
| | | .mk-timeline-item-tail { |
| | | position: absolute; |
| | | top: 10px; |
| | | top: 50%; |
| | | left: 0px; |
| | | width: 100%; |
| | | transform: translate(50%, -1px); |
| | | border-top: 2px solid #e8e8e8; |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.icon { |
| | | .mk-timeline-item-head { |
| | | .mk-dot { |
| | | background: #f8f8f8!important; |
| | | } |
| | | .mk-dot-icon { |
| | | color: inherit; |
| | | .anticon { |
| | | color: inherit; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.size16 { |
| | | .mk-timeline-item-head { |
| | | height: 28px; |
| | | .mk-dot { |
| | | .anticon { |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | .mk-dot-icon { |
| | | width: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.size18 { |
| | | .mk-timeline-item-head { |
| | | height: 32px; |
| | | .mk-dot { |
| | | .anticon { |
| | | font-size: 18px; |
| | | } |
| | | } |
| | | .mk-dot-icon { |
| | | width: 32px; |
| | | height: 32px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.size20 { |
| | | .mk-timeline-item-head { |
| | | height: 36px; |
| | | .mk-dot { |
| | | .anticon { |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | .mk-dot-icon { |
| | | width: 36px; |
| | | height: 36px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.size22 { |
| | | .mk-timeline-item-head { |
| | | height: 40px; |
| | | .mk-dot { |
| | | .anticon { |
| | | font-size: 22px; |
| | | } |
| | | } |
| | | .mk-dot-icon { |
| | | width: 40px; |
| | | height: 40px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.size24 { |
| | | .mk-timeline-item-head { |
| | | height: 44px; |
| | | .mk-dot { |
| | | .anticon { |
| | | font-size: 24px; |
| | | } |
| | | } |
| | | .mk-dot-icon { |
| | | width: 44px; |
| | | height: 44px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mk-time-line-wrap.system { |
| | | .mk-timeline-item-tail { |
| | | border-color: var(--mk-sys-color2); |
| | | } |
| | | } |
| | | .ant-timeline.system { |
| | | .ant-timeline-item-tail { |
| | | border-color: var(--mk-sys-color2); |
| | | } |
| | | } |
| | | } |
| | | |
| | | .normal-timeline-box::after { |