drip-ui/packages/drip-css/src/steps.css

Lightweight Mobile UI Components built on Vue

.steps {
  width: 670px;
  margin: 0 auto;
    &-step {
       display: flex;
       position: relative;
    &-head {
       margin-right: 40px;
     }
    &-main {
       text-align: left;
     }
    &-line {
       width: 1PX;
       height: calc(100% - 36px);
       top: 32px;
       left: 14px;
       position: absolute;
       background-color: #c0c4cc;
     }
    &-icon {
       background: #fff no-repeat;
       background-size: contain;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       position: absolute;
     }
    &-title {
       font-size: 30px;
       color: #999;
    &-now {
       color: #666 !important;
     }
    }
    &-description {
       margin-top: 20px;
       font-size: 26px;
       color: #999;
       padding-bottom: 52px;
       line-height: 38px;
     }
     &-tip {
       position: absolute;
       top: 10px;
       right: 0;
       color: #999;
       font-size: 20px;
      }
     &-orange {
        color: #FFAB11 !important;
      }
  }
&-gray {
   background: #c0c4cc;
 }
&-orange {
   background: #FFDAAC;
 }
&-top {
   background: linear-gradient(to bottom,#FFDAAC,#c0c4cc);
 }
&-bottom {
   background: linear-gradient(to top,#FFDAAC,#c0c4cc);
 }
}