@axa-fr/react-toolkit-form-steps/dist/af-step-form.css

1. [Installation](#installation) 2. [Old Design Steps](#old-design-steps) 3. [New Design Steps](#new-design-steps)

.af-steps{margin-bottom:2rem}.af-steps .af-steps-list{display:table;width:100%;table-layout:fixed;border-radius:4px;overflow:hidden;padding:0;margin:0;border:2px solid #eceeef}.af-steps .af-steps-list-step{display:table-cell;font-size:1rem;background:#eceeef;color:#292b2c;padding-left:1.875em}.af-steps .af-steps-list-step.on{color:#000072;background:#fff}.af-steps .af-steps-list-step.on .af-steps-list-stepNumber,.af-steps .af-steps-list-step.on .af-steps-list-stepTitle{opacity:1}.af-steps .af-steps-list-step.on .af-steps-list-stepLabel::after{border-color:transparent transparent transparent #fff}.af-steps .af-steps-list-step.past{color:#000072}.af-steps .af-steps-list-step.past .af-steps-list-stepNumber,.af-steps .af-steps-list-step.past .af-steps-list-stepTitle{opacity:.5}.af-steps .af-steps-list-step.past:hover{cursor:pointer}.af-steps .af-steps-list-step.past:hover .af-steps-list-stepNumber,.af-steps .af-steps-list-step.past:hover .af-steps-list-stepTitle{opacity:1}.af-steps .af-steps-list-step.past .af-steps-list-stepLabel:first-child::after{border-color:transparent transparent transparent #eceeef}.af-steps .af-steps-list-step.disabled{color:#f7f7f9;background:#eceeef}.af-steps .af-steps-list-step.disabled .af-steps-list-stepLabel::after{border-color:transparent transparent transparent #eceeef}.af-steps .af-steps-list-stepLabel{position:relative;width:100%;vertical-align:middle;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.af-steps .af-steps-list-stepLabel::before{content:"";position:absolute;width:0;height:0;right:-23px;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);border-style:solid;border-width:50px 0 50px 36px;border-color:transparent transparent transparent #fff}.af-steps .af-steps-list-stepLabel::after{content:"";position:absolute;width:0;height:0;right:-20px;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);border-style:solid;border-width:50px 0 50px 36px;border-color:transparent transparent transparent #eceeef}.af-steps .af-steps-list-stepNumber,.af-steps .af-steps-list-stepTitle{opacity:.3}.af-steps .af-steps-list-stepNumber{margin-right:.3125rem;font-size:2rem;font-weight:600}.af-steps .af-steps-list-stepNumber .glyphicon{font-size:1.5rem;width:17px}.af-steps .af-steps-list-stepTitle{font-weight:600;padding-top:.5rem}.af-steps .af-steps-list-step:last-child .af-steps-list-stepLabel::after,.af-steps .af-steps-list-step:last-child .af-steps-list-stepLabel::before{display:none}.af-steps .af-steps-list-step:last-child .af-steps-list-stepNumber{font-size:2rem}@media(max-width:575.98px){.af-steps-list{table-layout:auto}.af-steps-list-step{min-width:3.125rem}.af-steps-list-stepTitle{display:none}.af-steps-list-stepNumber{left:2rem;z-index:2}.af-steps-list-stepNumber .glyphicon{font-size:2rem;width:17px}.af-steps-list-step.on .af-steps-list-stepTitle{display:block}.af-steps-list-step.on .af-steps-list-stepNumber .glyphicon{font-size:2rem;width:17px}}