lixin-web/webapp/css/element-theme/step.css

vue and bootstrap

@charset "UTF-8";
:root{
    /* Transition
  -------------------------- */
    /* Colors
  -------------------------- */
    /* Link
  -------------------------- */
    /* Border
  -------------------------- */
    /* Box-shadow
  -------------------------- */
    /* Fill
  -------------------------- */
    /* Font
  -------------------------- */
    /* Size
  -------------------------- */
    /* z-index
  -------------------------- */
    /* Disable base
  -------------------------- */
    /* Icon
  -------------------------- */
    /* Checkbox
  -------------------------- */
    /* Radio
  -------------------------- */
    /* Select
  -------------------------- */
    /* Alert
  -------------------------- */
    /* Message Box
  -------------------------- */
    /* Message
  -------------------------- */
    /* Notification
  -------------------------- */
    /* Input
  -------------------------- */
    /* Cascader
  -------------------------- */
    /* Group
  -------------------------- */
    /* Tab
  -------------------------- */
    /* Button
  -------------------------- */
    /* cascader
  -------------------------- */
    /* Switch
 -------------------------- */
    /* Dialog
 -------------------------- */
    /* Table
 -------------------------- */
    /* Pagination
 -------------------------- */
    /* Popover
 -------------------------- */
    /* Tooltip
  -------------------------- */
    /* Tag
  -------------------------- */
    /* Dropdown
  -------------------------- */
    /* Badge
  -------------------------- */
    /* Card
  --------------------------*/
    /* Slider
  --------------------------*/
    /* Steps
  --------------------------*/
    /* Menu
  --------------------------*/
    /* Rate
  --------------------------*/
    /* DatePicker
  --------------------------*/
    /* Loading
  --------------------------*/
    /* Scrollbar
  --------------------------*/
    /* Carousel
  --------------------------*/
    /* Collapse
  --------------------------*/
    /* Transfer
  --------------------------*/
}

.el-step{
    position: relative;
    vertical-align: top;
}

.el-step:last-child .el-step__main{
    padding-right: 0;
}

.el-step.is-vertical{}

.el-step.is-vertical .el-step__head, .el-step.is-vertical .el-step__main{
    display: inline-block;
}

.el-step.is-vertical .el-step__main{
    padding-left: 10px;
}

.el-step.is-horizontal{
    display: inline-block;
}

.el-step__line{
    display: inline-block;
    position: absolute;
    border-color: inherit;
    background-color: #d5d5d5;
}

.el-step__line.is-vertical{
    width: 2px;
    box-sizing: border-box;
    top: 32px;
    bottom: 0;
    left: 15px;
}

.el-step__line.is-horizontal{
    top: 15px;
    height: 2px;
    left: 32px;
    right: 0;
}

.el-step__line.is-icon{}

.el-step__line.is-icon.is-horizontal{
    right: 4px;
}

.el-step__line-inner{
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    transition: all 150ms;
    width: 0;
    height: 0;
}

.el-step__icon{
    display: block;
    line-height: 28px;
}

.el-step__icon > * {
    line-height: inherit;
    vertical-align: middle;
}

.el-step__head{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
    line-height: 28px;
    font-size: 28px;
    vertical-align: top;
    transition: all 150ms;
}

.el-step__head.is-finish{
    color: #2ba7e7;
    border-color: #2ba7e7;
}

.el-step__head.is-error{
    color: #fe5307;
    border-color: #fe5307;
}

.el-step__head.is-success{
    color: #78d640;
    border-color: #78d640;
}

.el-step__head.is-wait{
    color: #d5d5d5;
    border-color: #d5d5d5;
}

.el-step__head.is-process{
    color: #d5d5d5;
    border-color: #d5d5d5;
}

.el-step__head.is-text{
    font-size: 14px;
    border-width: 2px;
    border-style: solid;
}

.el-step__head.is-text.is-finish{
    color: #fff;
    background-color: #2ba7e7;
    border-color: #2ba7e7;
}

.el-step__head.is-text.is-error{
    color: #fff;
    background-color: #fe5307;
    border-color: #fe5307;
}

.el-step__head.is-text.is-success{
    color: #fff;
    background-color: #78d640;
    border-color: #78d640;
}

.el-step__head.is-text.is-wait{
    color: #d5d5d5;
    background-color: #fff;
    border-color: #d5d5d5;
}

.el-step__head.is-text.is-process{
    color: #fff;
    background-color: #d5d5d5;
    border-color: #d5d5d5;
}

.el-step__main{
    white-space: normal;
    padding-right: 10px;
    text-align: left;
}

.el-step__title{
    font-size: 14px;
    line-height: 32px;
    display: inline-block;
}

.el-step__title.is-finish{
    font-weight: 700;
    color: #2ba7e7;
}

.el-step__title.is-error{
    font-weight: 700;
    color: #fe5307;
}

.el-step__title.is-success{
    font-weight: 700;
    color: #78d640;
}

.el-step__title.is-wait{
    font-weight: 400;
    color: rgb(151, 171, 190);
}

.el-step__title.is-process{
    font-weight: 700;
    color: rgb(72, 90, 106);
}

.el-step__description{
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

.el-step__description.is-finish{
    color: #2ba7e7;
}

.el-step__description.is-error{
    color: #fe5307;
}

.el-step__description.is-success{
    color: #78d640;
}

.el-step__description.is-wait{
    color: #d5d5d5;
}

.el-step__description.is-process{
    color: rgb(131, 148, 165);
}
:root{
    /* Transition
  -------------------------- */
    /* Colors
  -------------------------- */
    /* Link
  -------------------------- */
    /* Border
  -------------------------- */
    /* Box-shadow
  -------------------------- */
    /* Fill
  -------------------------- */
    /* Font
  -------------------------- */
    /* Size
  -------------------------- */
    /* z-index
  -------------------------- */
    /* Disable base
  -------------------------- */
    /* Icon
  -------------------------- */
    /* Checkbox
  -------------------------- */
    /* Radio
  -------------------------- */
    /* Select
  -------------------------- */
    /* Alert
  -------------------------- */
    /* Message Box
  -------------------------- */
    /* Message
  -------------------------- */
    /* Notification
  -------------------------- */
    /* Input
  -------------------------- */
    /* Cascader
  -------------------------- */
    /* Group
  -------------------------- */
    /* Tab
  -------------------------- */
    /* Button
  -------------------------- */
    /* cascader
  -------------------------- */
    /* Switch
 -------------------------- */
    /* Dialog
 -------------------------- */
    /* Table
 -------------------------- */
    /* Pagination
 -------------------------- */
    /* Popover
 -------------------------- */
    /* Tooltip
  -------------------------- */
    /* Tag
  -------------------------- */
    /* Dropdown
  -------------------------- */
    /* Badge
  -------------------------- */
    /* Card
  --------------------------*/
    /* Slider
  --------------------------*/
    /* Steps
  --------------------------*/
    /* Steps
  --------------------------*/
    /* Rate
  --------------------------*/
    /* DatePicker
  --------------------------*/
    /* Loading
  --------------------------*/
    /* Scrollbar
  --------------------------*/
    /* Carousel
  --------------------------*/
    /* Collapse
  --------------------------*/
}