Produits Entr'ouvert » Intégrations graphiques Publik

div#steps {

	padding: 0 1em;

	ol li {

		@include flexbox();

		@include flex-direction(column);

		margin: 25px 0;

		padding: 0.5ex;

		position: relative;

		border: 0;

		span.marker {

			@include justify-content(center);

			display: inline-flex;

			margin: 0 auto;

			align-items: center;

			width: 5vw;

			height: 5vw;

			color: gray;

			position: relative;

			border: 1px solid gray;

			border-radius: 50%;

			background: transparent;

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

			font-weight: bold;

			text-align: center;

			vertical-align: middle;

			max-width: 60px;

			max-height: 60px;

			&::before {

				display: block;

				content: ' ';

				border-radius: 50%;

				position: absolute;

				background: $button-background;

				z-index: -1;

				padding: 6px;

			}

		}

		span.label {

			display: table-cell;

			margin: 0 -1em;

			text-align: center;

			vertical-align: middle;

		}

		&.current {

			background: transparent;

			font-weight: bold;

			span.label {

				color: $title-color;

			}

			span.marker {

				color: white;

				border-color: $primary-color;

				background: $primary-color;

			}

		}

	}

}

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

	div#gauche div#steps {

		@include order(2);

		padding: 0;

		ol {

			@include flexbox();

			@include flex-direction(row);

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

			@include justify-content(center);

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

			li {

				padding: 0 0.6em 1ex 0;

				span.marker {

					border-radius: 50%;

					padding: 0.3em;

					font-weight: normal;

				}

				span.label {

					display: none;

				}

			}

		}

	}

}