0001-core-refactorisation-of-wcs-steps-component-36765.patch
| Makefile | ||
|---|---|---|
| 25 | 25 | |
| 26 | 26 |
%.css: export LC_ALL=C.UTF-8 |
| 27 | 27 |
.SECONDEXPANSION: |
| 28 |
%.css: %.scss $(wildcard static/includes/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss) |
|
| 28 |
%.css: %.scss $(wildcard static/includes/*.scss static/includes/*/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss)
|
|
| 29 | 29 |
sassc --sourcemap $< $@ |
| 30 | 30 | |
| 31 | 31 |
css: $(shell python get_themes.py) static/portal-agent/css/agent-portal.css |
| static/includes/_wcs.scss | ||
|---|---|---|
| 1 | 1 |
@import 'grid'; |
| 2 | ||
| 3 |
// $form-sidebar-position: position of sidebar (tracking code + steps) |
|
| 4 |
// possible values are: left, right, top |
|
| 5 |
$form-sidebar-position: left !default; |
|
| 6 | ||
| 7 |
$responsive-steps: horizontal !default; |
|
| 8 | ||
| 9 |
// hide a bunch of elements |
|
| 10 |
div#droite, |
|
| 11 |
div#services > h3, |
|
| 12 |
div#steps h2, |
|
| 13 |
div#sidebox div#links {
|
|
| 14 |
display: none; |
|
| 15 |
} |
|
| 16 | ||
| 17 |
// general layout |
|
| 18 | ||
| 19 |
div#gauche, div#rub_service {
|
|
| 20 |
margin-top: 15px; |
|
| 21 |
} |
|
| 22 | ||
| 23 |
div#rub_service {
|
|
| 24 |
background: $body-background; |
|
| 25 |
} |
|
| 26 | ||
| 27 |
@if ($form-sidebar-position == top) {
|
|
| 28 |
div#gauche {
|
|
| 29 |
text-align: center; |
|
| 30 |
div#tracking-code {
|
|
| 31 |
display: inline-block; |
|
| 32 |
min-width: 15rem; |
|
| 33 |
a {
|
|
| 34 |
padding-left: 0; |
|
| 35 |
} |
|
| 36 |
} |
|
| 37 |
} |
|
| 38 |
} @else {
|
|
| 39 |
div#gauche {
|
|
| 40 |
clear: both; |
|
| 41 |
width: 18.5%; |
|
| 42 |
@if ($form-sidebar-position == left) {
|
|
| 43 |
float: left; |
|
| 44 |
} @else {
|
|
| 45 |
float: right; |
|
| 46 |
} |
|
| 47 |
} |
|
| 48 | ||
| 49 |
div#gauche + div#rub_service {
|
|
| 50 |
width: 79.5%; |
|
| 51 |
clear: none; |
|
| 52 |
@if ($form-sidebar-position == left) {
|
|
| 53 |
float: right; |
|
| 54 |
} @else {
|
|
| 55 |
float: left; |
|
| 56 |
} |
|
| 57 |
} |
|
| 58 |
} |
|
| 59 | ||
| 60 |
// style homepage blocks |
|
| 61 |
div#services > ul {
|
|
| 62 |
@include vendor-prefix('column-count', '2');
|
|
| 63 |
padding: 0; |
|
| 64 |
margin: 0; |
|
| 65 |
list-style: none; |
|
| 66 |
@media screen and (max-width: $mobile-limit) {
|
|
| 67 |
@include vendor-prefix('column-count', '1');
|
|
| 68 |
} |
|
| 69 |
} |
|
| 70 | ||
| 71 |
div#services > ul > li {
|
|
| 72 |
display: inline-block; |
|
| 73 |
} |
|
| 74 | ||
| 75 |
div#services ul li li {
|
|
| 76 |
list-style: none; |
|
| 77 |
} |
|
| 78 | ||
| 79 |
div#services > ul > li {
|
|
| 80 |
margin: 0; |
|
| 81 |
margin-bottom: 10px; |
|
| 82 |
width: 100%; |
|
| 83 |
} |
|
| 84 | ||
| 85 |
div#tracking-code h3, |
|
| 86 |
div#rub_service h2 {
|
|
| 87 |
@extend %title; |
|
| 88 |
} |
|
| 89 | ||
| 90 |
div.large div#rub_service h3, |
|
| 91 |
div#rub_service h3 {
|
|
| 92 |
border: none; |
|
| 93 |
text-align: left; |
|
| 94 |
border-bottom: 2px solid $title-background; |
|
| 95 |
} |
|
| 96 | ||
| 97 |
div#rub_service div.dataview, |
|
| 98 |
div#rub_service dl#evolutions, |
|
| 99 |
div#rub_service form {
|
|
| 100 |
padding: 0.5rem; |
|
| 101 |
} |
|
| 102 | ||
| 103 |
div#rub_service div.dataview div.title h3 {
|
|
| 104 |
font-size: 115%; |
|
| 105 |
border: 0; |
|
| 106 |
} |
|
| 107 | ||
| 108 |
div#rub_service div.dataview div.subtitle h4 {
|
|
| 109 |
font-size: 110%; |
|
| 110 |
} |
|
| 111 | ||
| 112 |
div#rub_service div.dataview div.field.status {
|
|
| 113 |
clear: both; |
|
| 114 |
} |
|
| 115 | ||
| 116 |
// tracking code |
|
| 117 |
div#tracking-code {
|
|
| 118 |
div.tracking-code-part + form {
|
|
| 119 |
margin-top: 1em; |
|
| 120 |
} |
|
| 121 |
} |
|
| 122 | ||
| 123 |
div#tracking-code a {
|
|
| 124 |
font-size: 150%; |
|
| 125 |
display: inline-block; |
|
| 126 |
padding: 0.3em 0 0 0.3em; |
|
| 127 |
color: #444; |
|
| 128 |
} |
|
| 129 | ||
| 130 |
div#tracking-code {
|
|
| 131 |
margin-bottom: 1em; |
|
| 132 |
} |
|
| 133 | ||
| 134 |
div#services div.block-custom-text {
|
|
| 135 |
margin: 1em; |
|
| 136 |
} |
|
| 137 | ||
| 138 |
// steps |
|
| 139 |
div#steps ol {
|
|
| 140 |
margin: 0; |
|
| 141 |
padding: 0; |
|
| 142 |
list-style: none; |
|
| 143 |
color: #868686; |
|
| 144 | ||
| 145 |
& li {
|
|
| 146 |
border: 0; |
|
| 147 |
border-bottom: 1px solid #ccc; |
|
| 148 |
margin-bottom: 1.5em; |
|
| 149 |
border-radius: $border-radius; |
|
| 150 |
padding: 0.7em; |
|
| 151 |
letter-spacing: 1px; |
|
| 152 |
} |
|
| 153 |
& li.current {
|
|
| 154 |
border: 0; |
|
| 155 |
background: $title-background; |
|
| 156 |
color: $title-color; |
|
| 157 |
& span.label {
|
|
| 158 |
font-weight: bold; |
|
| 159 |
} |
|
| 160 |
} |
|
| 161 |
& li span.marker {
|
|
| 162 |
font-size: 250%; |
|
| 163 |
display: block; |
|
| 164 |
} |
|
| 165 |
} |
|
| 166 | ||
| 167 | ||
| 168 |
@if ($form-sidebar-position == top) {
|
|
| 169 |
div#steps ol {
|
|
| 170 |
text-align: center; |
|
| 171 |
li {
|
|
| 172 |
display: inline-block; |
|
| 173 |
min-width: 7rem; |
|
| 174 |
max-width: 11rem; |
|
| 175 |
vertical-align: top; |
|
| 176 |
border-bottom: none; |
|
| 177 |
} |
|
| 178 |
} |
|
| 179 |
} |
|
| 180 | ||
| 181 |
@if ($responsive-steps == horizontal) {
|
|
| 182 |
@media screen and (max-width: $mobile-limit) {
|
|
| 183 |
div#gauche {
|
|
| 184 |
float: none; |
|
| 185 |
width: 100%; |
|
| 186 |
} |
|
| 187 |
div#side {
|
|
| 188 |
display: flex; |
|
| 189 |
flex-direction: column; |
|
| 190 |
& > div { flex: 1 0 auto; }
|
|
| 191 |
} |
|
| 192 |
div#tracking-code {
|
|
| 193 |
font-size: 80%; |
|
| 194 |
order: 1; |
|
| 195 |
h3 { display: inline-block; }
|
|
| 196 |
.text-tracking-code-short-text { display: none; }
|
|
| 197 |
} |
|
| 198 |
div#steps {
|
|
| 199 |
position: static; |
|
| 200 |
margin: 0; |
|
| 201 |
color: #aaa; |
|
| 202 |
white-space: nowrap; |
|
| 203 |
overflow: hidden; |
|
| 204 |
width: 100%; |
|
| 205 |
& ol {
|
|
| 206 |
list-style: none; |
|
| 207 |
padding: 0 0; |
|
| 208 |
margin: 0; |
|
| 209 |
text-align: left; |
|
| 210 |
& li {
|
|
| 211 |
border: none; |
|
| 212 |
display: inline-block; |
|
| 213 |
margin: 0; |
|
| 214 |
padding: 0 1em 0.7em 0; |
|
| 215 |
list-style: none; |
|
| 216 |
min-width: auto; |
|
| 217 |
border-radius: 0; |
|
| 218 |
& span.marker {
|
|
| 219 |
float: none; |
|
| 220 |
display: inline; |
|
| 221 |
font-size: 26px; |
|
| 222 |
position: static; |
|
| 223 |
padding: 2px 9px; |
|
| 224 |
font-weight: bold; |
|
| 225 |
color: white; |
|
| 226 |
text-align: center; |
|
| 227 |
background: #ddd; |
|
| 228 |
border-radius: $border-radius; |
|
| 229 |
border: 1px solid #ddd; |
|
| 230 |
} |
|
| 231 |
} |
|
| 232 |
& li.current {
|
|
| 233 |
background: inherit; |
|
| 234 |
color: inherit; |
|
| 235 |
& span.label {
|
|
| 236 |
font-weight: normal; |
|
| 237 |
} |
|
| 238 |
& span.marker {
|
|
| 239 |
background: $title-background; |
|
| 240 |
color: $title-color; |
|
| 241 |
border-radius: $border-radius; |
|
| 242 |
} |
|
| 243 |
} |
|
| 244 |
& li.step-before .label {
|
|
| 245 |
display: none; |
|
| 246 |
} |
|
| 247 |
} |
|
| 248 |
} |
|
| 249 |
} |
|
| 250 |
} // @endif ($responsive-steps == horizontal) |
|
| 251 | ||
| 252 |
@media screen and (max-width: $mobile-limit) {
|
|
| 253 |
div#gauche + div#rub_service, |
|
| 254 |
div#rub_service {
|
|
| 255 |
width: 100%; |
|
| 256 |
margin: 0; |
|
| 257 |
float: none; |
|
| 258 |
} |
|
| 259 |
div#gauche {
|
|
| 260 |
text-align: left; |
|
| 261 |
div#tracking-code a {
|
|
| 262 |
padding-left: 0.3em; |
|
| 263 |
} |
|
| 264 |
} |
|
| 265 |
} |
|
| 266 | ||
| 267 |
li.required-authentication span {
|
|
| 268 |
display: none; |
|
| 269 |
} |
|
| 270 | ||
| 271 |
li.required-authentication a:after {
|
|
| 272 |
content: "\f084"; |
|
| 273 |
font-family: FontAwesome; |
|
| 274 |
position: absolute; |
|
| 275 |
right: 0.7em; |
|
| 276 |
color: #444; |
|
| 277 |
} |
|
| 278 | ||
| 279 |
ul#evolutions, |
|
| 280 |
div.gru-content #disclose-dataview, |
|
| 281 |
div#receipt-intro {
|
|
| 282 |
margin: 1em; |
|
| 283 |
padding: 0; |
|
| 284 |
display: block; |
|
| 285 |
} |
|
| 286 | ||
| 287 |
div.qommon-map {
|
|
| 288 |
height: 280px; |
|
| 289 |
} |
|
| 290 | ||
| 291 |
p.use-file-from-fargo span {
|
|
| 292 |
cursor: pointer; |
|
| 293 |
border-bottom: 1px dotted #999; |
|
| 294 |
} |
|
| 295 | ||
| 296 |
// journal |
|
| 297 |
ul#evolutions {
|
|
| 298 |
list-style: none; |
|
| 299 |
padding: 0; |
|
| 300 |
margin: 0; |
|
| 301 |
position: relative; |
|
| 302 |
} |
|
| 303 | ||
| 304 |
#evolutions:after {
|
|
| 305 |
// the vertical timeline itself |
|
| 306 |
content: ""; |
|
| 307 |
background: #bbb; |
|
| 308 |
position: absolute; |
|
| 309 |
width: 1px; |
|
| 310 |
top: 40px; |
|
| 311 |
left: 30px; |
|
| 312 |
height: calc(100% - 40px); |
|
| 313 |
z-index: 0; |
|
| 314 |
border-radius: 3px; |
|
| 315 |
} |
|
| 316 | ||
| 317 |
ul#evolutions > li {
|
|
| 318 |
list-style-image: none; |
|
| 319 |
margin: 1em 0 2em 0; |
|
| 320 |
z-index: 10; |
|
| 321 |
position: relative; |
|
| 322 |
li {
|
|
| 323 |
margin: 1rem 0; |
|
| 324 |
} |
|
| 325 |
} |
|
| 326 | ||
| 327 |
ul#evolutions > li:after {
|
|
| 328 |
// li:after, horizontal line, from the timeline to the item |
|
| 329 |
content: ""; |
|
| 330 |
background: #bbb; |
|
| 331 |
position: absolute; |
|
| 332 |
width: 100px; |
|
| 333 |
left: 30px; |
|
| 334 |
top: 39px; |
|
| 335 |
height: 1px; |
|
| 336 |
z-index: -10; |
|
| 337 |
} |
|
| 338 | ||
| 339 |
ul#evolutions div.evolution-metadata {
|
|
| 340 |
width: auto; |
|
| 341 |
display: inline-block; |
|
| 342 |
background: $body-background; |
|
| 343 |
margin-left: 60px; |
|
| 344 |
padding: 0.7em; |
|
| 345 |
padding-top: 30px; |
|
| 346 |
padding-bottom: 0; |
|
| 347 |
margin-bottom: 0; |
|
| 348 |
} |
|
| 349 | ||
| 350 |
ul#evolutions span.time {
|
|
| 351 |
display: block; |
|
| 352 |
color: #aaa; |
|
| 353 |
} |
|
| 354 | ||
| 355 |
ul#evolutions li div.msg span.time {
|
|
| 356 |
padding-left: 0; |
|
| 357 |
} |
|
| 358 | ||
| 359 |
ul#evolutions span.status {
|
|
| 360 |
font-weight: bold; |
|
| 361 |
display: inline-block; |
|
| 362 |
} |
|
| 363 | ||
| 364 |
ul#evolutions span.user {
|
|
| 365 |
display: block; |
|
| 366 |
opacity: 0.5; |
|
| 367 |
} |
|
| 368 | ||
| 369 |
ul#evolutions span.user span {
|
|
| 370 |
font-size: 80%; |
|
| 371 |
} |
|
| 372 | ||
| 373 |
ul#evolutions li div.msg {
|
|
| 374 |
padding: 0.7em; |
|
| 375 |
padding-top: 0; |
|
| 376 |
position: relative; |
|
| 377 |
background: $body-background; |
|
| 378 |
margin-left: 60px; |
|
| 379 |
margin-right: 30px; |
|
| 380 |
p.wf-attachment {
|
|
| 381 |
overflow: hidden; |
|
| 382 |
text-overflow: ellipsis; |
|
| 383 |
} |
|
| 384 |
} |
|
| 385 | ||
| 386 |
ul#evolutions li.msg-in div.msg {
|
|
| 387 |
} |
|
| 388 | ||
| 389 |
ul#evolutions li.msg-out div.msg {
|
|
| 390 |
} |
|
| 391 | ||
| 392 |
ul#evolutions li div.msg div.comment {
|
|
| 393 |
padding: 0.7em 1em; |
|
| 394 |
background: #EEEEEE; |
|
| 395 |
} |
|
| 396 | ||
| 397 |
#evolutions .msg-system {
|
|
| 398 |
margin-bottom: 30px; |
|
| 399 |
} |
|
| 400 | ||
| 401 |
ul#evolutions li span.item {
|
|
| 402 |
// left circle icon |
|
| 403 |
box-sizing: border-box; |
|
| 404 |
position: absolute; |
|
| 405 |
text-align: center; |
|
| 406 |
width: 31px; |
|
| 407 |
height: 31px; |
|
| 408 |
display: block; |
|
| 409 |
left: 15px; |
|
| 410 |
border-radius: 20px; |
|
| 411 |
border: 1px solid #888; |
|
| 412 |
top: 24px; |
|
| 413 |
background: $button-color !important; |
|
| 414 |
box-shadow: 0 0 0px 5px $body-background; |
|
| 415 |
&::before {
|
|
| 416 |
content: ""; |
|
| 417 |
display: block; |
|
| 418 |
width: 7px; |
|
| 419 |
height: 7px; |
|
| 420 |
background: $primary-color; |
|
| 421 |
position: relative; |
|
| 422 |
left: 11px; |
|
| 423 |
top: 11px; |
|
| 424 |
border-radius: 5px; |
|
| 425 |
} |
|
| 426 |
} |
|
| 427 | ||
| 428 |
div.dataview {
|
|
| 429 |
div.field {
|
|
| 430 |
margin-bottom: 0.7em; |
|
| 431 |
} |
|
| 432 |
span.label {
|
|
| 433 |
font-weight: bold; |
|
| 434 |
} |
|
| 435 |
.value {
|
|
| 436 |
display: block; |
|
| 437 |
margin-left: 0.7em; |
|
| 438 |
} |
|
| 439 |
} |
|
| 440 | ||
| 441 |
form div.errornotice {
|
|
| 442 |
margin-top: 0; |
|
| 443 |
} |
|
| 444 | ||
| 445 |
// classes to be used in forms (legacy, grid system to be preferred) |
|
| 446 |
div.halfwidth {
|
|
| 447 |
width: 45%; |
|
| 448 |
float: left; |
|
| 449 |
} |
|
| 450 | ||
| 451 |
div.widget.halfwidth.right {
|
|
| 452 |
clear: none; |
|
| 453 |
margin-left: 5%; |
|
| 454 |
} |
|
| 455 | ||
| 456 |
div.fullwidth {
|
|
| 457 |
width: 95%; |
|
| 458 |
} |
|
| 459 | ||
| 460 |
div.halfwidth, |
|
| 461 |
div.fullwidth {
|
|
| 462 |
textarea, select, input {
|
|
| 463 |
width: 100%; |
|
| 464 |
} |
|
| 465 |
} |
|
| 466 | ||
| 467 |
div.buttons, |
|
| 468 |
div.dataview > p, |
|
| 469 |
div.dataview div.page {
|
|
| 470 |
clear: both; |
|
| 471 |
} |
|
| 472 | ||
| 473 |
form div.page::after, |
|
| 474 |
div.dataview div.page::after {
|
|
| 475 |
content: ""; |
|
| 476 |
display: block; |
|
| 477 |
clear: both; |
|
| 478 |
} |
|
| 479 | ||
| 480 |
div.form-validation div.page {
|
|
| 481 |
background: #f0f0f0; |
|
| 482 |
padding-left: 0.7em; |
|
| 483 |
box-sizing: border-box; |
|
| 484 |
} |
|
| 485 | ||
| 486 |
div.form-validation div.page > h3 {
|
|
| 487 |
padding-top: 0.7em; |
|
| 488 |
font-size: 140%; |
|
| 489 |
} |
|
| 490 | ||
| 491 |
div#rub_service div.form-validation div.page div h3 {
|
|
| 492 |
border-bottom-width: 1px; |
|
| 493 |
} |
|
| 494 | ||
| 495 |
label.activity {
|
|
| 496 |
display: block; |
|
| 497 |
background: url(/static/img/spinner.gif) no-repeat top right; |
|
| 498 |
padding-right: 30px; |
|
| 499 |
} |
|
| 500 | ||
| 501 |
span.geoloc-error {
|
|
| 502 |
padding-left: 0.7em; |
|
| 503 |
font-weight: normal; |
|
| 504 |
font-size: smaller; |
|
| 505 |
float: right; |
|
| 506 |
@media screen and (max-width: $mobile-limit) {
|
|
| 507 |
padding-left: 0; |
|
| 508 |
float: none; |
|
| 509 |
display: block; |
|
| 510 |
z-index: 100; |
|
| 511 |
background: red; |
|
| 512 |
color: white; |
|
| 513 |
text-align: center; |
|
| 514 |
} |
|
| 515 |
} |
|
| 516 | ||
| 517 |
.fileprogress {
|
|
| 518 |
border: 1px solid #888; |
|
| 519 |
} |
|
| 520 | ||
| 521 |
.fileprogress {
|
|
| 522 |
.bar {
|
|
| 523 |
background: $button-background; |
|
| 524 |
line-height: 1.5em; |
|
| 525 |
padding-left: 0.7em; |
|
| 526 |
white-space: nowrap; |
|
| 527 |
transition: background linear 0.1s; |
|
| 528 |
box-sizing: border-box; |
|
| 529 |
} |
|
| 530 |
&.upload-error .bar {
|
|
| 531 |
background: #FF7575; |
|
| 532 |
color: black; |
|
| 533 |
width: 100% !important; |
|
| 534 |
white-space: normal; |
|
| 535 |
} |
|
| 536 |
} |
|
| 537 | ||
| 538 |
.fileinfo {
|
|
| 539 |
line-height: 1.5em; |
|
| 540 |
height: 100%; |
|
| 541 |
} |
|
| 542 | ||
| 543 |
div.fileinfo a.remove {
|
|
| 544 |
text-indent: 0; |
|
| 545 |
background: none; |
|
| 546 |
color: transparent; |
|
| 547 |
display: inline-block; |
|
| 548 |
width: 16px; |
|
| 549 |
position: relative; |
|
| 550 |
text-indent: -10000px; |
|
| 551 |
&::before {
|
|
| 552 |
font-family: FontAwesome; |
|
| 553 |
content: "\f057"; // times-circle |
|
| 554 |
color: $button-background; |
|
| 555 |
text-indent: 0; |
|
| 556 |
position: absolute; |
|
| 557 |
top: 0; |
|
| 558 |
left: 0; |
|
| 559 |
} |
|
| 560 |
} |
|
| 561 | ||
| 562 |
div.RankedItemsWidget label input {
|
|
| 563 |
margin-right: 1em; |
|
| 564 |
} |
|
| 565 | ||
| 566 |
div.RadiobuttonsWidget, div.SingleSelectHintWidget, |
|
| 567 |
div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
|
|
| 568 |
&.hidden {
|
|
| 569 |
display: none !important; |
|
| 570 |
} |
|
| 571 |
} |
|
| 572 | ||
| 573 |
div.CheckboxesWidget div.content ul li.disabled {
|
|
| 574 |
color: lighten($font-color, 50); |
|
| 575 |
} |
|
| 576 | ||
| 577 |
div.RadiobuttonsWidget div.content input[disabled] + span {
|
|
| 578 |
color: lighten($font-color, 50); |
|
| 579 |
} |
|
| 580 | ||
| 581 |
div.file-upload-widget {
|
|
| 582 |
&:not([class*="grid-"]) {
|
|
| 583 |
div.file-button {
|
|
| 584 |
max-width: 500px; |
|
| 585 |
} |
|
| 586 |
} |
|
| 587 |
div.file-button {
|
|
| 588 |
overflow: hidden; |
|
| 589 |
background: $widget-background; |
|
| 590 |
margin: 0; |
|
| 591 |
box-sizing: border-box; |
|
| 592 |
border: $widget-border; |
|
| 593 |
border-radius: $widget-border-radius; |
|
| 594 |
&:focus-within {
|
|
| 595 |
border: $widget-focus-border; |
|
| 596 |
@if $widget-focus-outline == none {
|
|
| 597 |
outline: $widget-border; |
|
| 598 |
outline-style: dotted; |
|
| 599 |
} @else {
|
|
| 600 |
outline: $widget-focus-outline; |
|
| 601 |
outline-offset: $widget-focus-outline-offset; |
|
| 602 |
} |
|
| 603 |
} |
|
| 604 |
height: 150px; |
|
| 605 |
position: relative; |
|
| 606 |
text-align: center; |
|
| 607 |
div.widget.FileWidget {
|
|
| 608 |
margin-bottom: 0; |
|
| 609 |
} |
|
| 610 |
input {
|
|
| 611 |
position: absolute; |
|
| 612 |
top: 0; |
|
| 613 |
left: 0; |
|
| 614 |
width: 100%; |
|
| 615 |
height: 100%; |
|
| 616 |
opacity: 0.001; |
|
| 617 |
margin: 0; |
|
| 618 |
font-size: 0; |
|
| 619 |
cursor: pointer; |
|
| 620 |
} |
|
| 621 |
div.upload-done {
|
|
| 622 |
display: none; |
|
| 623 |
} |
|
| 624 |
div.click-to-upload {
|
|
| 625 |
display: block; |
|
| 626 |
} |
|
| 627 |
div.widget-message {
|
|
| 628 |
padding-top: 20px; |
|
| 629 |
&::before {
|
|
| 630 |
pointer-events: none; |
|
| 631 |
content: "\f016"; // file-o |
|
| 632 |
font-family: FontAwesome; |
|
| 633 |
font-size: 40px; |
|
| 634 |
display: block; |
|
| 635 |
padding-top: 20px; |
|
| 636 |
padding-bottom: 10px; |
|
| 637 |
} |
|
| 638 |
&::after {
|
|
| 639 |
pointer-events: none; |
|
| 640 |
content: "\f055"; // plus-circle |
|
| 641 |
font-family: FontAwesome; |
|
| 642 |
font-size: 20px; |
|
| 643 |
display: block; |
|
| 644 |
position: absolute; |
|
| 645 |
left: calc(50% + 10px); |
|
| 646 |
top: 30px; |
|
| 647 |
color: $button-background; |
|
| 648 |
} |
|
| 649 |
&.upload-done::after {
|
|
| 650 |
content: "\f05d"; // check-circle-o |
|
| 651 |
} |
|
| 652 |
} |
|
| 653 |
&.file-image div.widget-message::before {
|
|
| 654 |
content: "\f1c5"; // file-image-o |
|
| 655 |
} |
|
| 656 |
} |
|
| 657 |
&.short div.file-button {
|
|
| 658 |
height: 110px; |
|
| 659 |
div.widget-message {
|
|
| 660 |
padding-top: 0px; |
|
| 661 |
&::before {
|
|
| 662 |
padding-top: 10px; |
|
| 663 |
} |
|
| 664 |
&::after {
|
|
| 665 |
top: 5px; |
|
| 666 |
} |
|
| 667 |
} |
|
| 668 |
} |
|
| 669 |
&.has-file {
|
|
| 670 |
div.file-button {
|
|
| 671 |
div.upload-done {
|
|
| 672 |
display: block; |
|
| 673 |
} |
|
| 674 |
div.click-to-upload {
|
|
| 675 |
display: none; |
|
| 676 |
} |
|
| 677 |
} |
|
| 678 |
} |
|
| 679 |
&.widget-readonly {
|
|
| 680 |
div.file-button {
|
|
| 681 |
div.widget-message {
|
|
| 682 |
display: none; |
|
| 683 |
} |
|
| 684 |
.fileinfo.thumbnail span.filename {
|
|
| 685 |
display: none; |
|
| 686 |
} |
|
| 687 |
span.filename {
|
|
| 688 |
position: absolute; |
|
| 689 |
top: 0; |
|
| 690 |
left: 0; |
|
| 691 |
width: 100%; |
|
| 692 |
display: block; |
|
| 693 |
padding-top: 30px; |
|
| 694 |
&::before {
|
|
| 695 |
pointer-events: none; |
|
| 696 |
content: "\f016"; // file-o |
|
| 697 |
font-family: FontAwesome; |
|
| 698 |
font-size: 40px; |
|
| 699 |
display: block; |
|
| 700 |
padding-top: 40px; |
|
| 701 |
padding-bottom: 10px; |
|
| 702 |
} |
|
| 703 |
} |
|
| 704 |
img {
|
|
| 705 |
max-height: 100%; |
|
| 706 |
position: relative; |
|
| 707 |
z-index: 10; |
|
| 708 |
} |
|
| 709 |
} |
|
| 710 |
} |
|
| 711 |
div.fileprogress {
|
|
| 712 |
position: absolute; |
|
| 713 |
border: none; |
|
| 714 |
overflow: hidden; |
|
| 715 |
width: 100%; |
|
| 716 |
left: 0; |
|
| 717 |
bottom: 0; |
|
| 718 |
} |
|
| 719 |
} |
|
| 720 | ||
| 721 |
p.use-file-from-fargo {
|
|
| 722 |
margin-top: 0; |
|
| 723 |
} |
|
| 724 | ||
| 725 |
div.section.foldable {
|
|
| 726 |
margin-bottom: 1rem; |
|
| 727 |
> h2:first-child {
|
|
| 728 |
&::after {
|
|
| 729 |
font-family: FontAwesome; |
|
| 730 |
content: "\f106"; // angle-up |
|
| 731 |
position: absolute; |
|
| 732 |
right: 1em; |
|
| 733 |
} |
|
| 734 |
cursor: pointer; |
|
| 735 |
&:focus span.disclose-message, |
|
| 736 |
&:hover span.disclose-message {
|
|
| 737 |
text-decoration: underline; |
|
| 738 |
} |
|
| 739 |
} |
|
| 740 |
span.disclose-message {
|
|
| 741 |
padding-left: 1ex; |
|
| 742 |
font-size: 1rem; |
|
| 743 |
display: none; |
|
| 744 |
} |
|
| 745 |
&.folded {
|
|
| 746 |
span.disclose-message {
|
|
| 747 |
display: inline-block; |
|
| 748 |
@media screen and (max-width: $mobile-limit) {
|
|
| 749 |
// never displayed on mobile as the small width |
|
| 750 |
// makes clear the relation between title and |
|
| 751 |
// open/close bracket. |
|
| 752 |
display: none; |
|
| 753 |
} |
|
| 754 |
} |
|
| 755 |
div {
|
|
| 756 |
display: none; |
|
| 757 |
} |
|
| 758 |
> h2:first-child::after {
|
|
| 759 |
content: "\f107"; // angle-down |
|
| 760 |
} |
|
| 761 |
} |
|
| 762 |
} |
|
| 2 |
@import 'wcs/bulk'; |
|
| 3 |
@import 'wcs/steps'; |
|
| static/includes/wcs/_bulk.scss | ||
|---|---|---|
| 1 |
// $form-sidebar-position: position of sidebar (tracking code + steps) |
|
| 2 |
// possible values are: left, right, top |
|
| 3 |
$form-sidebar-position: left !default; |
|
| 4 | ||
| 5 |
// hide a bunch of elements |
|
| 6 |
div#droite, |
|
| 7 |
div#services > h3, |
|
| 8 |
div#steps h2, |
|
| 9 |
div#sidebox div#links {
|
|
| 10 |
display: none; |
|
| 11 |
} |
|
| 12 | ||
| 13 |
// general layout |
|
| 14 | ||
| 15 |
div#gauche, div#rub_service {
|
|
| 16 |
margin-top: 15px; |
|
| 17 |
} |
|
| 18 | ||
| 19 |
div#rub_service {
|
|
| 20 |
background: $body-background; |
|
| 21 |
} |
|
| 22 | ||
| 23 |
@if ($form-sidebar-position == top) {
|
|
| 24 |
div#gauche {
|
|
| 25 |
text-align: center; |
|
| 26 |
div#tracking-code {
|
|
| 27 |
display: inline-block; |
|
| 28 |
min-width: 15rem; |
|
| 29 |
a {
|
|
| 30 |
padding-left: 0; |
|
| 31 |
} |
|
| 32 |
} |
|
| 33 |
} |
|
| 34 |
} @else {
|
|
| 35 |
div#gauche {
|
|
| 36 |
clear: both; |
|
| 37 |
width: 18.5%; |
|
| 38 |
@if ($form-sidebar-position == left) {
|
|
| 39 |
float: left; |
|
| 40 |
} @else {
|
|
| 41 |
float: right; |
|
| 42 |
} |
|
| 43 |
} |
|
| 44 | ||
| 45 |
div#gauche + div#rub_service {
|
|
| 46 |
width: 79.5%; |
|
| 47 |
clear: none; |
|
| 48 |
@if ($form-sidebar-position == left) {
|
|
| 49 |
float: right; |
|
| 50 |
} @else {
|
|
| 51 |
float: left; |
|
| 52 |
} |
|
| 53 |
} |
|
| 54 |
} |
|
| 55 | ||
| 56 |
// style homepage blocks |
|
| 57 |
div#services > ul {
|
|
| 58 |
@include vendor-prefix('column-count', '2');
|
|
| 59 |
padding: 0; |
|
| 60 |
margin: 0; |
|
| 61 |
list-style: none; |
|
| 62 |
@media screen and (max-width: $mobile-limit) {
|
|
| 63 |
@include vendor-prefix('column-count', '1');
|
|
| 64 |
} |
|
| 65 |
} |
|
| 66 | ||
| 67 |
div#services > ul > li {
|
|
| 68 |
display: inline-block; |
|
| 69 |
} |
|
| 70 | ||
| 71 |
div#services ul li li {
|
|
| 72 |
list-style: none; |
|
| 73 |
} |
|
| 74 | ||
| 75 |
div#services > ul > li {
|
|
| 76 |
margin: 0; |
|
| 77 |
margin-bottom: 10px; |
|
| 78 |
width: 100%; |
|
| 79 |
} |
|
| 80 | ||
| 81 |
div#tracking-code h3, |
|
| 82 |
div#rub_service h2 {
|
|
| 83 |
@extend %title; |
|
| 84 |
} |
|
| 85 | ||
| 86 |
div.large div#rub_service h3, |
|
| 87 |
div#rub_service h3 {
|
|
| 88 |
border: none; |
|
| 89 |
text-align: left; |
|
| 90 |
border-bottom: 2px solid $title-background; |
|
| 91 |
} |
|
| 92 | ||
| 93 |
div#rub_service div.dataview, |
|
| 94 |
div#rub_service dl#evolutions, |
|
| 95 |
div#rub_service form {
|
|
| 96 |
padding: 0.5rem; |
|
| 97 |
} |
|
| 98 | ||
| 99 |
div#rub_service div.dataview div.title h3 {
|
|
| 100 |
font-size: 115%; |
|
| 101 |
border: 0; |
|
| 102 |
} |
|
| 103 | ||
| 104 |
div#rub_service div.dataview div.subtitle h4 {
|
|
| 105 |
font-size: 110%; |
|
| 106 |
} |
|
| 107 | ||
| 108 |
div#rub_service div.dataview div.field.status {
|
|
| 109 |
clear: both; |
|
| 110 |
} |
|
| 111 | ||
| 112 |
// tracking code |
|
| 113 |
div#tracking-code {
|
|
| 114 |
div.tracking-code-part + form {
|
|
| 115 |
margin-top: 1em; |
|
| 116 |
} |
|
| 117 |
} |
|
| 118 | ||
| 119 |
div#tracking-code a {
|
|
| 120 |
font-size: 150%; |
|
| 121 |
display: inline-block; |
|
| 122 |
padding: 0.3em 0 0 0.3em; |
|
| 123 |
color: #444; |
|
| 124 |
} |
|
| 125 | ||
| 126 |
div#tracking-code {
|
|
| 127 |
margin-bottom: 1em; |
|
| 128 |
} |
|
| 129 | ||
| 130 |
div#services div.block-custom-text {
|
|
| 131 |
margin: 1em; |
|
| 132 |
} |
|
| 133 | ||
| 134 | ||
| 135 | ||
| 136 |
@media screen and (max-width: $mobile-limit) {
|
|
| 137 |
// move #gauche on top and tracking code after steps |
|
| 138 |
div#gauche {
|
|
| 139 |
float: none; |
|
| 140 |
width: 100%; |
|
| 141 |
} |
|
| 142 |
div#side {
|
|
| 143 |
display: flex; |
|
| 144 |
flex-direction: column; |
|
| 145 |
& > div { flex: 1 0 auto; }
|
|
| 146 |
} |
|
| 147 |
div#tracking-code {
|
|
| 148 |
font-size: 80%; |
|
| 149 |
order: 1; |
|
| 150 |
h3 { display: inline-block; }
|
|
| 151 |
.text-tracking-code-short-text { display: none; }
|
|
| 152 |
} |
|
| 153 |
} |
|
| 154 | ||
| 155 |
@media screen and (max-width: $mobile-limit) {
|
|
| 156 |
div#gauche + div#rub_service, |
|
| 157 |
div#rub_service {
|
|
| 158 |
width: 100%; |
|
| 159 |
margin: 0; |
|
| 160 |
float: none; |
|
| 161 |
} |
|
| 162 |
div#gauche {
|
|
| 163 |
text-align: left; |
|
| 164 |
div#tracking-code a {
|
|
| 165 |
padding-left: 0.3em; |
|
| 166 |
} |
|
| 167 |
} |
|
| 168 |
} |
|
| 169 | ||
| 170 |
li.required-authentication span {
|
|
| 171 |
display: none; |
|
| 172 |
} |
|
| 173 | ||
| 174 |
li.required-authentication a:after {
|
|
| 175 |
content: "\f084"; |
|
| 176 |
font-family: FontAwesome; |
|
| 177 |
position: absolute; |
|
| 178 |
right: 0.7em; |
|
| 179 |
color: #444; |
|
| 180 |
} |
|
| 181 | ||
| 182 |
ul#evolutions, |
|
| 183 |
div.gru-content #disclose-dataview, |
|
| 184 |
div#receipt-intro {
|
|
| 185 |
margin: 1em; |
|
| 186 |
padding: 0; |
|
| 187 |
display: block; |
|
| 188 |
} |
|
| 189 | ||
| 190 |
div.qommon-map {
|
|
| 191 |
height: 280px; |
|
| 192 |
} |
|
| 193 | ||
| 194 |
p.use-file-from-fargo span {
|
|
| 195 |
cursor: pointer; |
|
| 196 |
border-bottom: 1px dotted #999; |
|
| 197 |
} |
|
| 198 | ||
| 199 |
// journal |
|
| 200 |
ul#evolutions {
|
|
| 201 |
list-style: none; |
|
| 202 |
padding: 0; |
|
| 203 |
margin: 0; |
|
| 204 |
position: relative; |
|
| 205 |
} |
|
| 206 | ||
| 207 |
#evolutions:after {
|
|
| 208 |
// the vertical timeline itself |
|
| 209 |
content: ""; |
|
| 210 |
background: #bbb; |
|
| 211 |
position: absolute; |
|
| 212 |
width: 1px; |
|
| 213 |
top: 40px; |
|
| 214 |
left: 30px; |
|
| 215 |
height: calc(100% - 40px); |
|
| 216 |
z-index: 0; |
|
| 217 |
border-radius: 3px; |
|
| 218 |
} |
|
| 219 | ||
| 220 |
ul#evolutions > li {
|
|
| 221 |
list-style-image: none; |
|
| 222 |
margin: 1em 0 2em 0; |
|
| 223 |
z-index: 10; |
|
| 224 |
position: relative; |
|
| 225 |
li {
|
|
| 226 |
margin: 1rem 0; |
|
| 227 |
} |
|
| 228 |
} |
|
| 229 | ||
| 230 |
ul#evolutions > li:after {
|
|
| 231 |
// li:after, horizontal line, from the timeline to the item |
|
| 232 |
content: ""; |
|
| 233 |
background: #bbb; |
|
| 234 |
position: absolute; |
|
| 235 |
width: 100px; |
|
| 236 |
left: 30px; |
|
| 237 |
top: 39px; |
|
| 238 |
height: 1px; |
|
| 239 |
z-index: -10; |
|
| 240 |
} |
|
| 241 | ||
| 242 |
ul#evolutions div.evolution-metadata {
|
|
| 243 |
width: auto; |
|
| 244 |
display: inline-block; |
|
| 245 |
background: $body-background; |
|
| 246 |
margin-left: 60px; |
|
| 247 |
padding: 0.7em; |
|
| 248 |
padding-top: 30px; |
|
| 249 |
padding-bottom: 0; |
|
| 250 |
margin-bottom: 0; |
|
| 251 |
} |
|
| 252 | ||
| 253 |
ul#evolutions span.time {
|
|
| 254 |
display: block; |
|
| 255 |
color: #aaa; |
|
| 256 |
} |
|
| 257 | ||
| 258 |
ul#evolutions li div.msg span.time {
|
|
| 259 |
padding-left: 0; |
|
| 260 |
} |
|
| 261 | ||
| 262 |
ul#evolutions span.status {
|
|
| 263 |
font-weight: bold; |
|
| 264 |
display: inline-block; |
|
| 265 |
} |
|
| 266 | ||
| 267 |
ul#evolutions span.user {
|
|
| 268 |
display: block; |
|
| 269 |
opacity: 0.5; |
|
| 270 |
} |
|
| 271 | ||
| 272 |
ul#evolutions span.user span {
|
|
| 273 |
font-size: 80%; |
|
| 274 |
} |
|
| 275 | ||
| 276 |
ul#evolutions li div.msg {
|
|
| 277 |
padding: 0.7em; |
|
| 278 |
padding-top: 0; |
|
| 279 |
position: relative; |
|
| 280 |
background: $body-background; |
|
| 281 |
margin-left: 60px; |
|
| 282 |
margin-right: 30px; |
|
| 283 |
p.wf-attachment {
|
|
| 284 |
overflow: hidden; |
|
| 285 |
text-overflow: ellipsis; |
|
| 286 |
} |
|
| 287 |
} |
|
| 288 | ||
| 289 |
ul#evolutions li.msg-in div.msg {
|
|
| 290 |
} |
|
| 291 | ||
| 292 |
ul#evolutions li.msg-out div.msg {
|
|
| 293 |
} |
|
| 294 | ||
| 295 |
ul#evolutions li div.msg div.comment {
|
|
| 296 |
padding: 0.7em 1em; |
|
| 297 |
background: #EEEEEE; |
|
| 298 |
} |
|
| 299 | ||
| 300 |
#evolutions .msg-system {
|
|
| 301 |
margin-bottom: 30px; |
|
| 302 |
} |
|
| 303 | ||
| 304 |
ul#evolutions li span.item {
|
|
| 305 |
// left circle icon |
|
| 306 |
box-sizing: border-box; |
|
| 307 |
position: absolute; |
|
| 308 |
text-align: center; |
|
| 309 |
width: 31px; |
|
| 310 |
height: 31px; |
|
| 311 |
display: block; |
|
| 312 |
left: 15px; |
|
| 313 |
border-radius: 20px; |
|
| 314 |
border: 1px solid #888; |
|
| 315 |
top: 24px; |
|
| 316 |
background: $button-color !important; |
|
| 317 |
box-shadow: 0 0 0px 5px $body-background; |
|
| 318 |
&::before {
|
|
| 319 |
content: ""; |
|
| 320 |
display: block; |
|
| 321 |
width: 7px; |
|
| 322 |
height: 7px; |
|
| 323 |
background: $primary-color; |
|
| 324 |
position: relative; |
|
| 325 |
left: 11px; |
|
| 326 |
top: 11px; |
|
| 327 |
border-radius: 5px; |
|
| 328 |
} |
|
| 329 |
} |
|
| 330 | ||
| 331 |
div.dataview {
|
|
| 332 |
div.field {
|
|
| 333 |
margin-bottom: 0.7em; |
|
| 334 |
} |
|
| 335 |
span.label {
|
|
| 336 |
font-weight: bold; |
|
| 337 |
} |
|
| 338 |
.value {
|
|
| 339 |
display: block; |
|
| 340 |
margin-left: 0.7em; |
|
| 341 |
} |
|
| 342 |
} |
|
| 343 | ||
| 344 |
form div.errornotice {
|
|
| 345 |
margin-top: 0; |
|
| 346 |
} |
|
| 347 | ||
| 348 |
// classes to be used in forms (legacy, grid system to be preferred) |
|
| 349 |
div.halfwidth {
|
|
| 350 |
width: 45%; |
|
| 351 |
float: left; |
|
| 352 |
} |
|
| 353 | ||
| 354 |
div.widget.halfwidth.right {
|
|
| 355 |
clear: none; |
|
| 356 |
margin-left: 5%; |
|
| 357 |
} |
|
| 358 | ||
| 359 |
div.fullwidth {
|
|
| 360 |
width: 95%; |
|
| 361 |
} |
|
| 362 | ||
| 363 |
div.halfwidth, |
|
| 364 |
div.fullwidth {
|
|
| 365 |
textarea, select, input {
|
|
| 366 |
width: 100%; |
|
| 367 |
} |
|
| 368 |
} |
|
| 369 | ||
| 370 |
div.buttons, |
|
| 371 |
div.dataview > p, |
|
| 372 |
div.dataview div.page {
|
|
| 373 |
clear: both; |
|
| 374 |
} |
|
| 375 | ||
| 376 |
form div.page::after, |
|
| 377 |
div.dataview div.page::after {
|
|
| 378 |
content: ""; |
|
| 379 |
display: block; |
|
| 380 |
clear: both; |
|
| 381 |
} |
|
| 382 | ||
| 383 |
div.form-validation div.page {
|
|
| 384 |
background: #f0f0f0; |
|
| 385 |
padding-left: 0.7em; |
|
| 386 |
box-sizing: border-box; |
|
| 387 |
} |
|
| 388 | ||
| 389 |
div.form-validation div.page > h3 {
|
|
| 390 |
padding-top: 0.7em; |
|
| 391 |
font-size: 140%; |
|
| 392 |
} |
|
| 393 | ||
| 394 |
div#rub_service div.form-validation div.page div h3 {
|
|
| 395 |
border-bottom-width: 1px; |
|
| 396 |
} |
|
| 397 | ||
| 398 |
label.activity {
|
|
| 399 |
display: block; |
|
| 400 |
background: url(/static/img/spinner.gif) no-repeat top right; |
|
| 401 |
padding-right: 30px; |
|
| 402 |
} |
|
| 403 | ||
| 404 |
span.geoloc-error {
|
|
| 405 |
padding-left: 0.7em; |
|
| 406 |
font-weight: normal; |
|
| 407 |
font-size: smaller; |
|
| 408 |
float: right; |
|
| 409 |
@media screen and (max-width: $mobile-limit) {
|
|
| 410 |
padding-left: 0; |
|
| 411 |
float: none; |
|
| 412 |
display: block; |
|
| 413 |
z-index: 100; |
|
| 414 |
background: red; |
|
| 415 |
color: white; |
|
| 416 |
text-align: center; |
|
| 417 |
} |
|
| 418 |
} |
|
| 419 | ||
| 420 |
.fileprogress {
|
|
| 421 |
border: 1px solid #888; |
|
| 422 |
} |
|
| 423 | ||
| 424 |
.fileprogress {
|
|
| 425 |
.bar {
|
|
| 426 |
background: $button-background; |
|
| 427 |
line-height: 1.5em; |
|
| 428 |
padding-left: 0.7em; |
|
| 429 |
white-space: nowrap; |
|
| 430 |
transition: background linear 0.1s; |
|
| 431 |
box-sizing: border-box; |
|
| 432 |
} |
|
| 433 |
&.upload-error .bar {
|
|
| 434 |
background: #FF7575; |
|
| 435 |
color: black; |
|
| 436 |
width: 100% !important; |
|
| 437 |
white-space: normal; |
|
| 438 |
} |
|
| 439 |
} |
|
| 440 | ||
| 441 |
.fileinfo {
|
|
| 442 |
line-height: 1.5em; |
|
| 443 |
height: 100%; |
|
| 444 |
} |
|
| 445 | ||
| 446 |
div.fileinfo a.remove {
|
|
| 447 |
text-indent: 0; |
|
| 448 |
background: none; |
|
| 449 |
color: transparent; |
|
| 450 |
display: inline-block; |
|
| 451 |
width: 16px; |
|
| 452 |
position: relative; |
|
| 453 |
text-indent: -10000px; |
|
| 454 |
&::before {
|
|
| 455 |
font-family: FontAwesome; |
|
| 456 |
content: "\f057"; // times-circle |
|
| 457 |
color: $button-background; |
|
| 458 |
text-indent: 0; |
|
| 459 |
position: absolute; |
|
| 460 |
top: 0; |
|
| 461 |
left: 0; |
|
| 462 |
} |
|
| 463 |
} |
|
| 464 | ||
| 465 |
div.RankedItemsWidget label input {
|
|
| 466 |
margin-right: 1em; |
|
| 467 |
} |
|
| 468 | ||
| 469 |
div.RadiobuttonsWidget, div.SingleSelectHintWidget, |
|
| 470 |
div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
|
|
| 471 |
&.hidden {
|
|
| 472 |
display: none !important; |
|
| 473 |
} |
|
| 474 |
} |
|
| 475 | ||
| 476 |
div.CheckboxesWidget div.content ul li.disabled {
|
|
| 477 |
color: lighten($font-color, 50); |
|
| 478 |
} |
|
| 479 | ||
| 480 |
div.RadiobuttonsWidget div.content input[disabled] + span {
|
|
| 481 |
color: lighten($font-color, 50); |
|
| 482 |
} |
|
| 483 | ||
| 484 |
div.file-upload-widget {
|
|
| 485 |
&:not([class*="grid-"]) {
|
|
| 486 |
div.file-button {
|
|
| 487 |
max-width: 500px; |
|
| 488 |
} |
|
| 489 |
} |
|
| 490 |
div.file-button {
|
|
| 491 |
overflow: hidden; |
|
| 492 |
background: $widget-background; |
|
| 493 |
margin: 0; |
|
| 494 |
box-sizing: border-box; |
|
| 495 |
border: $widget-border; |
|
| 496 |
border-radius: $widget-border-radius; |
|
| 497 |
&:focus-within {
|
|
| 498 |
border: $widget-focus-border; |
|
| 499 |
@if $widget-focus-outline == none {
|
|
| 500 |
outline: $widget-border; |
|
| 501 |
outline-style: dotted; |
|
| 502 |
} @else {
|
|
| 503 |
outline: $widget-focus-outline; |
|
| 504 |
outline-offset: $widget-focus-outline-offset; |
|
| 505 |
} |
|
| 506 |
} |
|
| 507 |
height: 150px; |
|
| 508 |
position: relative; |
|
| 509 |
text-align: center; |
|
| 510 |
div.widget.FileWidget {
|
|
| 511 |
margin-bottom: 0; |
|
| 512 |
} |
|
| 513 |
input {
|
|
| 514 |
position: absolute; |
|
| 515 |
top: 0; |
|
| 516 |
left: 0; |
|
| 517 |
width: 100%; |
|
| 518 |
height: 100%; |
|
| 519 |
opacity: 0.001; |
|
| 520 |
margin: 0; |
|
| 521 |
font-size: 0; |
|
| 522 |
cursor: pointer; |
|
| 523 |
} |
|
| 524 |
div.upload-done {
|
|
| 525 |
display: none; |
|
| 526 |
} |
|
| 527 |
div.click-to-upload {
|
|
| 528 |
display: block; |
|
| 529 |
} |
|
| 530 |
div.widget-message {
|
|
| 531 |
padding-top: 20px; |
|
| 532 |
&::before {
|
|
| 533 |
pointer-events: none; |
|
| 534 |
content: "\f016"; // file-o |
|
| 535 |
font-family: FontAwesome; |
|
| 536 |
font-size: 40px; |
|
| 537 |
display: block; |
|
| 538 |
padding-top: 20px; |
|
| 539 |
padding-bottom: 10px; |
|
| 540 |
} |
|
| 541 |
&::after {
|
|
| 542 |
pointer-events: none; |
|
| 543 |
content: "\f055"; // plus-circle |
|
| 544 |
font-family: FontAwesome; |
|
| 545 |
font-size: 20px; |
|
| 546 |
display: block; |
|
| 547 |
position: absolute; |
|
| 548 |
left: calc(50% + 10px); |
|
| 549 |
top: 30px; |
|
| 550 |
color: $button-background; |
|
| 551 |
} |
|
| 552 |
&.upload-done::after {
|
|
| 553 |
content: "\f05d"; // check-circle-o |
|
| 554 |
} |
|
| 555 |
} |
|
| 556 |
&.file-image div.widget-message::before {
|
|
| 557 |
content: "\f1c5"; // file-image-o |
|
| 558 |
} |
|
| 559 |
} |
|
| 560 |
&.short div.file-button {
|
|
| 561 |
height: 110px; |
|
| 562 |
div.widget-message {
|
|
| 563 |
padding-top: 0px; |
|
| 564 |
&::before {
|
|
| 565 |
padding-top: 10px; |
|
| 566 |
} |
|
| 567 |
&::after {
|
|
| 568 |
top: 5px; |
|
| 569 |
} |
|
| 570 |
} |
|
| 571 |
} |
|
| 572 |
&.has-file {
|
|
| 573 |
div.file-button {
|
|
| 574 |
div.upload-done {
|
|
| 575 |
display: block; |
|
| 576 |
} |
|
| 577 |
div.click-to-upload {
|
|
| 578 |
display: none; |
|
| 579 |
} |
|
| 580 |
} |
|
| 581 |
} |
|
| 582 |
&.widget-readonly {
|
|
| 583 |
div.file-button {
|
|
| 584 |
div.widget-message {
|
|
| 585 |
display: none; |
|
| 586 |
} |
|
| 587 |
.fileinfo.thumbnail span.filename {
|
|
| 588 |
display: none; |
|
| 589 |
} |
|
| 590 |
span.filename {
|
|
| 591 |
position: absolute; |
|
| 592 |
top: 0; |
|
| 593 |
left: 0; |
|
| 594 |
width: 100%; |
|
| 595 |
display: block; |
|
| 596 |
padding-top: 30px; |
|
| 597 |
&::before {
|
|
| 598 |
pointer-events: none; |
|
| 599 |
content: "\f016"; // file-o |
|
| 600 |
font-family: FontAwesome; |
|
| 601 |
font-size: 40px; |
|
| 602 |
display: block; |
|
| 603 |
padding-top: 40px; |
|
| 604 |
padding-bottom: 10px; |
|
| 605 |
} |
|
| 606 |
} |
|
| 607 |
img {
|
|
| 608 |
max-height: 100%; |
|
| 609 |
position: relative; |
|
| 610 |
z-index: 10; |
|
| 611 |
} |
|
| 612 |
} |
|
| 613 |
} |
|
| 614 |
div.fileprogress {
|
|
| 615 |
position: absolute; |
|
| 616 |
border: none; |
|
| 617 |
overflow: hidden; |
|
| 618 |
width: 100%; |
|
| 619 |
left: 0; |
|
| 620 |
bottom: 0; |
|
| 621 |
} |
|
| 622 |
} |
|
| 623 | ||
| 624 |
p.use-file-from-fargo {
|
|
| 625 |
margin-top: 0; |
|
| 626 |
} |
|
| 627 | ||
| 628 |
div.section.foldable {
|
|
| 629 |
margin-bottom: 1rem; |
|
| 630 |
> h2:first-child {
|
|
| 631 |
&::after {
|
|
| 632 |
font-family: FontAwesome; |
|
| 633 |
content: "\f106"; // angle-up |
|
| 634 |
position: absolute; |
|
| 635 |
right: 1em; |
|
| 636 |
} |
|
| 637 |
cursor: pointer; |
|
| 638 |
&:focus span.disclose-message, |
|
| 639 |
&:hover span.disclose-message {
|
|
| 640 |
text-decoration: underline; |
|
| 641 |
} |
|
| 642 |
} |
|
| 643 |
span.disclose-message {
|
|
| 644 |
padding-left: 1ex; |
|
| 645 |
font-size: 1rem; |
|
| 646 |
display: none; |
|
| 647 |
} |
|
| 648 |
&.folded {
|
|
| 649 |
span.disclose-message {
|
|
| 650 |
display: inline-block; |
|
| 651 |
@media screen and (max-width: $mobile-limit) {
|
|
| 652 |
// never displayed on mobile as the small width |
|
| 653 |
// makes clear the relation between title and |
|
| 654 |
// open/close bracket. |
|
| 655 |
display: none; |
|
| 656 |
} |
|
| 657 |
} |
|
| 658 |
div {
|
|
| 659 |
display: none; |
|
| 660 |
} |
|
| 661 |
> h2:first-child::after {
|
|
| 662 |
content: "\f107"; // angle-down |
|
| 663 |
} |
|
| 664 |
} |
|
| 665 |
} |
|
| static/includes/wcs/_steps.scss | ||
|---|---|---|
| 1 |
/* |
|
| 2 |
* WCS Steps |
|
| 3 |
* |
|
| 4 |
* Affiche les étapes/pages d'un formulaire |
|
| 5 |
* |
|
| 6 |
* Template : wcs/front/formdata_steps.html |
|
| 7 |
* |
|
| 8 |
* $form-sidebar-position define Steps orientation |
|
| 9 |
* |
|
| 10 |
*/ |
|
| 11 | ||
| 12 | ||
| 13 |
// |
|
| 14 |
// Config |
|
| 15 |
// |
|
| 16 | ||
| 17 |
// Steps Bloc |
|
| 18 |
$wcs-steps-background: transparent !default; |
|
| 19 |
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik |
|
| 20 | ||
| 21 |
// Step |
|
| 22 |
$wcs-step-color: #868686 !default; // color for default marker & label |
|
| 23 |
$wcs-step-current-color: $primary-color !default; |
|
| 24 |
$wcs-step-background: transparent !default; |
|
| 25 |
$wcs-step-current-background: $wcs-step-background !default; |
|
| 26 |
$wcs-step-border-bottom: 1px solid $wcs-step-color !default; |
|
| 27 |
$wcs-step-current-border-bottom: 3px solid $wcs-step-current-color !default; |
|
| 28 |
@if ($wcs-step-border-bottom == none) {
|
|
| 29 |
$wcs-step-current-border-bottom: none; |
|
| 30 |
} |
|
| 31 |
// Step option |
|
| 32 |
$wsc-step-before-piled: false !default; |
|
| 33 | ||
| 34 |
// marker |
|
| 35 |
$wcs-step-marker-color: $wcs-step-color !default; |
|
| 36 |
$wcs-step-current-marker-color: $wcs-step-current-color !default; |
|
| 37 |
$wcs-step-marker-background: $wcs-step-background !default; |
|
| 38 |
$wcs-step-current-marker-background: $wcs-step-current-background !default; |
|
| 39 |
// marker options |
|
| 40 |
$wcs-step-marker-size: 2.1em !default; |
|
| 41 |
$wcs-step-current-marker-enlarge: 1 !default; |
|
| 42 |
$wcs-step-marker-type: square !default; // square || tied || disc || disc tied |
|
| 43 |
$wcs-step-marker-tie-color: $wcs-step-color !default; |
|
| 44 |
$wcs-step-marker-tie-width: 5px !default; |
|
| 45 |
$wcs-step-marker-background-type: solid !default; |
|
| 46 | ||
| 47 |
// Label |
|
| 48 |
$wcs-step-current-label-color: $wcs-step-current-color !default; |
|
| 49 | ||
| 50 |
// Breakpoints between small & horizontal layout |
|
| 51 |
$bq-max--wcs-steps-small-layout: $very-small-limit !default; |
|
| 52 | ||
| 53 |
// UTILS for custom code |
|
| 54 |
// media queries between small & horizontal layout |
|
| 55 |
$mq-max--wcs-steps-small-layout: "max-width: #{$bq-max--wcs-steps-small-layout}";
|
|
| 56 |
$mq-min--wcs-steps-horizontal-layout: "min-width: #{$bq-max--wcs-steps-small-layout+1}";
|
|
| 57 |
// Desktop Steps orientation sass mixins |
|
| 58 |
// Steps orientations depend on media-queries & $form-sidebar-position |
|
| 59 |
@mixin desktop-horizontal-steps() {
|
|
| 60 |
@if ($form-sidebar-position == top) {
|
|
| 61 |
@media (min-width: $mobile-limit + 1) {
|
|
| 62 |
@content; |
|
| 63 |
} |
|
| 64 |
} |
|
| 65 |
} |
|
| 66 |
@mixin desktop-vertical-steps() {
|
|
| 67 |
@if ($form-sidebar-position == left or $form-sidebar-position == right) {
|
|
| 68 |
@media (min-width: $mobile-limit + 1) {
|
|
| 69 |
@content; |
|
| 70 |
} |
|
| 71 |
} |
|
| 72 |
} |
|
| 73 | ||
| 74 | ||
| 75 | ||
| 76 |
/* |
|
| 77 |
* Default Steps (with SQUARES markers) |
|
| 78 |
*/ |
|
| 79 | ||
| 80 |
/* Steps bloc */ |
|
| 81 |
.wcs-steps {
|
|
| 82 |
background: $wcs-steps-background; |
|
| 83 |
margin-bottom: 0.7rem; |
|
| 84 |
border-radius: $border-radius; |
|
| 85 | ||
| 86 |
@if $wcs-steps-background != transparent {
|
|
| 87 |
padding: $wcs-steps-spacing; |
|
| 88 |
} |
|
| 89 | ||
| 90 | ||
| 91 |
&--list {
|
|
| 92 |
margin: 0; |
|
| 93 |
padding: 0; |
|
| 94 |
list-style: none; |
|
| 95 |
color: $wcs-step-color; |
|
| 96 |
} |
|
| 97 |
} |
|
| 98 | ||
| 99 |
/* Step item */ |
|
| 100 |
.wcs-step {
|
|
| 101 |
border-radius: $border-radius; |
|
| 102 |
background-color: $wcs-step-background; |
|
| 103 |
display: flex; |
|
| 104 | ||
| 105 |
&--marker {
|
|
| 106 |
// marker is abbr tag |
|
| 107 |
text-decoration: none; |
|
| 108 |
box-sizing: border-box; |
|
| 109 | ||
| 110 |
font-size: 1em; |
|
| 111 |
line-height: nomal; |
|
| 112 |
text-align: center; |
|
| 113 |
|
|
| 114 |
display: flex; |
|
| 115 | ||
| 116 |
color: $wcs-step-marker-color; |
|
| 117 |
background: $wcs-step-marker-background; |
|
| 118 |
border-radius: $border-radius; |
|
| 119 | ||
| 120 |
width: $wcs-step-marker-size; |
|
| 121 |
height: $wcs-step-marker-size; |
|
| 122 |
flex: 0 0 $wcs-step-marker-size; |
|
| 123 |
|
|
| 124 |
&-nb {
|
|
| 125 |
margin: auto; |
|
| 126 |
} |
|
| 127 | ||
| 128 |
&-total {
|
|
| 129 |
display: none; |
|
| 130 |
} |
|
| 131 |
} |
|
| 132 | ||
| 133 |
&--label {
|
|
| 134 |
display: block; |
|
| 135 |
align-self: center; |
|
| 136 |
letter-spacing: 1px; |
|
| 137 |
line-height: 1.25; |
|
| 138 |
} |
|
| 139 | ||
| 140 | ||
| 141 |
// If step is current |
|
| 142 |
&.current {
|
|
| 143 |
font-weight: bold; |
|
| 144 |
background: $wcs-step-current-background; |
|
| 145 |
} |
|
| 146 | ||
| 147 |
&.current & {
|
|
| 148 |
&--marker {
|
|
| 149 |
background: $wcs-step-current-marker-background; |
|
| 150 |
color: $wcs-step-current-marker-color; |
|
| 151 | ||
| 152 |
transform: scale($wcs-step-current-marker-enlarge); |
|
| 153 |
} |
|
| 154 |
&--label {
|
|
| 155 |
color: $wcs-step-current-label-color; |
|
| 156 |
} |
|
| 157 |
} |
|
| 158 | ||
| 159 |
// If step is NOT current |
|
| 160 |
&:not(.current) & {
|
|
| 161 |
&--label {
|
|
| 162 |
display: none; |
|
| 163 |
} |
|
| 164 |
} |
|
| 165 |
} |
|
| 166 | ||
| 167 |
/* Sidebar on TOP, SMALL LAYOUT (very-small viewport) |
|
| 168 |
* Display only current step with nb and total in marker |
|
| 169 |
*/ |
|
| 170 |
@media ($mq-max--wcs-steps-small-layout) {
|
|
| 171 |
.wcs-step {
|
|
| 172 |
@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
|
|
| 173 |
padding: $wcs-steps-spacing; |
|
| 174 |
} |
|
| 175 | ||
| 176 |
&--marker {
|
|
| 177 | ||
| 178 |
$size: $wcs-step-marker-size + 0.8; |
|
| 179 | ||
| 180 |
width: $size; |
|
| 181 |
height: $size; |
|
| 182 |
flex: 0 0 auto; |
|
| 183 |
align-items: center; |
|
| 184 |
justify-content: center; |
|
| 185 | ||
| 186 |
&-nb {
|
|
| 187 |
margin: 0; |
|
| 188 |
transform: translateY(-0.5em); |
|
| 189 |
order: 1; |
|
| 190 |
} |
|
| 191 | ||
| 192 |
&-total {
|
|
| 193 |
display: block; |
|
| 194 |
transform: translateY(0.5em); |
|
| 195 |
font-size: 0.75em; |
|
| 196 |
font-weight: normal; |
|
| 197 |
order: 3; |
|
| 198 |
} |
|
| 199 | ||
| 200 |
// add slash |
|
| 201 |
&::before {
|
|
| 202 |
content: ""; |
|
| 203 |
display: block; |
|
| 204 |
flex: 0 0 0.1em; |
|
| 205 |
height: 2em; |
|
| 206 |
margin: 0 0.1em; |
|
| 207 |
background: $wcs-step-current-marker-color; |
|
| 208 |
transform: rotate(30deg); |
|
| 209 |
order: 2; |
|
| 210 |
} |
|
| 211 |
} |
|
| 212 | ||
| 213 |
&--label {
|
|
| 214 |
margin-left: $wcs-steps-spacing*2; |
|
| 215 |
} |
|
| 216 | ||
| 217 |
// If step is NOT current |
|
| 218 |
&:not(.current) {
|
|
| 219 |
display: none; |
|
| 220 |
} |
|
| 221 |
} |
|
| 222 |
} |
|
| 223 | ||
| 224 |
/* Horizontal Layout |
|
| 225 |
* Sidebar on TOP, SMALL and more viewport |
|
| 226 |
* Diplay all marker, but only current Label |
|
| 227 |
*/ |
|
| 228 |
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
| 229 | ||
| 230 |
.wcs-steps {
|
|
| 231 |
&--list {
|
|
| 232 |
position: relative; |
|
| 233 |
display: flex; |
|
| 234 |
flex-wrap: wrap; |
|
| 235 | ||
| 236 |
// keep space for label |
|
| 237 |
margin-bottom: 2em; |
|
| 238 |
} |
|
| 239 |
} |
|
| 240 | ||
| 241 |
.wcs-step {
|
|
| 242 |
margin-bottom: $wcs-steps-spacing; |
|
| 243 |
margin-right: $wcs-steps-spacing; |
|
| 244 |
border-bottom: $wcs-step-border-bottom; |
|
| 245 | ||
| 246 |
&--label {
|
|
| 247 |
position: absolute; |
|
| 248 |
top: 100%; |
|
| 249 |
left: 0; |
|
| 250 |
width: 100%; |
|
| 251 |
padding-bottom: $wcs-steps-spacing; |
|
| 252 |
} |
|
| 253 | ||
| 254 |
&.current {
|
|
| 255 |
border-bottom: $wcs-step-current-border-bottom; |
|
| 256 |
} |
|
| 257 |
} |
|
| 258 |
} |
|
| 259 | ||
| 260 | ||
| 261 |
@include desktop-horizontal-steps() {
|
|
| 262 |
.wcs-steps {
|
|
| 263 |
font-size: 1.25em; |
|
| 264 |
} |
|
| 265 |
.wcs-step {
|
|
| 266 |
margin-bottom: $wcs-steps-spacing*2; |
|
| 267 |
margin-right: $wcs-steps-spacing*2; |
|
| 268 |
} |
|
| 269 |
} |
|
| 270 | ||
| 271 |
/* Vertical Steps |
|
| 272 |
* Sidebar on LEFT or RIGHT, DESKTOP only |
|
| 273 |
* Display All steps with marker and label. One below the other. |
|
| 274 |
*/ |
|
| 275 |
@include desktop-vertical-steps() {
|
|
| 276 |
.wcs-steps {
|
|
| 277 |
font-size: 1.25em; |
|
| 278 | ||
| 279 |
&--list {
|
|
| 280 |
flex-wrap: nowrap; |
|
| 281 |
flex-direction: column; |
|
| 282 |
// remove keep space for label |
|
| 283 |
padding-bottom: 0; |
|
| 284 |
} |
|
| 285 |
} |
|
| 286 | ||
| 287 |
.wcs-step {
|
|
| 288 |
@if $wcs-step-border-bottom != none {
|
|
| 289 |
padding-bottom: $wcs-steps-spacing; |
|
| 290 |
} |
|
| 291 |
@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
|
|
| 292 |
padding: $wcs-steps-spacing; |
|
| 293 |
} |
|
| 294 | ||
| 295 |
margin-right: 0; |
|
| 296 | ||
| 297 |
&--label {
|
|
| 298 |
position: static; |
|
| 299 |
font-size: 0.7em; |
|
| 300 |
margin-left: $wcs-steps-spacing; |
|
| 301 |
padding-bottom: 0; |
|
| 302 |
} |
|
| 303 | ||
| 304 |
// If step is NOT current |
|
| 305 |
&:not(.current) & {
|
|
| 306 |
&--label {
|
|
| 307 |
display: block; |
|
| 308 |
} |
|
| 309 |
} |
|
| 310 |
} |
|
| 311 |
} |
|
| 312 | ||
| 313 | ||
| 314 |
/* |
|
| 315 |
* OPTION marker-background-type: gradient. |
|
| 316 |
* Generate automatically a gradient based on background-color |
|
| 317 |
*/ |
|
| 318 | ||
| 319 |
@if $wcs-step-marker-background-type == gradient {
|
|
| 320 |
.wcs-step {
|
|
| 321 |
&--marker {
|
|
| 322 |
background-attachment: fixed; |
|
| 323 |
@media (min-width: $very-small-limit + 1) {
|
|
| 324 |
background-image: linear-gradient(to right, lighten($wcs-step-marker-background, 10%), darken($wcs-step-marker-background, 10%)); |
|
| 325 |
} |
|
| 326 | ||
| 327 |
@include desktop-vertical-steps() {
|
|
| 328 |
background-image: linear-gradient(to bottom, lighten($wcs-step_marker-background, 10%), darken($wcs-step_marker-background, 10%)); |
|
| 329 |
} |
|
| 330 |
} |
|
| 331 |
} |
|
| 332 |
} |
|
| 333 | ||
| 334 |
/* |
|
| 335 |
* OPTION Pile Step Before |
|
| 336 |
* Work only for |
|
| 337 |
* * horizontal mode: desktop breakpoint and sidebar on left or right |
|
| 338 |
* * with background-color on step |
|
| 339 |
*/ |
|
| 340 |
@if ($wsc-step-before-piled ) {
|
|
| 341 |
@include desktop-vertical-steps() {
|
|
| 342 |
.wcs-step {
|
|
| 343 |
&:not(:first-child) {
|
|
| 344 |
&.step-before, |
|
| 345 |
&.current {
|
|
| 346 |
box-shadow: 0 -4px 4px -4px darken($wcs-step-background, 40%); |
|
| 347 |
} |
|
| 348 |
} |
|
| 349 | ||
| 350 |
&.step-before, |
|
| 351 |
&.current {
|
|
| 352 |
z-index: 1; |
|
| 353 |
transition: margin 400ms, box-shadow 400ms; |
|
| 354 |
} |
|
| 355 |
|
|
| 356 |
&.step-before {
|
|
| 357 |
margin-bottom: calc( (#{$wcs-step-marker-size} + #{$wcs-steps-spacing * 2}) / 2 * -1);
|
|
| 358 | ||
| 359 |
&:hover {
|
|
| 360 |
margin-bottom: $wcs-steps-spacing; |
|
| 361 | ||
| 362 |
& + .wcs-step {
|
|
| 363 |
box-shadow: 0 0 0 0 darken($wcs-step-background, 40%); |
|
| 364 |
} |
|
| 365 |
} |
|
| 366 |
} |
|
| 367 |
} |
|
| 368 |
} |
|
| 369 |
} |
|
| 370 | ||
| 371 | ||
| 372 |
/* |
|
| 373 |
* OPTION marker type DISC |
|
| 374 |
*/ |
|
| 375 |
@if (str-index(quote($wcs-step-marker-type), 'disc')) {
|
|
| 376 |
.wcs-step {
|
|
| 377 |
&--marker {
|
|
| 378 |
border-radius: 50% !important; |
|
| 379 | ||
| 380 |
@media ($mq-max--wcs-steps-small-layout) {
|
|
| 381 |
$size: $wcs-step-marker-size + 1.4; |
|
| 382 |
width: $size; |
|
| 383 |
height: $size; |
|
| 384 |
} |
|
| 385 |
} |
|
| 386 |
} |
|
| 387 |
} |
|
| 388 | ||
| 389 |
/* |
|
| 390 |
* OPTION marker type TIED |
|
| 391 |
*/ |
|
| 392 |
@if (str-index(quote($wcs-step-marker-type), 'tied')) {
|
|
| 393 |
|
|
| 394 |
.wcs-step {
|
|
| 395 |
&:not(:last-child) {
|
|
| 396 |
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
| 397 |
&::after {
|
|
| 398 |
content: ""; |
|
| 399 |
display: block; |
|
| 400 |
height: $wcs-step-marker-tie-width; |
|
| 401 |
flex: 0 0 100%; |
|
| 402 |
background-color: $wcs-step-marker-tie-color; |
|
| 403 |
margin: auto; |
|
| 404 |
} |
|
| 405 |
} |
|
| 406 | ||
| 407 |
@include desktop-vertical-steps() {
|
|
| 408 |
position: relative; |
|
| 409 | ||
| 410 |
&::after {
|
|
| 411 |
height: calc(100% + #{$wcs-steps-spacing});
|
|
| 412 |
width: $wcs-step-marker-tie-width; |
|
| 413 | ||
| 414 |
position: absolute; |
|
| 415 |
z-index: 1; |
|
| 416 |
top: $wcs-steps-spacing; |
|
| 417 |
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
|
|
| 418 | ||
| 419 |
@if $wcs-step-background != transparent {
|
|
| 420 |
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
|
|
| 421 |
} |
|
| 422 |
} |
|
| 423 |
} |
|
| 424 |
} |
|
| 425 | ||
| 426 |
&--marker {
|
|
| 427 |
position: relative; |
|
| 428 |
z-index: 2; |
|
| 429 |
} |
|
| 430 |
} |
|
| 431 |
} |
|
| templates/theme.html | ||
|---|---|---|
| 49 | 49 |
</div> |
| 50 | 50 | |
| 51 | 51 |
<div id="page" {% block page-args %}{% endblock %}>
|
| 52 |
<header role="banner"> |
|
| 52 |
<header role="banner" class="site-header">
|
|
| 53 | 53 |
<div id="header-wrapper" > |
| 54 | 54 |
{% block header-pre %}{% endblock %}
|
| 55 | 55 |
<div id="header"> |
| templates/wcs/front/formdata_steps.html | ||
|---|---|---|
| 1 |
<header id="steps" class="wcs-steps steps-{{page_labels|length}}">
|
|
| 2 |
<ol class="wcs-steps--list"> |
|
| 3 |
{% for page_label in page_labels %}
|
|
| 4 |
{% spaceless %}
|
|
| 5 |
<li {% if forloop.counter != current_page_no %}aria-hidden="true"{% endif %}
|
|
| 6 |
class="wcs-step |
|
| 7 |
{% if forloop.first %}first{% endif %}
|
|
| 8 |
{% if forloop.last %}last{% endif %}
|
|
| 9 |
{% if forloop.counter == current_page_no %}current{% endif %}
|
|
| 10 |
{% if forloop.counter < current_page_no %}step-before{% endif %}
|
|
| 11 |
{% if forloop.counter > current_page_no %}step-after{% endif %}" >
|
|
| 12 |
<abbr |
|
| 13 |
{% if forloop.counter == current_page_no %}
|
|
| 14 |
aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
|
|
| 15 |
title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
|
|
| 16 |
{% endif %}
|
|
| 17 |
class="marker wcs-step--marker"> |
|
| 18 |
<span class="wcs-step--marker-nb"> |
|
| 19 |
{{ forloop.counter }}
|
|
| 20 |
</span> |
|
| 21 |
<span class="wcs-step--marker-total"> |
|
| 22 |
{{ page_labels|length }}
|
|
| 23 |
</span> |
|
| 24 |
</abbr> |
|
| 25 |
<span class="label wcs-step--label">{{ page_label }}</span>
|
|
| 26 |
</li> |
|
| 27 |
{% endspaceless %}
|
|
| 28 |
{% endfor %}
|
|
| 29 |
</ol> |
|
| 30 |
</header> |
|
| 0 |
- |
|