0001-add-variable-for-native-circle-steps-23533.patch
| help/fr/misc-scss.page | ||
|---|---|---|
| 358 | 358 |
<td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td> |
| 359 | 359 |
<td><p><var>0</var></p></td> |
| 360 | 360 |
</tr> |
| 361 |
<tr> |
|
| 362 |
<td><p><code>$circle-steps</code></p></td> |
|
| 363 |
<td><p>Active la présentation en cercles des étapes</p></td> |
|
| 364 |
<td><p><var>false</var></p></td> |
|
| 365 |
</tr> |
|
| 366 |
<tr> |
|
| 367 |
<td><p><code>$circle-steps-with-lines</code></p></td> |
|
| 368 |
<td><p>Active les lignes entre les cercles</p></td> |
|
| 369 |
<td><p><var>true</var></p></td> |
|
| 370 |
</tr> |
|
| 371 |
<tr> |
|
| 372 |
<td><p><code>$circle-steps-diameter</code></p></td> |
|
| 373 |
<td><p>Diamètre des cercles</p></td> |
|
| 374 |
<td><p><var>56px</var></p></td> |
|
| 375 |
</tr> |
|
| 376 |
<tr> |
|
| 377 |
<td><p><code>$circle-steps-number-color</code></p></td> |
|
| 378 |
<td><p>Couleur des nombres à l'intérieur des cercles</p></td> |
|
| 379 |
<td><p><var>#868686</var></p></td> |
|
| 380 |
</tr> |
|
| 381 |
<tr> |
|
| 382 |
<td><p><code>$circle-steps-current-number-color</code></p></td> |
|
| 383 |
<td><p>Couleur des nombres de l'étape courante</p></td> |
|
| 384 |
<td><p><var>white</var></p></td> |
|
| 385 |
</tr> |
|
| 386 |
<tr> |
|
| 387 |
<td><p><code>$circle-steps-current-marker-background</code></p></td> |
|
| 388 |
<td><p>Couleur de fond du cercle de l'étape courante</p></td> |
|
| 389 |
<td><p><var>$primary-color</var></p></td> |
|
| 390 |
</tr> |
|
| 361 | 391 |
</table> |
| 362 | 392 |
</section> |
| 363 | 393 | |
| static/includes/_form-steps.scss | ||
|---|---|---|
| 1 |
$circle-steps: false !default; |
|
| 2 |
$circle-steps-with-lines: true !default; |
|
| 3 |
$circle-steps-diameter: 56px !default; |
|
| 4 |
$circle-steps-number-color: #868686 !default; |
|
| 5 |
$circle-steps-current-number-color: white !default; |
|
| 6 |
$circle-steps-current-marker-background: $primary-color !default; |
|
| 7 | ||
| 8 |
// private variables |
|
| 9 |
$_circle-lines-thickness: 1px !default; |
|
| 10 |
$_steps-height: $circle-steps-diameter !default; |
|
| 11 |
$_steps-border: 1px !default; |
|
| 12 | ||
| 13 |
/* circle steps or squared steps */ |
|
| 14 | ||
| 15 |
@if $circle-steps {
|
|
| 16 | ||
| 17 |
div#steps {
|
|
| 18 |
ol {
|
|
| 19 |
// reduce empty space on the left (user agent stylesheet) |
|
| 20 |
padding-left: 0; |
|
| 21 |
margin-left: 0; |
|
| 22 |
} |
|
| 23 | ||
| 24 |
li {
|
|
| 25 |
display: -ms-flexbox; |
|
| 26 |
display: flex; |
|
| 27 |
padding: 0; |
|
| 28 |
margin: $_steps-height 0; |
|
| 29 |
width: auto; |
|
| 30 |
position: relative; |
|
| 31 |
border: 0; |
|
| 32 |
background: transparent; |
|
| 33 |
justify-content: space-between; |
|
| 34 |
-ms-justify-content: space-between; |
|
| 35 |
align-items: center; |
|
| 36 |
-ms-align-items: center; |
|
| 37 |
flex-direction: row; |
|
| 38 |
-ms-flex-direction: row; |
|
| 39 | ||
| 40 |
> span {
|
|
| 41 |
flex-shrink: 0; |
|
| 42 |
flex-basis: $circle-steps-diameter; |
|
| 43 |
} |
|
| 44 | ||
| 45 |
span.marker {
|
|
| 46 |
display: inline-flex; |
|
| 47 |
margin: 0 1em 0 0; |
|
| 48 |
flex-grow: 0; |
|
| 49 |
-ms-flex-grow: 0; |
|
| 50 |
align-items: center; |
|
| 51 |
-ms-align-items: center; |
|
| 52 |
justify-content: center; |
|
| 53 |
-ms-justify-content: center; |
|
| 54 |
position: relative; |
|
| 55 |
color: $circle-steps-number-color; |
|
| 56 |
background: white; |
|
| 57 |
border: $_steps-border solid $circle-steps-number-color; |
|
| 58 |
border-radius: 50%; |
|
| 59 |
font-size: 100%; |
|
| 60 |
font-weight: bold; |
|
| 61 |
text-align: center; |
|
| 62 |
vertical-align: middle; |
|
| 63 |
width: $circle-steps-diameter; |
|
| 64 |
height: $circle-steps-diameter; |
|
| 65 |
// bug on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) |
|
| 66 |
max-width: 100%; |
|
| 67 |
max-height: 100%; |
|
| 68 |
box-sizing: border-box; |
|
| 69 |
// hide the circle inside the marker |
|
| 70 |
&::before {
|
|
| 71 |
display: none; |
|
| 72 |
} |
|
| 73 |
} |
|
| 74 | ||
| 75 |
span.label {
|
|
| 76 |
margin: 0; |
|
| 77 |
flex-grow: 1; |
|
| 78 |
color: #868686; |
|
| 79 |
text-align: left; |
|
| 80 |
vertical-align: middle; |
|
| 81 |
} |
|
| 82 | ||
| 83 |
&.current {
|
|
| 84 |
font-weight: bold; |
|
| 85 | ||
| 86 |
span.marker {
|
|
| 87 |
color: $circle-steps-current-number-color; |
|
| 88 |
border-color: $circle-steps-current-marker-background; |
|
| 89 |
background: $circle-steps-current-marker-background; |
|
| 90 |
} |
|
| 91 |
} |
|
| 92 | ||
| 93 |
@if $circle-steps-with-lines {
|
|
| 94 | ||
| 95 |
&.first {
|
|
| 96 |
span.marker::after {
|
|
| 97 |
display: none; |
|
| 98 |
} |
|
| 99 |
} |
|
| 100 | ||
| 101 |
span.marker::after {
|
|
| 102 |
content: ' '; |
|
| 103 |
z-index: -1; // below the rest |
|
| 104 |
position: absolute; |
|
| 105 |
height: $_steps-height + $circle-steps-diameter - $_steps-border; |
|
| 106 |
width: $_circle-lines-thickness; |
|
| 107 |
bottom: $circle-steps-diameter - $_steps-border; |
|
| 108 |
left: 50%; |
|
| 109 |
background-color: $circle-steps-number-color; |
|
| 110 |
padding: 0; |
|
| 111 |
} |
|
| 112 | ||
| 113 |
} @else {
|
|
| 114 | ||
| 115 |
justify-content: center; |
|
| 116 |
-ms-justify-content: center; |
|
| 117 |
flex-direction: column; |
|
| 118 |
-ms-flex-direction: column; |
|
| 119 | ||
| 120 |
span {
|
|
| 121 |
flex-basis: auto; |
|
| 122 |
} |
|
| 123 | ||
| 124 |
span.label {
|
|
| 125 |
text-align: center; |
|
| 126 |
vertical-align: middle; |
|
| 127 |
margin-top: 1em; |
|
| 128 |
} |
|
| 129 | ||
| 130 |
span.marker {
|
|
| 131 |
margin: 0; |
|
| 132 |
} |
|
| 133 |
} |
|
| 134 |
} |
|
| 135 |
} |
|
| 136 | ||
| 137 |
@media screen and (max-width: $mobile-limit) {
|
|
| 138 |
div#gauche div#steps {
|
|
| 139 |
order: 1; |
|
| 140 |
-ms-order: 1; |
|
| 141 |
padding: 0.3em 0; |
|
| 142 | ||
| 143 |
ol {
|
|
| 144 |
display: flex; |
|
| 145 |
display: -ms-flexbox; |
|
| 146 |
flex-direction: row; |
|
| 147 |
-ms-flex-direction: row; |
|
| 148 |
justify-content: center; |
|
| 149 |
-ms-justify-content: center; |
|
| 150 |
flex-flow: wrap; |
|
| 151 |
-ms-flex-flow: wrap; |
|
| 152 |
align-items: center; |
|
| 153 |
-ms-align-items: center; |
|
| 154 |
// bug on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) |
|
| 155 |
max-width: 100%; |
|
| 156 |
max-height: 100%; |
|
| 157 |
box-sizing: border-box; |
|
| 158 | ||
| 159 |
li {
|
|
| 160 |
padding: 0 0.3em 0.5em 0; |
|
| 161 |
height: auto; |
|
| 162 | ||
| 163 |
&.first {
|
|
| 164 |
padding-left: 0; |
|
| 165 |
} |
|
| 166 | ||
| 167 |
span.marker {
|
|
| 168 |
margin: 0; |
|
| 169 |
border-radius: 50%; |
|
| 170 |
width: $circle-steps-diameter; |
|
| 171 |
height: $circle-steps-diameter; |
|
| 172 | ||
| 173 |
@if $circle-steps-with-lines {
|
|
| 174 |
&::after {
|
|
| 175 |
content: ' '; |
|
| 176 |
position: absolute; |
|
| 177 |
padding: 0; |
|
| 178 |
height: $_circle-lines-thickness; |
|
| 179 |
width: $circle-steps-diameter; |
|
| 180 |
left: - floor($circle-steps-diameter / 2 - $_steps-border); |
|
| 181 |
bottom: 60%; |
|
| 182 |
} |
|
| 183 |
} |
|
| 184 |
} |
|
| 185 |
// hide labels on little screens |
|
| 186 |
span.label {
|
|
| 187 |
display: none; |
|
| 188 |
} |
|
| 189 |
} |
|
| 190 |
} |
|
| 191 |
} |
|
| 192 |
} |
|
| 193 |
} @else {
|
|
| 194 |
// squared steps |
|
| 195 |
div#steps ol {
|
|
| 196 |
margin: 0; |
|
| 197 |
padding: 0; |
|
| 198 |
text-align: left; |
|
| 199 |
list-style: none; |
|
| 200 |
color: #868686; |
|
| 201 | ||
| 202 |
& li {
|
|
| 203 |
border: 0; |
|
| 204 |
border-bottom: 1px solid #CCC; |
|
| 205 |
margin-bottom: 2ex; |
|
| 206 |
border-radius: $border-radius; |
|
| 207 |
padding: 1ex; |
|
| 208 |
letter-spacing: 1px; |
|
| 209 |
} |
|
| 210 |
& li.current {
|
|
| 211 |
border: 0; |
|
| 212 |
background: $title-background; |
|
| 213 |
color: $title-color; |
|
| 214 |
& span.label {
|
|
| 215 |
font-weight: bold; |
|
| 216 |
} |
|
| 217 |
} |
|
| 218 |
& li span.marker {
|
|
| 219 |
display: block; |
|
| 220 |
font-size: 250%; |
|
| 221 |
} |
|
| 222 |
} |
|
| 223 |
@if ($responsive-steps == horizontal) {
|
|
| 224 |
@media screen and (max-width: $mobile-limit) {
|
|
| 225 |
div#steps {
|
|
| 226 |
color: #AAA; |
|
| 227 |
& ol {
|
|
| 228 |
& li {
|
|
| 229 |
& span.marker {
|
|
| 230 |
color: white; |
|
| 231 |
background: #DDD; |
|
| 232 |
border: 1px solid #DDD; |
|
| 233 |
} |
|
| 234 |
} |
|
| 235 |
& li.current {
|
|
| 236 |
background: inherit; |
|
| 237 |
color: inherit; |
|
| 238 |
& span.marker {
|
|
| 239 |
background: $title-background; |
|
| 240 |
color: $title-color; |
|
| 241 |
} |
|
| 242 |
} |
|
| 243 |
} |
|
| 244 |
} |
|
| 245 |
} |
|
| 246 |
} |
|
| 247 |
} |
|
| static/includes/_wcs.scss | ||
|---|---|---|
| 1 | 1 |
@import 'grid'; |
| 2 | 2 | |
| 3 | 3 |
$responsive-steps: horizontal !default; |
| 4 |
$circle-steps: false !default; |
|
| 5 | ||
| 6 |
@import 'form-steps'; |
|
| 4 | 7 | |
| 5 | 8 |
/* hide a bunch of elements */ |
| 6 | 9 |
div#droite, |
| ... | ... | |
| 33 | 36 |
clear: none; |
| 34 | 37 |
} |
| 35 | 38 | |
| 36 | ||
| 37 | 39 |
/* style homepage blocks */ |
| 38 | 40 |
div#services > ul {
|
| 39 | 41 |
@include vendor-prefix('column-count', '2');
|
| ... | ... | |
| 106 | 108 |
margin: 1em; |
| 107 | 109 |
} |
| 108 | 110 | |
| 109 |
/* steps */ |
|
| 110 | ||
| 111 |
div#steps ol {
|
|
| 112 |
text-align: left; |
|
| 113 |
margin: 0; |
|
| 114 |
padding: 0; |
|
| 115 |
list-style: none; |
|
| 116 |
color: #868686; |
|
| 117 | ||
| 118 |
& li {
|
|
| 119 |
border: 0; |
|
| 120 |
border-bottom: 1px solid #ccc; |
|
| 121 |
margin-bottom: 2ex; |
|
| 122 |
border-radius: $border-radius; |
|
| 123 |
padding: 1ex; |
|
| 124 |
letter-spacing: 1px; |
|
| 125 |
} |
|
| 126 |
& li.current {
|
|
| 127 |
border: 0; |
|
| 128 |
background: $title-background; |
|
| 129 |
color: $title-color; |
|
| 130 |
& span.label {
|
|
| 131 |
font-weight: bold; |
|
| 132 |
} |
|
| 133 |
} |
|
| 134 |
& li span.marker {
|
|
| 135 |
font-size: 250%; |
|
| 136 |
display: block; |
|
| 137 |
} |
|
| 138 |
} |
|
| 139 | ||
| 140 | 111 |
@if ($responsive-steps == horizontal) {
|
| 141 | 112 |
@media screen and (max-width: $mobile-limit) {
|
| 142 | 113 |
div#gauche {
|
| ... | ... | |
| 157 | 128 |
div#steps {
|
| 158 | 129 |
position: static; |
| 159 | 130 |
margin: 0; |
| 160 |
color: #aaa; |
|
| 161 | 131 |
white-space: nowrap; |
| 162 | 132 |
overflow: hidden; |
| 163 | 133 |
width: 100%; |
| ... | ... | |
| 180 | 150 |
position: static; |
| 181 | 151 |
padding: 2px 9px; |
| 182 | 152 |
font-weight: bold; |
| 183 |
color: white; |
|
| 184 | 153 |
text-align: center; |
| 185 |
background: #ddd; |
|
| 186 | 154 |
border-radius: $border-radius; |
| 187 |
border: 1px solid #ddd; |
|
| 188 | 155 |
} |
| 189 | 156 |
} |
| 190 | 157 |
& li.current {
|
| 191 |
background: inherit; |
|
| 192 |
color: inherit; |
|
| 193 | 158 |
& span.label {
|
| 194 | 159 |
font-weight: normal; |
| 195 | 160 |
} |
| 196 | 161 |
& span.marker {
|
| 197 |
background: $title-background; |
|
| 198 |
color: $title-color; |
|
| 199 | 162 |
border-radius: $border-radius; |
| 200 | 163 |
} |
| 201 | 164 |
} |
| 202 |
- |
|