Projet

Général

Profil

0001-quimper-update-steps-36765.patch

Thomas Jund (congés, retour le 29/04), 26 novembre 2019 15:54

Télécharger (3,56 ko)

Voir les différences:

Subject: [PATCH] quimper: update steps (#36765)

 static/quimper/_custom.scss | 120 +++++++++++++++++-------------------
 static/quimper/_vars.scss   |   7 +++
 2 files changed, 63 insertions(+), 64 deletions(-)
static/quimper/_custom.scss
433 433
	}
434 434
}
435 435

  
436
// Steps
437
.wcs-steps {
438
	margin-bottom: 0;
439
	border-radius: 0;
440
	@include desktop-vertical-steps() {
441
		background-color: transparent;
442
	}
443
}
444
@media ($mq-max--wcs-steps-small-layout) {
445
	.wcs-steps {
446
		padding: 0;
447
	}
448
	.wcs-step {
449
		padding: $wcs-steps-spacing;
450
		padding-left: $wcs-steps-spacing*2;
451
		position: relative;
452
		&--marker {
453
			position: static;
454
			transform: none !important;
455
			height: auto;
456
			width: auto;
457
			font-size: 1.2em;
458
			&::before {
459
				display: none;
460
			}
461
			&-nb {
462
				transform: none;
463
			}
464
			&-total {
465
				box-sizing: border-box;
466
				transform: none;
467
				position: absolute;
468
				right: 0;
469
				top: 0;
470
				height: 100%;
471
				padding: $wcs-steps-spacing;
472
				font-weight: inherit;
473
				font-size: inherit;
474
				background-color: #ccc;
475
				color: #333;
476
				display: flex;
477
				align-items: center;
478
			}
479
		}
480
		&--label {
481
			text-transform: uppercase;
482
			font-weight: normal;
483
			color: #333 !important;
484
			font-size: 14px;
485
			padding-right: 2em;
486
			align-self: flex-end;
487
		}
488
	}
489
}
490

  
491

  
436 492
@media screen and (max-width: $mobile-limit) {
437 493
	br.clear {
438 494
		display: none;
......
516 572
			font-size: 14px;
517 573
		}
518 574
	}
519
	div#steps ol {
520
		font-size: 14px;
521
		height: 24px;
522
		overflow: hidden;
523
		background: #b3b3b3;
524
		li {
525
			padding: 0;
526
			float: left;
527
			span.marker {
528
				padding-top: 2px;
529
				display: inline-block;
530
				font-size: 18px;
531
				border: none;
532
				border-radius: 0;
533
			}
534
			span.label {
535
				display: none;
536
				position: relative;
537
				top: 3px;
538
			}
539
		}
540
		.current {
541
			.label {
542
				display: inline-block;
543
				max-width: 50vw;
544
				overflow: hidden;
545
				text-overflow: ellipsis;
546
			}
547
		}
548
		.step-before {
549
			span.marker {
550
				background: #333333;
551
				color: white;
552
			}
553
		}
554
		.current {
555
			span.label {
556
				color: #333333;
557
				text-transform: uppercase;
558
			}
559
		}
560
		.step-after {
561
			span.marker {
562
				background: #cccccc;
563
				color: #333333;
564
			}
565
		}
566
		.step-before, .step-after {
567
			display: none;
568
		}
569
		.first, .last {
570
			display: block;
571
			&.last {
572
				float: right;
573
			}
574
			&.last.current,
575
			&.last.first {
576
				float: left;
577
				span.label {
578
					max-width: 80vw;
579
				}
580
			}
581
		}
582
	}
583 575
	div.form-validation form,  // target form validation
584 576
	div#rub_service form[action="."] {  // target form pages
585 577
		div.buttons {
static/quimper/_vars.scss
8 8

  
9 9
$altgreen: #16c4b3;
10 10

  
11

  
11 12
$font-family: Roboto, sans-serif;
12 13
$primary-color: $green;
14
$mobile-limit: 800px;
13 15
$very-small-limit: 360px;
14 16
$width: 1280px;
15 17
$sidebar-width: 400px;
......
59 61

  
60 62
$carrousel-arrows: none;
61 63
$carrousel-text-position: bottom-left;
64

  
65
$wcs-steps-background: #b3b3b3;
66
$wcs-step-current-color: $mauve;
67
$wcs-steps-small-layout-limit: $mobile-limit;
68

  
62
-