tinper-bee/dist/Step/index.css

React Components living for enterprise-class pc backend application

.u-steps{font-family:Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:#212121;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.u-steps .u-steps-item{position:relative;display:inline-block;vertical-align:top;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.u-steps .u-steps-item:last-child{-webkit-box-flex:0;-ms-flex:none;flex:none}.u-steps .u-steps-item:last-child .u-steps-item-tail,.u-steps .u-steps-item:last-child .u-steps-item-title:after{display:none}.u-steps .uf{font-size:22px}.u-steps .uicon{display:inline-block;font-family:uf}.u-steps-item-content,.u-steps-item-icon{display:block}.u-steps-item-icon{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(0,0,0,.25);width:32px;height:32px;line-height:32px;text-align:center;border-radius:32px;font-size:16px;margin-right:8px;-webkit-transition:background-color .3s,border-color .3s;transition:background-color .3s,border-color .3s;font-family:Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif}.u-steps-horizontal .u-steps-item:not(:last-child) .u-steps-item-icon:after{content:"";height:1px;width:9999px;background:#e8e8e8;display:block;position:absolute;top:16px;left:40px}.u-steps-horizontal .u-steps-item:not(:last-child).u-steps-item-finish>.u-steps-item-icon:after{background-color:#a5adba}.u-steps-horizontal .u-steps-item:not(:last-child).u-steps-item-process>.u-steps-item-icon:after,.u-steps-horizontal .u-steps-item:not(:last-child).u-steps-item-wait>.u-steps-item-icon:after{background-color:#dfe1e6}.u-steps-small.u-steps-horizontal .u-steps-item:not(:last-child) .u-steps-item-icon:after{top:12px;left:32px}.u-steps .u-steps-item-title:after{display:none}.u-steps-item-icon>.u-steps-icon{line-height:1;top:-1px;color:#f53c32;position:relative}.u-steps-item-tail{position:absolute;left:0;width:100%;top:12px;padding:0 10px}.u-steps-item-tail:after{content:"";display:inline-block;background:#dfe1e6;height:1px;border-radius:1px;width:100%;-webkit-transition:background .3s;transition:background .3s}.u-steps-item-title{font-size:14px;color:#212121;display:inline-block;padding-right:16px;position:relative;line-height:32px}.u-steps-item-description{font-size:14px;color:#909090}.u-steps-item-wait .u-steps-item-icon{border-color:#dfe1e6;background-color:#dfe1e6}.u-steps-item-wait .u-steps-item-icon>.u-steps-icon{color:#fff}.u-steps-item-wait .u-steps-item-icon>.u-steps-icon>.uf{color:#dfe1e6}.u-steps-item-wait .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot{background:rgba(0,0,0,.25)}.u-steps-item-wait>.u-steps-item-content>.u-steps-item-description,.u-steps-item-wait>.u-steps-item-content>.u-steps-item-title{color:#909090}.u-steps-item-wait>.u-steps-item-tail:after{background-color:#dfe1e6}.u-steps-item-process .u-steps-item-icon{border-color:#505f79;background-color:#fff}.u-steps-item-process .u-steps-item-icon>.u-steps-icon{color:#f53c32}.u-steps-item-process .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot{background:#f53c32}.u-steps-item-process>.u-steps-item-content>.u-steps-item-title{color:#212121}.u-steps-item-process>.u-steps-item-content>.u-steps-item-description{color:#909090}.u-steps-item-process>.u-steps-item-tail:after{background-color:#dfe1e6}.u-steps-item-process .u-steps-item-icon{background:#505f79}.u-steps-item-process .u-steps-item-icon>.u-steps-icon{color:#fff}.u-steps-item-process .u-steps-item-title{font-weight:500}.u-steps-item-finish .u-steps-item-icon{border:none;background-color:transparent}.u-steps-item-finish .u-steps-item-icon .u-steps-icon{color:#4caf50;font-size:32px;line-height:32px}.u-steps-item-finish .u-steps-item-icon .uicon:before{content:"\E677"}.u-steps-item-finish .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot{background:#f53c32}.u-steps-item-finish>.u-steps-item-content>.u-steps-item-title{color:#212121}.u-steps-item-finish>.u-steps-item-content>.u-steps-item-description{color:#909090}.u-steps-item-finish>.u-steps-item-tail:after{background-color:#a5adba}.u-steps-item-error .u-steps-item-icon{border-color:#f5222d;background-color:#f5222d;font-size:32px}.u-steps-item-error .u-steps-item-icon .u-steps-icon{color:#fff}.u-steps-item-error .u-steps-item-icon .uicon:before{content:"\E674"}.u-steps-item-error .u-steps-item-icon>.u-steps-icon .u-steps-icon-dot{background:#f5222d}.u-steps-item-error>.u-steps-item-content>.u-steps-item-title{color:#f5222d}.u-steps-item-error>.u-steps-item-icon:after{background-color:#dfe1e6}.u-steps-item-error>.u-steps-item-content>.u-steps-item-description{color:#f5222d}.u-steps-item-error>.u-steps-item-tail:after{background-color:#dfe1e6}.u-steps-item.u-steps-next-error .u-steps-item-title:after{display:none}.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item{margin-right:8px;white-space:nowrap}.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child{margin-right:0}.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child .u-steps-item-title{padding-right:0}.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-tail{display:none}.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item-description{max-width:140px;white-space:normal}.u-steps-item-custom .u-steps-item-icon{background:none;border:0;width:32px;height:32px}.u-steps-item-custom .u-steps-item-icon>.u-steps-icon{font-size:24px;line-height:32px;top:0;left:.5px;width:32px;height:32px}.u-steps-item-custom.u-steps-item-process .u-steps-item-icon>.u-steps-icon{color:#505f79}.u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item{margin-right:8px}.u-steps-small.u-steps-horizontal:not(.u-steps-label-vertical) .u-steps-item:last-child{margin-right:0}.u-steps-small .u-steps-item-finish .u-steps-item-icon .u-steps-icon{font-size:22px}.u-steps-small .u-steps-item-icon{width:24px;height:24px;line-height:24px;text-align:center;border-radius:24px;font-size:12px}.u-steps-small .u-steps-item-title{font-size:14px;line-height:24px;padding-right:12px}.u-steps-small .u-steps-item-title:after{display:none}.u-steps-small .u-steps-item-description{font-size:14px;color:#909090}.u-steps-small .u-steps-item-tail{top:8px;padding:0 8px}.u-steps-small .u-steps-item-custom .u-steps-item-icon{width:inherit;height:inherit;line-height:inherit;border-radius:0;border:0;background:none}.u-steps-small .u-steps-item-custom .u-steps-item-icon>.u-steps-icon{font-size:24px;line-height:24px;-webkit-transform:none;transform:none}.u-steps-vertical{display:block}.u-steps-vertical .u-steps-item{display:block;overflow:visible}.u-steps-vertical .u-steps-item-icon{float:left;margin-right:12px}.u-steps-vertical .u-steps-item-content{min-height:48px;overflow:hidden;display:block}.u-steps-vertical .u-steps-item-title{line-height:32px}.u-steps-vertical .u-steps-item-description{padding-bottom:12px}.u-steps-vertical>.u-steps-item>.u-steps-item-tail{position:absolute;left:16px;top:0;height:100%;width:1px;padding:38px 0 6px}.u-steps-vertical>.u-steps-item>.u-steps-item-tail:after{height:100%;width:1px}.u-steps-vertical>.u-steps-item:not(:last-child)>.u-steps-item-tail{display:block}.u-steps-vertical>.u-steps-item>.u-steps-item-content>.u-steps-item-title:after{display:none}.u-steps-vertical.u-steps-small .u-steps-item-tail{position:absolute;left:12px;top:0;padding:30px 0 6px}.u-steps-vertical.u-steps-small .u-steps-item-title{line-height:24px}@media (max-width:480px){.u-steps-horizontal.u-steps-label-horizontal{display:block}.u-steps-horizontal.u-steps-label-horizontal .u-steps-item{display:block;overflow:visible}.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-icon{float:left;margin-right:16px}.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-content{min-height:48px;overflow:hidden;display:block}.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-title{line-height:32px}.u-steps-horizontal.u-steps-label-horizontal .u-steps-item-description{padding-bottom:12px}.u-steps-horizontal.u-steps-label-horizontal>.u-steps-item>.u-steps-item-tail{position:absolute;left:16px;top:0;height:100%;width:1px;padding:38px 0 6px}.u-steps-horizontal.u-steps-label-horizontal>.u-steps-item>.u-steps-item-tail:after{height:100%;width:1px}.u-steps-horizontal.u-steps-label-horizontal>.u-steps-item:not(:last-child)>.u-steps-item-tail{display:block}.u-steps-horizontal.u-steps-label-horizontal>.u-steps-item>.u-steps-item-content>.u-steps-item-title:after{display:none}.u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-tail{position:absolute;left:12px;top:0;padding:30px 0 6px}.u-steps-horizontal.u-steps-label-horizontal.u-steps-small .u-steps-item-title{line-height:24px}}.u-steps-label-vertical .u-steps-item{overflow:visible}.u-steps-label-vertical .u-steps-item-tail{padding:0 24px;margin-left:48px}.u-steps-label-vertical .u-steps-item-content{display:block;text-align:center;margin-top:8px;width:104px}.u-steps-label-vertical .u-steps-item-icon{display:inline-block;margin-left:36px}.u-steps-label-vertical .u-steps-item-title{padding-right:0}.u-steps-dot .u-steps-item-title{line-height:1.5}.u-steps-dot .u-steps-item-tail{width:100%;top:2px;margin:0 0 0 70px;padding:0}.u-steps-dot .u-steps-item-tail:after{height:3px;width:calc(100% - 20px);margin-left:12px}.u-steps-dot .u-steps-item:first-child .u-steps-icon-dot{left:2px}.u-steps-dot .u-steps-item-icon{padding-right:0;width:8px;height:8px;line-height:8px;border:0;margin-left:67px;background:transparent}.u-steps-dot .u-steps-item-icon .u-steps-icon-dot{float:left;width:100%;height:100%;border-radius:100px;position:relative;-webkit-transition:all .3s;transition:all .3s}.u-steps-dot .u-steps-item-icon .u-steps-icon-dot:after{content:"";background:rgba(0,0,0,.001);width:60px;height:32px;position:absolute;top:-12px;left:-26px}.u-steps-dot .u-steps-item-content{width:140px}.u-steps-dot .u-steps-item-process .u-steps-item-icon{width:10px;height:10px;line-height:10px}.u-steps-dot .u-steps-item-process .u-steps-item-icon .u-steps-icon-dot{top:-1px}.u-steps-vertical.u-steps-dot .u-steps-item-icon{margin-left:0;margin-top:8px}.u-steps-vertical.u-steps-dot .u-steps-item-tail{margin:0;left:-9px;top:2px;padding:22px 0 4px}.u-steps-vertical.u-steps-dot .u-steps-item:first-child .u-steps-icon-dot{left:0}.u-steps-vertical.u-steps-dot .u-steps-item-process .u-steps-icon-dot{left:-2px}