Untitled
unknown
plain_text
a year ago
2.8 kB
7
Indexable
.tchc-van-ban-den { .progress-section { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 120px; .progress-item { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 140px; height: 100%; &::before, &::after { content: ''; position: absolute; top: 0; width: 50%; height: 1.5px; border-top: 1.5px dashed #e9e9e9; } &::before { left: 0; } &::after { right: 0; } &:first-child::before { border: none!important; } &:last-child::after { border: none!important; } .progress-dot { display: flex; width: 10px; height: 10px; margin-top: -5px; background-color: white; border: 2px solid #e9e9e9; border-radius: 50%; z-index: 10; } .progress-arm { width: 2px; height: 10px; background-color: #e9e9e9; } .progress-square { display: flex; width: 25px; height: 25px; color: white; background-color: #e9e9e9; border-radius: 3px; align-items: center; justify-content: center; } .progress-title { margin-top: 4px; font-size: 12px; font-weight: 700; padding: 0 5px; } .progress-time { font-size: 11px; } &.success { &::before, &::after { border-top: 1.5px solid #e9e9e9; } .progress-arm, .progress-square { background-color: #28a745; } .progress-dot { border: 2px solid #28a745; } } &.progressing { &::before { border-top: 1.5px solid #e9e9e9; } .progress-arm, .progress-square { background-color: #1488db; } .progress-dot { border: 2px solid #1488db; } } } } }
Editor is loading...
Leave a Comment