1 line
8.8 KiB
CSS
1 line
8.8 KiB
CSS
|
@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.steps:not(:last-child){margin-bottom:1.5rem}.steps{display:flex;flex-wrap:wrap;font-size:1rem;min-height:2rem}.steps .step-item{margin-top:0;position:relative;flex-grow:1;flex-basis:0}.steps .step-item:not(:first-child){flex-basis:1em;flex-grow:1;flex-shrink:1}.steps .step-item:not(:first-child)::before{content:" ";display:block;position:absolute}.steps .step-item::before{background:linear-gradient(to left,#dbdbdb 50%,#00d1b2 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item::before .step-marker{color:#fff}.steps .step-item.is-active::before{background-position:left bottom}.steps .step-item.is-active .step-marker{background-color:#fff;border-color:#00d1b2;color:#00d1b2}.steps .step-item.is-completed::before{background-position:left bottom}.steps .step-item.is-completed .step-marker{color:#fff;background-color:#00d1b2}.steps .step-item .step-marker{align-items:center;display:flex;border-radius:50%;font-weight:700;justify-content:center;background:#b5b5b5;color:#fff;border:.2em solid #fff;z-index:1}.steps .step-item .step-details{text-align:center}.steps .step-item.is-white::before{background:linear-gradient(to left,#dbdbdb 50%,#fff 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item.is-white.is-active::before{background-position:left bottom}.steps .step-item.is-white.is-active .step-marker{background-color:#fff;border-color:#fff;color:#fff}.steps .step-item.is-white.is-completed::before{background-position:left bottom}.steps .step-item.is-white.is-completed .step-marker{color:#0a0a0a;background-color:#fff}.steps .step-item.is-black::before{background:linear-gradient(to left,#dbdbdb 50%,#0a0a0a 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item.is-black.is-active::before{background-position:left bottom}.steps .step-item.is-black.is-active .step-marker{background-color:#fff;border-color:#0a0a0a;color:#0a0a0a}.steps .step-item.is-black.is-completed::before{background-position:left bottom}.steps .step-item.is-black.is-completed .step-marker{color:#fff;background-color:#0a0a0a}.steps .step-item.is-light::before{background:linear-gradient(to left,#dbdbdb 50%,#f5f5f5 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item.is-light.is-active::before{background-position:left bottom}.steps .step-item.is-light.is-active .step-marker{background-color:#fff;border-color:#f5f5f5;color:#f5f5f5}.steps .step-item.is-light.is-completed::before{background-position:left bottom}.steps .step-item.is-light.is-completed .step-marker{color:#363636;background-color:#f5f5f5}.steps .step-item.is-dark::before{background:linear-gradient(to left,#dbdbdb 50%,#363636 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item.is-dark.is-active::before{background-position:left bottom}.steps .step-item.is-dark.is-active .step-marker{background-color:#fff;border-color:#363636;color:#363636}.steps .step-item.is-dark.is-completed::before{background-position:left bottom}.steps .step-item.is-dark.is-completed .step-marker{color:#f5f5f5;background-color:#363636}.steps .step-item.is-primary::before{background:linear-gradient(to left,#dbdbdb 50%,#00d1b2 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item.is-primary.is-active::before{background-position:left bottom}.steps .step-item.is-primary.is-active .step-marker{background-color:#fff;border-color:#00d1b2;color:#00d1b2}.steps .step-item.is-primary.is-completed::before{background-position:left bottom}.steps .step-item.is-primary.is-completed .step-marker{color:#fff;background-color:#00d1b2}.steps .step-item.is-link::before{background:linear-gradient(to left,#dbdbdb 50%,#3273dc 50%);background-size:200% 100%;background-position:right bottom}.steps .step-item.is-link.is
|