yk-smart-ui-test/lib/theme-chalk/step.css

A Component Library for Vue.js.

.yk-step{position:relative;-ms-flex-negative:1;flex-shrink:1}.yk-step:last-of-type .yk-step__line{display:none}.yk-step:last-of-type.is-flex{-ms-flex-preferred-size:auto!important;flex-basis:auto!important;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:0;flex-grow:0}.yk-step:last-of-type .yk-step__description,.yk-step:last-of-type .yk-step__main{padding-right:0}.yk-step__head{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;width:100%}.yk-step__head.is-process{color:#303133}.yk-step__head.is-wait{color:rgba(44,40,54,.32)}.yk-step__head.is-error{color:#DD425A}.yk-step__head.is-finish{color:#2E63FD}.yk-step__head.is-loading{color:#303133}.yk-step__icon.is-text.is-full.is-wait{color:#FFF;background-color:rgba(44,40,54,.32)}.yk-step__icon.is-text.is-full.is-process{color:#FFF;background-color:#2E63FD}.yk-step__icon.is-text.is-full.is-loading{color:#FFF;background-color:#2C2836}.yk-step__icon.is-text.is-full.is-error{color:#FFF;background-color:#DD425A}.yk-step__icon.is-text.is-full.is-finish{color:#FFF;background-color:rgba(46,99,253,.32)}.yk-step__icon{position:relative;z-index:1;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:20px;height:20px;box-sizing:border-box;background:#FFF;transition:.15s ease-out;font-size:12px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;line-height:18px}.yk-step__icon.is-text{border-radius:50%;border:1px solid;border-color:inherit}.yk-step__icon.is-icon{width:40px}.yk-step__icon-inner{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;font-weight:700;line-height:1;color:inherit}.yk-step__icon-inner[class*=el-icon]:not(.is-status){font-size:25px;font-weight:400}.yk-step__icon-inner.is-status{-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.yk-step__icon-inner.is-loading{font-size:12px!important}.yk-step__line{-ms-flex-positive:2;flex-grow:2;border-color:inherit;background-color:rgba(44,40,54,.08)}.yk-step__line-inner{display:block;transition:.15s ease-out;box-sizing:border-box;width:0;height:0;background-repeat:repeat}.yk-step__line-inner.is-finish{background-color:#2E63FD}.yk-step__main{white-space:normal;text-align:left}.yk-step__title{font-size:12px;line-height:38px}.yk-step__description{padding-right:10%;margin-top:-5px;font-size:12px;line-height:20px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(44,40,54,.56)}.yk-step.is-horizontal{display:inline-block}.yk-step.is-horizontal .yk-step__line{height:1px;margin:0 8px}.yk-step.is-horizontal .yk-step__title{width:72px;height:20px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:-26px;text-align:center}.yk-step.is-horizontal .yk-step__title.is-error{color:#DD425A}.yk-step.is-horizontal .yk-step__title.is-finish{color:#2E63FD}.yk-step.is-horizontal .yk-step__line-inner{background-size:10px 1px}.yk-step.is-horizontal .yk-step__line-dashed{background-size:10px 1px;background-repeat:repeat;background-image:linear-gradient(to right,rgba(44,40,54,.32) 0,rgba(44,40,54,.32) 50%,transparent 50%);background-color:transparent}.yk-step.is-horizontal .yk-step__line-dashed .yk-step__line-inner-dashed{background-color:transparent}.yk-step.is-horizontal .yk-step__line-dashed .yk-step__line-inner-dashed.is-process{background-image:linear-gradient(to right,#303133 0,#303133 50%,transparent 50%)}.yk-step.is-horizontal .yk-step__line-dashed .yk-step__line-inner-dashed.is-wait{background-image:linear-gradient(to right,rgba(44,40,54,.32) 0,rgba(44,40,54,.32) 50%,transparent 50%)}.yk-step.is-horizontal .yk-step__line-dashed .yk-step__line-inner-dashed.is-success{background-image:linear-gradient(to right,#4CAF50 0,#4CAF50 50%,transparent 50%)}.yk-step.is-horizontal .yk-step__line-dashed .yk-step__line-inner-dashed.is-error{background-image:linear-gradient(to right,#DD425A 0,#DD425A 50%,transparent 50%)}.yk-step.is-horizontal .yk-step__line-dashed .yk-step__line-inner-dashed.is-finish{background-image:linear-gradient(to right,#2E63FD 0,#2E63FD 50%,transparent 50%)}.yk-step.is-vertical{display:-ms-flexbox;display:flex}.yk-step.is-vertical .yk-step__head{-ms-flex-positive:0;flex-grow:0;width:24px;-ms-flex-direction:column;flex-direction:column}.yk-step.is-vertical .yk-step__main{padding-left:10px;-ms-flex-positive:1;flex-grow:1}.yk-step.is-vertical .yk-step__title{padding-bottom:8px;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#2C2836;line-height:20px}.yk-step.is-vertical .yk-step__line{width:1px;margin:8px 0}.yk-step.is-vertical .yk-step__icon.is-icon{width:24px}.yk-step.is-vertical .yk-step__line-inner{background-size:1px 10px}.yk-step.is-vertical .yk-step__line-dashed{background-size:1px 10px;background-repeat:repeat;background-image:linear-gradient(to bottom,rgba(44,40,54,.32) 0,rgba(44,40,54,.32) 50%,transparent 50%);background-color:transparent}.yk-step.is-vertical .yk-step__line-dashed .yk-step__line-inner-dashed{background-color:transparent}.yk-step.is-vertical .yk-step__line-dashed .yk-step__line-inner-dashed.is-process{background-image:linear-gradient(to bottom,#303133 0,#303133 50%,transparent 50%)}.yk-step.is-vertical .yk-step__line-dashed .yk-step__line-inner-dashed.is-wait{background-image:linear-gradient(to bottom,rgba(44,40,54,.32) 0,rgba(44,40,54,.32) 50%,transparent 50%)}.yk-step.is-vertical .yk-step__line-dashed .yk-step__line-inner-dashed.is-success{background-image:linear-gradient(to bottom,#4CAF50 0,#4CAF50 50%,transparent 50%)}.yk-step.is-vertical .yk-step__line-dashed .yk-step__line-inner-dashed.is-error{background-image:linear-gradient(to bottom,#DD425A 0,#DD425A 50%,transparent 50%)}.yk-step.is-vertical .yk-step__line-dashed .yk-step__line-inner-dashed.is-finish{background-image:linear-gradient(to bottom,#2E63FD 0,#2E63FD 50%,transparent 50%)}.yk-step.is-center .yk-step__head,.yk-step.is-center .yk-step__main{text-align:center}.yk-step.is-center .yk-step__description{padding-left:20%;padding-right:20%}.yk-step.is-center .yk-step__line{left:50%;right:-50%}.yk-step.is-simple{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.yk-step.is-simple .yk-step__head{width:auto;font-size:0;padding-right:10px}.yk-step.is-simple .yk-step__icon{background:0 0;width:16px;height:16px;font-size:12px}.yk-step.is-simple .yk-step__icon-inner[class*=el-icon]:not(.is-status){font-size:18px}.yk-step.is-simple .yk-step__icon-inner.is-status{-webkit-transform:scale(.8) translateY(1px);-ms-transform:scale(.8) translateY(1px);transform:scale(.8) translateY(1px)}.yk-step.is-simple .yk-step__main{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-positive:1;flex-grow:1}.yk-step.is-simple .yk-step__title{font-size:16px;line-height:20px}.yk-step.is-simple:not(:last-of-type) .yk-step__title{max-width:50%;word-break:break-all}.yk-step.is-simple .yk-step__arrow{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.yk-step.is-simple .yk-step__arrow::after,.yk-step.is-simple .yk-step__arrow::before{content:'';display:inline-block;position:absolute;height:15px;width:1px;background:rgba(44,40,54,.32)}.yk-step.is-simple .yk-step__arrow::before{-webkit-transform:rotate(-45deg) translateY(-4px);-ms-transform:rotate(-45deg) translateY(-4px);transform:rotate(-45deg) translateY(-4px);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.yk-step.is-simple .yk-step__arrow::after{-webkit-transform:rotate(45deg) translateY(4px);-ms-transform:rotate(45deg) translateY(4px);transform:rotate(45deg) translateY(4px);-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.yk-step.is-simple:last-of-type .yk-step__arrow{display:none}.yk-step .popover{font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#2c2836;line-height:20px;padding:8px 12px;background:#fff;box-shadow:4px 4px 8px 0 rgba(111,144,194,.04),-4px -4px 8px 0 rgba(111,144,194,.04),4px 4px 8px 0 rgba(60,102,165,.04),-4px -4px 8px 0 rgba(60,102,165,.04);top:-40px;position:absolute}