UNPKG

zent

Version:

一套前端设计语言和基于React的实现

221 lines (220 loc) 5.5 kB
.zent-steps { width: 100%; line-height: 1.5; font-size: 0; } .zent-steps-tail { position: absolute; width: 100%; left: 0; top: 10px; padding: 0 10px; box-sizing: border-box; } .zent-steps-tail i { display: inline-block; position: relative; width: 100%; border-radius: 1px; height: 1px; vertical-align: top; background: #999 } .zent-steps-tail i::after { content: ''; position: absolute; top: 0; width: 0; background: #999; height: 100%; opacity: 0; } .zent-steps-step { position: relative; } .zent-steps-step .zent-step-head { position: relative; display: inline-block; vertical-align: top; background: #fff; } .zent-steps-step .zent-step-main { position: relative; vertical-align: top; max-width: 120px; color: #999; } .zent-steps-step .zent-step-main .zent-step-title { font-size: 14px; max-width: 120px; line-height: 14px; margin-top: 10px; } .zent-steps-step .zent-step-main .zent-step-description { max-width: 120px; font-size: 12px; line-height: 16px; margin-top: 5px; } .zent-step-head-inner { margin-right: 10px; font-size: 20px; color: #999; line-height: 20px; } .zent-step-head-inner .zent-icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; text-align: center; background: #999; color: #fff; font-size: 12px; } .zent-step-head-inner .zenticon { vertical-align: middle; } .zent-steps-item { position: relative; display: inline-block; vertical-align: top } .zent-steps-item:not(:first-child) .zent-step-head { margin-left: -10px; padding-left: 10px; } .zent-steps-item.zent-steps-status-finish .zent-step-head-inner { color: #38f; } .zent-steps-item.zent-steps-status-finish .zent-step-head-inner .zent-icon { background: #38f; } .zent-steps-item.zent-steps-status-finish .zent-step-main .zent-step-title { color: #333; } .zent-steps-item.zent-steps-status-finish .zent-steps-tail i {} .zent-steps-item.zent-steps-status-finish .zent-steps-tail i::after { width: 100%; background: #38f; -webkit-transition: all .4s ease; transition: all .4s ease; opacity: 1; } .zent-steps-item.zent-steps-status-finish.is-current .zent-steps-tail i {} .zent-steps-item.zent-steps-status-finish.is-current .zent-steps-tail i::after { width: 50%; } .zent-steps-item.zent-steps-status-finish.is-last-finish .zent-steps-tail i {} .zent-steps-item.zent-steps-status-finish.is-last-finish .zent-steps-tail i::after { width: 100%; } .zent-steps-item.zent-steps-status-error .zent-step-head-inner { color: #f44; } .zent-steps-item.zent-steps-status-error .zent-step-main .zent-step-title { color: #f44; } .zent-steps-item:last-child .zent-step-head-inner { margin-right: 0; } .zent-steps-item:last-child .zent-step-main { position: absolute; width: 120px; right: 0; text-align: right; } .zent-steps-card .zent-steps-item { box-sizing: border-box; padding: 0 1px; } .zent-steps-card .zent-steps-item .zent-steps-step { height: 50px; line-height: 50px; font-size: 16px; background: #f8f8f8; color: #666; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; } .zent-steps-card .zent-steps-item:first-child { padding-left: 0; } .zent-steps-card .zent-steps-item:last-child { padding-right: 0; } .zent-steps-card .zent-steps-item.is-current .zent-steps-step { background: #38f; color: #fff; } .zent-steps-breadcrumb { overflow: hidden; } .zent-steps-breadcrumb .zent-steps-item { padding: 0 8px; box-sizing: border-box; } .zent-steps-breadcrumb .zent-steps-item .zent-steps-step { height: 44px; line-height: 44px; font-size: 14px; background: #f8f8f8; color: #666; text-align: center } .zent-steps-breadcrumb .zent-steps-item .zent-steps-step::after { content: ' '; display: block; width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 12px solid #f8f8f8; position: absolute; top: 50%; margin-top: -22px; right: -12px; } .zent-steps-breadcrumb .zent-steps-item .zent-steps-step::before { content: ' '; display: block; width: 0; height: 0; border-top: 22px solid #f8f8f8; border-bottom: 22px solid #f8f8f8; border-left: 12px solid transparent; position: absolute; top: 50%; margin-top: -22px; left: -12px; } .zent-steps-breadcrumb .zent-steps-item:first-child { padding-left: 0; } .zent-steps-breadcrumb .zent-steps-item:first-child .zent-steps-step {} .zent-steps-breadcrumb .zent-steps-item:first-child .zent-steps-step::before { display: none; } .zent-steps-breadcrumb .zent-steps-item:last-child { padding-right: 0; } .zent-steps-breadcrumb .zent-steps-item:last-child .zent-steps-step {} .zent-steps-breadcrumb .zent-steps-item:last-child .zent-steps-step::after { display: none; } .zent-steps-breadcrumb .zent-steps-item.is-finish .zent-steps-step { background: #38f; color: #fff; } .zent-steps-breadcrumb .zent-steps-item.is-finish .zent-steps-step::after { border-left-color: #38f; } .zent-steps-breadcrumb .zent-steps-item.is-finish .zent-steps-step::before { border-top-color: #38f; border-bottom-color: #38f; }