@codex-storage/marketplace-ui-components/dist/assets/Step.css

Marketplace UI components for Codex decentralized storage network.

@property --codex-step-background-color{syntax: "<color>"; inherits: true; initial-value: white;}@property --codex-step-color{syntax: "<length>#"; inherits: true; initial-value: 150,150,150;}.step{--codex-step-background-color: white;--codex-step-border-color: rgb(225, 228, 234);--codex-step-color: 150, 150, 150;--codex-step-animation: step-back}.step:not(:last-child){flex:1}.step.step--done{--codex-step-background-color: transparent;--codex-step-border-color: transparent;--codex-step-color: 31, 193, 107;--codex-step-animation: step}.step>div:first-child{display:flex;align-items:center;justify-content:center;gap:16px;transition:box-shadow .35s,background-color .35s;flex:1;height:20px;position:relative}.step>div:first-child span{display:flex;align-items:center;justify-content:center;background-color:var(--codex-step-background-color);border:1px solid var(--codex-step-border-color);border-radius:50%;width:20px;height:20px;color:#525866;font-size:12px;font-weight:500;line-height:16px;text-align:center;cursor:pointer;transition:box-shadow .35s}.step>div:first-child span:hover{box-shadow:0 0 0 2pxrgba (150,150,150,.2)}.step>div:first-child hr{border:0;height:4px;flex:1;background-color:#969696;border-radius:40px;position:relative;margin-bottom:8px}.step>div:first-child hr:before{background-color:rgba(var(--codex-step-color),1);height:4px;content:" ";position:absolute;z-index:1;animation-duration:1s;animation-name:var(--codex-step-animation);animation-fill-mode:forwards;border-radius:40px}.step>div:nth-child(2){display:block;padding-left:38px}.step>div:nth-child(2) small{font-size:8px;font-weight:700;line-height:8px;text-align:left;color:rgba(var(--codex-step-color),.6);display:block}.step>div:nth-child(2) span{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;text-align:left;color:rgba(var(--codex-step-color),1)}@keyframes step-back{0%{width:100%}to{width:0%}}@keyframes step{0%{width:0}to{width:100%}}