.sw-toolbar-bottom { margin-top: 20px; margin-left: 5px; } /* ---------------------------------------------------------------------------------------------------------------- */ .la-step-box { margin: 0 auto; } .la-step { box-sizing: border-box; padding: 0; color: rgba(0, 0, 0, .65); /*font-variant: tabular-nums;*/ line-height: 1.5; list-style: none; /*font-feature-settings: "tnum";*/ display: flex; width: 100%; font-size: 0; margin: 0 auto 30px; } .la-step-item { position: relative; display: inline-block; flex: 1 1; overflow: hidden; vertical-align: top } .la-step-item-container { outline: 0; border: 0!important; } .la-step-item:last-child { flex: none } .la-step-item:last-child > .la-step-item-container > .la-step-content > .la-step-title:after, .la-step-item:last-child > .la-step-item-container > .la-step-line { display: none } .la-step-content, .la-step-icons { display: inline-block; vertical-align: top } .la-step-icons { width: 32px; height: 32px; margin-right: 8px; font-size: 16px; line-height: 32px; text-align: center; border: 1px solid rgba(0, 0, 0, .25); border-radius: 32px; transition: background-color .3s, border-color .3s } .la-step-icons > .la-step-icon { position: relative; top: -1px; color: rgba(0,0,0,.25); line-height: 1 } .la-step-line { position: absolute; top: 12px; left: 0; width: 100%; padding: 0 10px } .la-step-line:after { display: inline-block; width: 100%; height: 1px; background: #e8e8e8; border-radius: 1px; transition: background .3s; content: "" } .la-step-title { position: relative; display: inline-block; padding-right: 16px; color: rgba(0, 0, 0, .65); font-size: 16px; line-height: 32px } .la-step-title:after { position: absolute; top: 16px; left: 100%; display: block; width: 9999px; height: 1px; background: #e8e8e8; content: "" } .la-step-desc { color: rgba(0, 0, 0, .45); font-size: 14px } .active .la-step-icons { background-color: #fff; border-color: var(--primary) } .active .la-step-icons > .la-step-icon { color: var(--primary) } .active .la-step-icons > .la-step-icon .la-step-icon-dot { background: var(--primary) } .active > .la-step-item-container > .la-step-content > .la-step-title { color: rgba(0, 0, 0, .85) } .active > .la-step-item-container > .la-step-content > .la-step-title:after { background-color: #e8e8e8 } .active > .la-step-item-container > .la-step-content > .la-step-desc { color: rgba(0, 0, 0, .65) } .active > .la-step-item-container > .la-step-line:after { background-color: #e8e8e8 } .active .la-step-icons { background: var(--primary) } .active .la-step-icons > .la-step-icon { color: #fff } .active .la-step-title { font-weight: 500 } .done .la-step-icons { background-color: #fff; border-color: var(--primary) } .done .la-step-icons > .la-step-icon { color: var(--primary) } .done .la-step-icons > .la-step-icon .la-step-icon-dot { background: var(--primary) } .done > .la-step-item-container > .la-step-content > .la-step-title { color: rgba(0, 0, 0, .65) } .done > .la-step-item-container > .la-step-content > .la-step-title:after { background-color: var(--primary) } .done > .la-step-item-container > .la-step-content > .la-step-desc { color: rgba(0, 0, 0, .45) } .done > .la-step-item-container > .la-step-line:after { background-color: var(--primary) } .danger .la-step-icons { background-color: #fff; border-color: var(--danger-dark) } .danger .la-step-icons > .la-step-icon { color: var(--danger-dark) } .danger .la-step-icons > .la-step-icon .la-step-icon-dot { background: var(--danger-dark) } .danger > .la-step-item-container > .la-step-content > .la-step-title { color: var(--danger-dark) } .danger > .la-step-item-container > .la-step-content > .la-step-title:after { background-color: #e8e8e8 } .danger > .la-step-item-container > .la-step-content > .la-step-desc { color: var(--danger-dark) } .danger > .la-step-item-container > .la-step-line:after { background-color: #e8e8e8 } .la-step-item.la-step-next-error .la-step-title:after { background: var(--danger-dark) } .la-step .la-step-item:not(.active) > .la-step-item-container[role=button] { cursor: pointer } .la-step .la-step-item:not(.active) > .la-step-item-container[role=button] .la-step-desc, .la-step .la-step-item:not(.active) > .la-step-item-container[role=button] .la-step-icons .la-step-icon, .la-step .la-step-item:not(.active) > .la-step-item-container[role=button] .la-step-title { transition: color .3s } .la-step .la-step-item:not(.active) > .la-step-item-container[role=button]:hover .la-step-desc .la-step .la-step-item:not(.active) > .la-step-item-container[role=button]:hover .la-step-title { color: var(--primary) } .la-step .la-step-item:not(.active) > .la-step-item-container[role=button]:hover .la-step-icons { border-color: var(--primary) } .la-step .la-step-item:not(.active) > .la-step-item-container[role=button]:hover .la-step-icons .la-step-icon { color: var(--primary) } .la-step-horizontal:not(.la-step-label-vertical) .la-step-item { margin-right: 16px; white-space: nowrap } .la-step-horizontal:not(.la-step-label-vertical) .la-step-item:last-child { margin-right: 0 } .la-step-horizontal:not(.la-step-label-vertical) .la-step-item:last-child .la-step-title { padding-right: 0 } .la-step-horizontal:not(.la-step-label-vertical) .la-step-line { display: none } .la-step-horizontal:not(.la-step-label-vertical) .la-step-desc { max-width: 140px; white-space: normal } .la-step-sm.la-step-horizontal:not(.la-step-label-vertical) .la-step-item { margin-right: 12px } .la-step-sm.la-step-horizontal:not(.la-step-label-vertical) .la-step-item:last-child { margin-right: 0 } .la-step-sm .la-step-icons { width: 24px; height: 24px; font-size: 12px; line-height: 24px; text-align: center; border-radius: 24px } .la-step-sm .la-step-title { padding-right: 12px; font-size: 14px; line-height: 24px } .la-step-sm .la-step-title:after { top: 12px } .la-step-sm .la-step-desc { color: rgba(0, 0, 0, .45); font-size: 14px } .la-step-sm .la-step-line { top: 8px } @media (max-width: 540px) { .la-step-horizontal.la-step-label-horizontal { display: block } .la-step-box .nav-tabs > li { float: none; } .la-step-box .nav-tabs>li>a { padding: 0; } .la-step-horizontal.la-step-label-horizontal .la-step-item { display: block; overflow: visible } .la-step-horizontal.la-step-label-horizontal .la-step-icons { float: left; margin-right: 16px } .la-step-horizontal.la-step-label-horizontal .la-step-content { display: block; overflow: hidden } .la-step-horizontal.la-step-label-horizontal .la-step-title { line-height: 32px } .la-step-horizontal.la-step-label-horizontal .la-step-desc { padding-bottom: 12px } .la-step-horizontal.la-step-label-horizontal > .la-step-item > .la-step-item-container > .la-step-line { position: absolute; top: 0; left: 16px; width: 1px; height: 100%; padding: 38px 0 6px } .la-step-horizontal.la-step-label-horizontal > .la-step-item > .la-step-item-container > .la-step-line:after { width: 1px; height: 100% } .la-step-horizontal.la-step-label-horizontal > .la-step-item:not(:last-child) > .la-step-item-container > .la-step-line { display: none; } .la-step-horizontal.la-step-label-horizontal > .la-step-item > .la-step-item-container > .la-step-content > .la-step-title:after { display: none; } .la-step-horizontal.la-step-label-horizontal.la-step-sm .la-step-item-container .la-step-title { line-height: 24px } } .la-step-label-vertical .la-step-item { overflow: visible } .la-step-label-vertical .la-step-line { margin-left: 51px; padding: 3.5px 24px; left: 18px; top: 23px; } .la-step-label-vertical .la-step-content { display: block; width: 104px; margin-top: 8px; text-align: center } .la-step-label-vertical .la-step-icons { display: inline-block; margin-left: 36px } .la-step-label-vertical .la-step-title { padding-right: 0 } .la-step-label-vertical .la-step-title:after { display: none } .la-step-label-vertical.la-step-sm:not(.la-step-dot) .la-step-icons { margin-left: 40px } .la-step-dot .la-step-title, .la-step-dot.la-step-sm .la-step-title { line-height: 1.5 } .la-step-dot .la-step-line, .la-step-dot.la-step-sm .la-step-line { top: 2px; width: 100%; margin: 0 0 0 70px; padding: 0 } .la-step-dot .la-step-line:after, .la-step-dot.la-step-sm .la-step-line:after { width: calc(100% - 20px); height: 3px; margin-left: 12px } .la-step-dot .la-step-item:first-child .la-step-icon-dot, .la-step-dot.la-step-sm .la-step-item:first-child .la-step-icon-dot { left: 2px } .la-step-dot .la-step-icons, .la-step-dot.la-step-sm .la-step-icons { width: 8px; height: 8px; margin-left: 67px; padding-right: 0; line-height: 8px; background: 0 0; border: 0 } .la-step-dot .la-step-icons .la-step-icon-dot, .la-step-dot.la-step-sm .la-step-icons .la-step-icon-dot { position: relative; float: left; width: 100%; height: 100%; border-radius: 100px; transition: all .3s } .la-step-dot .la-step-icons .la-step-icon-dot:after, .la-step-dot.la-step-sm .la-step-icons .la-step-icon-dot:after { position: absolute; top: -12px; left: -26px; width: 60px; height: 32px; background: rgba(0, 0, 0, .001); content: "" } .la-step-dot .la-step-content, .la-step-dot.la-step-sm .la-step-content { width: 140px } .la-step-dot .active .la-step-icons, .la-step-dot.la-step-sm .active .la-step-icons { width: 10px; height: 10px; line-height: 10px } .la-step-dot .active .la-step-icons .la-step-icon-dot, .la-step-dot.la-step-sm .active .la-step-icons .la-step-icon-dot { top: -1px } .la-step-item a { font-weight: normal!important; }