NxTIC/css/layout.scss

@import 'constants';

body{

	font-family: 'Open Sans';
	font-size: 15px;
}



#WRAPPER{
	display: block;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background-color: $theme-bg;

	overflow-x: hidden;
	overflow-y: auto;

	z-index: 1;


	/* [1] Header de la page
	==========================================*/
	& > #HEADER{
		display: block;
		position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: calc( #{$header-height} - 1px );

		border-bottom: 1px solid darken($header-dark, 10);

		background-color: $header-dark;

		z-index: 100;

	}


	/* [2] Side-Menu de la page
	==========================================*/
	// Gestion du menu
	& > #MENU-SIDE{
		display: block;
		position: fixed;
			top: $header-height;
			left: 0;
			width: $menu-side-width;
			height: calc( 100% - #{$header-height} );

		box-shadow: 2px 1px 3px #ddd;

		background-color: #fff;

		@include transition( all .3s );

		z-index: 10;
	}


	/* [3] Container de la page
	==========================================*/
	& > #CONTAINER{
		display: flex;
		position: absolute;
			top: $header-height;
			left: $menu-side-width;
			width: calc( 100% - #{$menu-side-width} );
			min-height: calc( 100% - #{$header-height} );
		//  margin: 1em;

		// Flex properties
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;

		overflow-x: none;
		overflow-y: auto;
	}
}




/* [4] Page de login
=========================================================*/
#LOGIN{
	display: flex;
	position: fixed;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;

	// Quand la page de login est visible
	&.active{
		left: 0;
	}

	// flex properties
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;


	background-color: $dark-bg;

	@include transition( left .3s ease-in-out );

	z-index: 101;




	/* (1) Logo et nom du site */
	& > #login-icon{
		width: 35em;
		height: 10em;

		background: url('/f/svg/icon/st') center center no-repeat;
		background-size: auto 100%;
	}


	/* (2) Formulaire de connexion */
	& > #login-form{
		display: block;


		/* (2.1) Champs de texte (login/password) */
		& > input[type='text'],
		& > input[type='password'],
		& > input[type='submit']{
			display: flex;
				width: 20em;

			margin: 2em 0;
			padding: 1em 2em;

			// flex properties
			flex-direction: column;
			justify-content: space-around;
			flex-wrap: nowrap;
			align-items: middle;


			border-radius: 5px;
			border: 1px solid lighten($theme-fg, 10);

			background-color: $dark-bg;

			color: $dark-fg-primary;
			font-weight: bold;
			letter-spacing: .07em;

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

			cursor: default;

			// Animation de @hover/@focus
			&:hover,
			&:focus{
				border-color: $theme-fg-primary;
			}

		}


		/* (2.2) Bouton de connexion */
		& > input[type='submit']{
			width: 100%;
			margin: 2em 0;

			border: 0;

			background-color: $theme-fg-primary;

			color: $dark-fg-primary;
			font-weight: bold;
			text-align: left;

			cursor: pointer;

			// Animation de @hover
			&:hover{
				background-color: darken($theme-fg-primary, 10);
				box-shadow: 0 0 1em darken($dark-bg, 10);
			}

		}





		/* (3) Mot de passe oublie */
		& > #lost-password{
			color: $dark-fg;

			cursor: pointer;

			// Animation de @hover
			&:hover{
				color: $theme-fg-primary;
				text-decoration: underline;
			}
		}

	}

	/* (4) Gestion de la fermeture */
	& > #login-close{
		display: block;
		position: absolute;
			top: 2em;
			right: 2em;
			min-width: 2em;
			height: 2em;

		background: url('/f/svg/back/st/container/ffffff') right center no-repeat;
		background-size: 1em;

		color: #fff;
		padding-right: 2em;
		line-height: 2em;
		font-weight: bold;

		cursor: pointer;
	}
}