0007-amiens-metropole-update-steps-36765.patch
| static/amiens-metropole/_forms.scss | ||
|---|---|---|
| 215 | 215 |
} |
| 216 | 216 |
} |
| 217 | 217 | |
| 218 |
div#steps {
|
|
| 219 |
padding: $custom-steps-container-padding; |
|
| 220 | ||
| 221 |
ol li {
|
|
| 222 |
@include flexbox(); |
|
| 223 |
@include flex-direction(column); |
|
| 224 |
margin: $custom-step-margin; |
|
| 225 |
padding: $custom-step-padding; |
|
| 226 |
position: relative; |
|
| 227 |
border: 0; |
|
| 228 | ||
| 229 |
span.marker {
|
|
| 230 |
@include justify-content(center); |
|
| 231 |
@include vendor-prefix(align-items, center); |
|
| 232 |
display: inline-flex; |
|
| 233 |
margin: $custom-step-marker-margin; |
|
| 234 |
position: relative; |
|
| 235 |
color: $custom-step-marker-color; |
|
| 236 |
background: $custom-step-marker-background; |
|
| 237 |
border: 1px solid $custom-step-marker-border; |
|
| 238 |
border-radius: 50%; |
|
| 239 |
font-size: calc(12px + 1.2vw); |
|
| 240 |
font-weight: bold; |
|
| 241 |
text-align: center; |
|
| 242 |
vertical-align: middle; |
|
| 243 |
width: 4vw; |
|
| 244 |
height: 4vw; |
|
| 245 |
// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) |
|
| 246 |
max-width: 100%; |
|
| 247 |
max-height: 100%; |
|
| 248 |
box-sizing: border-box; |
|
| 249 | ||
| 250 |
&::before {
|
|
| 251 |
display: block; |
|
| 252 |
content: ' '; |
|
| 253 |
border-radius: 50%; |
|
| 254 |
position: absolute; |
|
| 255 |
background: $button-background; |
|
| 256 |
z-index: -1; |
|
| 257 |
padding: 6px; |
|
| 258 |
} |
|
| 259 | ||
| 260 |
// vertical lines between circles |
|
| 261 |
&::after {
|
|
| 262 |
content: ' '; |
|
| 263 |
position: absolute; |
|
| 264 |
height: 50%; |
|
| 265 |
width: 1px; |
|
| 266 |
bottom: 100%; |
|
| 267 |
right: 50%; |
|
| 268 |
background-color: $custom-step-marker-color; |
|
| 269 |
padding: 0; |
|
| 270 |
} |
|
| 271 |
} |
|
| 272 | ||
| 273 |
span.label {
|
|
| 274 |
margin: $custom-label-margin; |
|
| 275 |
text-align: center; |
|
| 276 |
text-transform: uppercase; |
|
| 277 |
} |
|
| 278 | ||
| 279 |
&.current {
|
|
| 280 |
background: $custom-step-current-background; |
|
| 281 |
font-weight: bold; |
|
| 282 | ||
| 283 |
span.label {
|
|
| 284 |
color: $title-color; |
|
| 285 |
} |
|
| 286 | ||
| 287 |
span.marker {
|
|
| 288 |
color: $custom-current-marker-color; |
|
| 289 |
border-color: $custom-current-marker-background; |
|
| 290 |
background: $custom-current-marker-background; |
|
| 291 |
} |
|
| 292 |
} |
|
| 293 |
// hide the first vertical line |
|
| 294 |
&.first {
|
|
| 295 |
span.marker::after {
|
|
| 296 |
display: none; |
|
| 297 |
} |
|
| 298 |
} |
|
| 299 |
} |
|
| 300 |
} |
|
| 301 | 218 | |
| 302 | 219 |
@media screen and (min-width: $mobile-limit+1px) {
|
| 303 | 220 |
#page #main-content-wrapper #main-content #content #columns {
|
| ... | ... | |
| 322 | 239 |
vertical-align: baseline; |
| 323 | 240 |
} |
| 324 | 241 |
} |
| 325 | ||
| 326 |
#steps {
|
|
| 327 |
@include order(1); |
|
| 328 |
padding: 0; |
|
| 329 |
} |
|
| 330 | ||
| 331 |
div#steps ol {
|
|
| 332 |
@include flexbox(); |
|
| 333 |
@include flex-direction(row); |
|
| 334 |
@include vendor-prefix(flex-flow, nowrap); |
|
| 335 |
@include justify-content(center); |
|
| 336 |
@include vendor-prefix(align-items, center); |
|
| 337 |
// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) |
|
| 338 |
max-width: 100%; |
|
| 339 |
max-height: 100%; |
|
| 340 |
box-sizing: border-box; |
|
| 341 | ||
| 342 |
li {
|
|
| 343 |
padding: $custom-step-mobile-padding; |
|
| 344 | ||
| 345 |
span.marker {
|
|
| 346 |
border-radius: 50%; |
|
| 347 |
padding: 0.3em; |
|
| 348 | ||
| 349 |
width: 4rem; // reset size without vw |
|
| 350 |
height: 4rem; |
|
| 351 |
// horizontal lines between circles |
|
| 352 |
&::after {
|
|
| 353 |
content: ' '; |
|
| 354 |
position: absolute; |
|
| 355 |
height: 1px; |
|
| 356 |
width: 10px; |
|
| 357 |
bottom: 50%; |
|
| 358 |
padding: 0; |
|
| 359 |
left: -10px; |
|
| 360 |
} |
|
| 361 |
} |
|
| 362 | ||
| 363 |
// hide labels on little screens |
|
| 364 |
span.label {
|
|
| 365 |
display: none; |
|
| 366 |
} |
|
| 367 |
} |
|
| 368 |
} |
|
| 369 | 242 |
} |
| 370 | 243 | |
| 371 | 244 |
.has-sidebox {
|
| ... | ... | |
| 375 | 248 |
} |
| 376 | 249 |
} |
| 377 | 250 |
} |
| 251 | ||
| 252 | ||
| 253 |
// Steps |
|
| 254 |
.wcs-step {
|
|
| 255 |
font-size: 1.5em; |
|
| 256 | ||
| 257 |
&--marker {
|
|
| 258 |
font-weight: bold; |
|
| 259 |
} |
|
| 260 | ||
| 261 |
&--label {
|
|
| 262 |
text-transform: uppercase; |
|
| 263 |
font-size: 0.66em; |
|
| 264 |
} |
|
| 265 | ||
| 266 |
&:not(.current) & {
|
|
| 267 |
&--marker {
|
|
| 268 |
border: 1px solid; |
|
| 269 |
} |
|
| 270 |
} |
|
| 271 |
} |
|
| static/amiens-metropole/_header.scss | ||
|---|---|---|
| 1 | 1 |
/* Header */ |
| 2 | 2 |
$header-content-margin: 5px; |
| 3 | 3 | |
| 4 |
#page header {
|
|
| 4 |
.site-header {
|
|
| 5 | 5 |
@include flex(0 1 0); |
| 6 | 6 | |
| 7 | 7 |
background: $primary-color; |
| ... | ... | |
| 173 | 173 |
} |
| 174 | 174 |
} |
| 175 | 175 |
@media screen and (min-width: $mobile-limit+1px) {
|
| 176 |
header {
|
|
| 176 |
.site-header {
|
|
| 177 | 177 |
height: $header-height; |
| 178 | 178 | |
| 179 | 179 |
#header #top {
|
| ... | ... | |
| 187 | 187 |
} |
| 188 | 188 | |
| 189 | 189 |
@media screen and (max-width: $mobile-limit) {
|
| 190 |
header {
|
|
| 190 |
.site-header {
|
|
| 191 | 191 |
height: $header-height * 2; |
| 192 | 192 | |
| 193 | 193 |
#header #top {
|
| static/amiens-metropole/_vars.scss | ||
|---|---|---|
| 34 | 34 |
$input-form-margin: 0.5em 0; |
| 35 | 35 |
$form-margin: 3em; |
| 36 | 36 |
// Steps |
| 37 |
$custom-steps-container-padding: 0 3em;
|
|
| 38 |
$custom-step-margin: 25px 0;
|
|
| 39 |
$custom-step-padding: 0.5ex;
|
|
| 40 |
$custom-label-margin: 1em;
|
|
| 41 |
$custom-current-marker-background: #CF0D8A;
|
|
| 42 |
$custom-current-marker-color: white;
|
|
| 43 |
$custom-step-current-background: white;
|
|
| 44 |
$custom-step-mobile-padding: 0 0.6em 1ex 0;
|
|
| 45 |
$custom-step-marker-margin: 0 auto;
|
|
| 46 |
$custom-step-marker-color: gray;
|
|
| 47 |
$custom-step-marker-border: gray;
|
|
| 48 |
$custom-step-marker-background: transparent; |
|
| 37 |
$wcs-steps-background: #fff;
|
|
| 38 |
$wcs-steps-spacing: 1.4rem;
|
|
| 39 |
$wcs-step_color: grey;
|
|
| 40 |
$wcs-step-border-bottom: none;
|
|
| 41 |
$wcs-step-current-border-bottom: none;
|
|
| 42 |
$wcs-step-marker-type: disc tied;
|
|
| 43 |
$wcs-step-marker-size: 2.6em !default;
|
|
| 44 |
$wcs-step-marker-background: white;
|
|
| 45 |
$wcs-step-current-marker-background: #CF0D8A;
|
|
| 46 |
$wcs-step-current-marker-color: #fff;
|
|
| 47 |
$wcs-step-marker-tie-width: 1px;
|
|
| 48 | ||
| 49 | 49 |
// Generic title style |
| 50 | 50 |
%title-style {
|
| 51 | 51 |
color: $title-color; |
| 52 |
- |
|