@import 'constants';

/* [1] Formulaire de type timeline
=========================================================*/
#WRAPPER > #CONTAINER section[data-timeline].facebook{



	/* Animation de .active*/
	& input[type='file'].active + span.file-input{
		background: $timeline-fb;
	}

	/* (7) Inputs de type text */
	& input[type='text'],
	& input[type='password'],
	& input[type='number'],
	& input[type='button'],
	& input[type='submit'],
	& input[type='mail']{
		/* Animation de @focus*/
		&:focus{
			border-color: $timeline-fb;
		}
	}

	// Boutons
	& input[type='submit']{
		border-color: darken($timeline-fb, 20);

		background: $timeline-fb;


		// Animation de @hover pour les boutons
		&:hover,
		&:focus{
			background: darken($timeline-fb, 5);
		}
	}





	& .select-container select{

		// Animation de @focus
		&:focus{
			border-color: $timeline-fb;
			background-image:url('/src/static/container/bottom_arrow@#{color-str($timeline-fb)}.svg');
		}

	}

	/* (12) Gestion des coloris pour les titres */
	& h5.color0,
	& h4.color0,
	& h3.color0{
		color: $timeline-0;
		&:before,&:after{
			background-color: $timeline-0;
		}
	}

	& h5.color1,
	& h4.color1,
	& h3.color1{
		color: $timeline-1;
		&:before,&:after{
			background-color: $timeline-1;
		}
	}

	& h5.color2,
	& h4.color2,
	& h3.color2{
		color: $timeline-fb;
		&:before,&:after{
			background-color: $timeline-fb;
		}
	}

	& h5.color3,
	& h4.color3,
	& h3.color3{
		color: $timeline-3;
		&:before,&:after{
			background-color: $timeline-3;
		}
	}

	& h5.color4,
	& h4.color4,
	& h3.color4{
		color: $timeline-4;
		&:before,&:after{
			background-color: $timeline-4;
		}
	}


	/* (13) Gestion de la navigation fléchée */
	& .arrow-container{

		& span{

			// Animation quand la page est validée
			&.done{
				color: $timeline-fb;

				// Animation de hover
				&:hover,
				&.active{
					color: #fff;
					border-color: $timeline-fb;
					background: $timeline-fb;
				}
			}

		}

	}

}