NxTIC/css/timeline-form.scss

@import 'constants';

/* [1] Formulaire de type timeline
=========================================================*/
#WRAPPER > #CONTAINER section[data-timeline]{
	display: block;
	position: relative;

	background-color: #fff;

	font-size: .9em;
	color: #000;

	/* (1) On ajoute le liseré à droite pour TOUS les éléments */
	& *:not(.no-line){
		display: block;

		color: #333;

		margin: 0 20px;
		padding: 5px 60px;

		background: url('/f/svg/dot/st/container/66db70') 20px 0 no-repeat;
		background-size: 6px 100%;

	}


	/* (2) Titres de sections */
	& h4:not(.no-line){
		display: block;
		padding: 20px 60px;

		font-size: 1.4em;
		color: #333;
		font-weight: bold;

		background:	url('/f/svg/hole/st/container/66db70') 4px 18px no-repeat, // cercle
					url('/f/svg/hole/st/container/ffffff') 0px 14px no-repeat, // contour blanc
					url('/f/svg/dot/st/container/66db70') 20px 0 no-repeat;    // ligne
		background-size: 38px, 46px, 6px 100%;

		// Gestion du before (compteur css) //
		&[data-n]:before{
			content: attr(data-n);

			font-size: 1.3em;
			color: #fff;
			font-weight: bold;

			display: inline-block;
			position: absolute;
			left: 35px;
		}
	}

	/* (3) Titres des sous-sections */
	& h5:not(.no-line){
		display: block;

		padding: 20px 60px;

		font-size: 1.2em;
		color: darken(#66db70, 20);
		font-weight: bold;

		background:	url('/f/svg/hole/st/container/66db70') 8px 14px no-repeat, // cercle
					url('/f/svg/hole/st/container/ffffff') 4px 10px no-repeat, // contour blanc
					url('/f/svg/dot/st/container/66db70') 20px 0 no-repeat;    // ligne
		background-size: 30px, 38px, 6px 100%;

		// Gestion du before (compteur css) //
		&[data-icon]:before{
			content: attr(data-icon);

			font-size: 1em;
			font-family: 'icomoon';
			color: darken(#66db70, 30);
			font-weight: bold;

			display: inline-block;
			position: absolute;
			left: 35px;
		}
	}

	/* (4) 'Tags' -> textes sur le liseré gauche */
	& [data-tag]:before{
		content: attr(data-tag);

		display: inline-block;
		position: relative;
		// On place au centre de la ligne
		margin-left: -37px;
		padding: 5px;

		border: 5px solid #66db70;
		border-radius: 23px;
		box-shadow: 0 0 0 5px #fff;

		background-color: #fff;

		font-weight: bold;
		color: #66db70;

		// On centre sur la ligne
		transform: translateX(-50%);
	}




}