NxTIC/css/container.scss

@import 'constants.scss';

#WRAPPER > #CONTAINER{

	/* [1] Section (contenu)
	=========================================================*/
	& > section{
		display: none;

		margin: 3em;

		// Gestion de l'activation des sous-parties
		&.active{ display: block; }

		// Gestion d'une section contenant des graphiques
		&.charts{
			display: flex;

			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		position: relative;
		flex-grow: 1;

		padding: 1em;

		border-radius: 3px;

		background-color: #fff;

		color: #000;
		font-size: 1em;

		border: 1px solid #ddd;



		/* [2] Titres
		=========================================================*/
		& h6{
			color: lighten($theme-fg, 20);
			font-size: 1.2em;
			text-transform: uppercase;
			font-weight: 300;
			letter-spacing: .2em;

			margin: 0;
			padding: 0;

			&:before{content:'- ';}
			&:after{content:' -';}

			// quand centré
			&.center{
				text-align: center;
			}
		}





		/* [3][4] Boutons radio + Checkboxes
		=========================================================*/
		& input[type="radio"],
		& input[type="checkbox"]{
			display: none;
		}

		// Label
		& input[type="radio"] + label[for],
		& input[type="checkbox"] + label[for]{
			padding-left: .8em;

			// Pas de selection
			-webkit-touch-callout: none; /* iOS Safari          */
			-webkit-user-select:   none; /* Chrome/Safari/Opera */
			-khtml-user-select:    none; /* Konqueror           */
			-moz-user-select:      none; /* Firefox             */
			-ms-user-select:       none; /* IE/Edge             */
			user-select:           none; /* non-prefixed        */

			cursor: pointer;

			// Receptacle
			&:before{
				content: '';
				display: inline-block;
				position: relative;
					top: .1em;
					left: -.8em;
					width: calc( 1em - 2*.15em );
					height: calc( 1em - 2*.15em );

				border-radius: 50% / 50%;
				border: .15em solid $theme-fg-primary;

				background: #fff center center no-repeat;
				background-image: none;
				background-size: 70% auto;

				@include transition( background .2s ease-in-out );

				cursor: pointer;
			}

			// Animation de hover pour le texte
			&:hover,
			.hover{
				text-decoration: underline;
			}
		}

		// Quand actif
		& input[type="radio"]:checked + label[for]:before,
		& input[type="checkbox"]:checked + label[for]:before{
			background-color: $theme-fg-primary;
			background-image: url('/src/static/container/checked.svg');
		}


		// Specifique a checkbox
		& input[type="checkbox"] + label[for]:before{
			border-radius: 3px;
			@include transition( border .1s ease-in-out );
		}
		& input[type="checkbox"] + label[for]:hover:before{
			border-color: darken($theme-fg-primary, 15);
		}





		/* [5] Boutons de submit
		=========================================================*/
		& input[type="submit"],
		& input[type="button"]{
			padding: .2em .5em;
			margin: .5em 0;

			border-radius: 3px;
			border: 1px solid $theme-fg;

			color: $theme-fg;

			background-color: #fff;

			@include transition( background .1s ease-in-out, color .1s ease-in-out );

			/* (1) Animation de @hover */
			&:hover,
			&.hover{
				background-color: $theme-fg;
				color: #fff;
			}


			/* (2) Bouton primaire */
			&.primary{
				border-color: $theme-fg-primary;
				color: $theme-fg-primary;
				background-color: #fff;


				/* (3) Animation de @hover pour bouton primaire */
				&:hover,
				&.hover{
					background-color: $theme-fg-primary;
					color: #fff;
				}
			}


		}


		& input[type='text'],
		& input[type='number'],
		& input[type='date'],
		& input[type='time']{
			display: inline-block;
			padding: .2em .5em;
			margin: .5em 0;

			border-radius: 3px;
			border: 1px solid #777;
		}


		/* [6] Images inline
		=========================================================*/
		& img{
			margin: 1em;
			height: 3em;
		}

		/* [7] Contour flags
		=========================================================*/
		& .flag{
			margin: 0 .8em;
			padding: .2em .5em;

			border-radius: 5px;
			border: 1px solid #b5b5b5;

			color: #555;
			font-family: 'Inconsolata';
		}


		.flat-border{ border-radius: 0; }


	}

}