Produits Entr'ouvert » Intégrations graphiques Publik

@import 'flexbox_mixins';

$circle-steps-container-padding: 0 3em !default;

$circle-steps-container-mobile-padding: 1em 0 !default;

$circle-steps-margin: 25px 0 !default;

$circle-steps-padding: 0.5ex !default;

$circle-steps-marker-margin: 0 auto !default;

$circle-steps-marker-color: gray !default;

$circle-steps-marker-background: transparent !default;

$circle-steps-marker-border: 1px solid gray !default;

$circle-steps-marker-diameter: 4vw !default;

$circle-steps-with-lines: true !default;

$circle-steps-lines-color: $primary-color !default;

$circle-steps-label-margin: 1em !default;

$circle-steps-label-transform: uppercase !default;

$circle-steps-label-color: #868686 !default;

$circle-steps-current-background: white !default;

$circle-steps-current-marker-color: white !default;

$circle-steps-current-marker-background: $primary-color !default;

$circle-steps-mobile-padding: 0 0.6em 1ex 0 !default;

$circle-steps-mobile-marker-diameter: 4rem !default;

/* steps */

@if $circle-steps {

	div#steps {

		padding: $circle-steps-container-padding;

		ol li {

			@include flexbox();

			@include flex-direction(column);

			margin: $circle-steps-margin;

			padding: $circle-steps-padding;

			position: relative;

			border: 0;

			@if $circle-steps-with-lines {

				&.first {

					span.marker::after {

						display: none;

					}

				}

				span.marker::after {

					content: ' ';

					position: absolute;

					height: 50%;

					width: 1px;

					bottom: 100%;

					right: 50%;

					background-color: $circle-steps-marker-color;

					padding: 0;

				}

			}

			span.marker {

				@include justify-content(center);

				@include vendor-prefix(align-items, center);

				display: inline-flex;

				margin: $circle-steps-marker-margin;

				position: relative;

				color: $circle-steps-marker-color;

				background: $circle-steps-marker-background;

				border: $circle-steps-marker-border;

				border-radius: 50%;

				font-size: calc(12px + 1.2vw);

				font-weight: bold;

				text-align: center;

				vertical-align: middle;

				width: $circle-steps-marker-diameter;

				height: $circle-steps-marker-diameter;

				// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)

				max-width: 100%;

				max-height: 100%;

				box-sizing: border-box;

				// hide the colored circle

				&::before {

					display: none;

				}

			}

			span.label {

				margin: $circle-steps-label-margin;

				color: $circle-steps-label-color;

				text-align: center;

				vertical-align: middle;

				text-transform: $circle-steps-label-transform;

			}

			&.current {

				background: $circle-steps-current-background;

				font-weight: bold;

				span.label {

					color: $title-color;

				}

				span.marker {

					color: $circle-steps-current-marker-color;

					border-color: $circle-steps-current-marker-background;

					background: $circle-steps-current-marker-background;

				}

			}

		}

	}

	@media screen and (max-width: $mobile-limit) {

		div#gauche div#steps {

			@include order(1);

			padding: $circle-steps-container-mobile-padding;

			ol {

				@include flexbox();

				@include flex-direction(row);

				@include justify-content(center);

				@include vendor-prefix(flex-flow, nowrap);

				@include vendor-prefix(align-items, center);

				// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)

				max-width: 100%;

				max-height: 100%;

				box-sizing: border-box;

				li {

					padding: $circle-steps-mobile-padding;

					span.marker {

						border-radius: 50%;

						padding: 2px 9px;

						width: $circle-steps-mobile-marker-diameter; // reset size without vw

						height: $circle-steps-mobile-marker-diameter;

						@if $circle-steps-with-lines {

							&::after {

								content: ' ';

								position: absolute;

								height: 1px;

								width: 10px;

								bottom: 50%;

								padding: 0;

								left: -10px;

							}

						}

					}

					// hide steps label on little screens

					span.label {

						display: none;

					}

				}

			}

		}

	}

} @else {

	div#steps ol {

		margin: 0;

		padding: 0;

		text-align: left;

		list-style: none;

		color: #868686;

		& li {

			border: 0;

			border-bottom: 1px solid #CCC;

			margin-bottom: 2ex;

			border-radius: $border-radius;

			padding: 1ex;

			letter-spacing: 1px;

		}

		& li.current {

			border: 0;

			background: $title-background;

			color: $title-color;

			& span.label {

				font-weight: bold;

			}

		}

		& li span.marker {

			display: block;

			font-size: 250%;

		}

	}

}

@import 'form-steps';

$circle-steps: false !default;

	@media screen and (max-width: $mobile-limit) {

		div#gauche {

			float: none;

			width: 100%;

		}

		div#side {

			display: flex;

			flex-direction: column;

			& > div { flex: 1 0 auto; }

		}

		div#tracking-code {

			font-size: 80%;

			order: 1;

			h3 { display: inline-block; }

			.text-tracking-code-short-text { display: none; }

		}

		div#steps {

			position: static;

			color: #aaa;

			white-space: nowrap;

			overflow: hidden;

			width: 100%;

			& ol {

				padding: 0 0;

				margin: 0;

				text-align: left;

				& li {

					border: none;

					display: inline-block;

					margin: 0;

					padding: 0 1em 1ex 0;

					list-style: none;

					border-radius: 0;

					& span.marker {

						float: none;

						display: inline;

						font-size: 26px;

						position: static;

						padding: 2px 9px;

						font-weight: bold;

						color: white;

						text-align: center;

						background: #ddd;

						border-radius: $border-radius;

						border: 1px solid #ddd;

					}

				& li.current {

					background: inherit;

					color: inherit;

					& span.label {

						font-weight: normal;

					}

					& span.marker {

						background: $title-background;

						color: $title-color;

						border-radius: $border-radius;

					}

				& li.step-before .label {

					display: none;