L’idée ici est de mettre en place un chemin à étapes pour un tunnel d’achat sans avoir recours à JavaScript ou jQuery. La petite difficulté repose notamment dans le fait que la bordure qui se trouve sous chaque intitulé doit être affichée en 2 couleurs lorsqu’on veut signifier l’étape en cours.
Markup HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="process-steps"> <ol> <li> <span class="label">Etape #1</span> </li> <li class="current"> <span class="label">Etape #2</span> </li> <li> <span class="label">Etape #3</span> </li> <li> <span class="label">Etape #4</span> </li> </ol> </div> |
SASS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
.process-steps ol{ display: table; table-layout: fixed; width: 100%; font-size: rem(18); text-transform: uppercase; li{ position: relative; display: table-cell; text-align: center; &::before, &::after{ position: absolute; z-index: 1; display: inline-block; content: ""; width: 50%; height: 2px; bottom: 0; background-color: #000; } &::before{ left: 0; } &::after{ right: 0; } .label{ display: block; padding-bottom: $grid-gutter-width / 2; color: $corporate-color-one; &::after{ position: absolute; z-index: 2; left: calc(50% - 10px); bottom: -9px; display: inline-block; content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: $corporate-color-one; } } &.current{ &::before{ background-color: #000; } &::after{ background-color: $site-font-color-light; } .label{ color: $corporate-color-one; &::after{ background-color: $corporate-color-one; } } } &.current ~ li{ &::before, &::after{ background-color: $site-font-color-light; } .label{ color: $site-font-color-light; &::before, &::after{ background-color: $site-font-color-light; } } } } } |
Autre déclinaison (responsive !)
Les mixins sont ceux de la grille Flexbox de Foundation 6.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div class="steps"> <h1>Déclarer un arrêt de travail</h1> <p>Les étapes suivantes vont vous guider pour déclarer un arrêt de travail sans omettre d'informations.</p> <ol class="steps-list"> <li class="steps-item"> <a href="#"> <span class="number">1</span> <br /><span class="label">Employeur</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">2</span> <br /><span class="label">Assuré</span> </a> </li> <li class="steps-item is-current"> <a href="#"> <span class="number">3</span> <br /><span class="label">Arrêt de travail</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">4</span> <br /><span class="label">Salaires</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">5</span> <br /><span class="label">Documents d'instruction</span> </a> </li> <li class="steps-item"> <a href="#"> <span class="number">6</span> <br /><span class="label">Récapitulatif</span> </a> </li> </ol> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
// // steps $steps-item-width: 30px; .steps { &-list { // reset margin: 0; padding: 0; list-style-type: none; position: relative; } &-item { position: relative; &::before, &::after { position: absolute; display: inline-block; content: ""; background-color: tomato; } &::before { z-index: -2; } &::after { z-index: -3; } &:last-child { &::before, &::after { display: none; } } .number { display: inline-block; width: $steps-item-width; height: $steps-item-width; line-height: $steps-item-width - 4; text-align: center; border-radius: 50%; border: 3px solid tomato; color: tomato; background: #fff; } &.is-current { &::after { background-color: black; } } &.is-current ~ li { &::before { display: none; } &::after { background-color: black; } .number { line-height: $steps-item-width; border: 1px solid black; color: black; &::after { background-color: black; } } } } @include breakpoint(medium down) { &-list { @include flex-direction( $direction: column); } &-item { br { display: none; } &::before, &::after { left: ($steps-item-width/2) - 1; width: 3px; } &::before { height: $steps-item-width + 5; } &::after { height: 100%; } .number { margin-bottom: $steps-item-width/2; } } } @include breakpoint(large) { &-list { @include flex-grid-row( $behavior: collapse, $columns: extend, $gutters: 0); } &-item { @include flex-grid-column( $gutters: 0); &::before, &::after { top: ($steps-item-width/2) - 1; height: 3px; } &::before { width: $steps-item-width + 10; left: 0; } &::after { width: 100%; right: 0; } .number { position: absolute; z-index: -1; left: calc(50% - ($steps-item-width/3)); } &.is-current { &::after { top: ($steps-item-width/2); height: 1px; } } &.is-current ~ li { &::after { top: ($steps-item-width/2); height: 1px; } } } } } // end: steps |