SMMP/css/layout.scss

$theme-color: #f97a53;
$theme-color: #5395f9;

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

	background-color: #edf0f5;

	font-family: 'Ubuntu';

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

		border-bottom: 1px solid darken($theme-color, 10);

		background-color: $theme-color;

		z-index: 10;

		// Icone du site
		& > .icon{
			display: block;
			position: absolute;
				top: 0;
				left: 0;
				width: 4em;
				height: 4em;

			background-color: darken($theme-color, 10);
			background-image: url('../src/static/icon.svg');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 50% 50%;

			cursor: pointer;

			transition: all .3s;

			// @hover
			&:hover{
				background-color: darken($theme-color, 15);
			}

		}

	}

	
	/* [2] Side-Menu de la page
	==========================================*/	
	// Gestion du menu
	& > #MENU-SIDE{
		display: block;
		position: absolute;
			top: 4em;
			left: 0;
			width: 4em;
			height: 100%;

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

		background-color: #fff;

		transition: all .3s;

		z-index: 9;


		& > span[data-link]{
			display: block;
			position: relative;
				width: calc( 4em - 2*.7em - 2*.55em - 2*.01em );
				height: calc( 4em - 2*.7em - 2*.55em - 2*.01em );

			// padding: 1em;
			margin: 2em .7em;
			padding: .55em;

			border: .01em solid transparent;
			border-radius: 2px;
			

			color: #a2a2a2;
			line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em );

			transition: color .3s, border .3s;

			cursor: pointer;
			
			svg, svg *{
				width: 1.5em;
				height: 1.5em;
				
				stroke: none !important;
				fill: #444 !important;

				transition: fill .3s;
			}


			&[data-desc]:after{
				content: attr(data-desc);
				display: block;
				position: absolute;
					top: calc( .7em - 2*.3em );
					left: calc( 4.6em - 2*.3em );
				padding: .3em;

				border-radius: 3px;

				background-color: #2a2a2a;

				color: #e2e2e2;

				transition: transform .1s;
				
				transform-origin: 0 0;
				transform: scaleX(0);

			}


			&:hover{
				border-color: #e6e6e6;
				box-shadow: inset 0 0 .5em #eee;

				&:after{
					transform: scaleX(1);
					color: #fff;
				}

				svg, svg *{
					fill: $theme-color !important;
				}
			}


			&.active{
				border-color: #e6e6e6;

				svg, svg *{
					fill: $theme-color !important;
				}
			}

		}
		

	}

	// Gestion du menu hover
	& > #MENU-SIDE > span[data-link]:hover{
		color: darken(#a2a2a2, 30);
	}
	

	/* [3] Container de la page
	==========================================*/
	& > #CONTAINER{
		display: block;
		position: absolute;
			top: 4em;
			left: 4em;
			width: calc( 100% - 4em - 2*1em );
			height: calc( 100% - 4em - 2*1em );
		padding: 1em;

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