SMMP/css/container.scss

@import 'constants';

#WRAPPER > #CONTAINER{

	/**************************/
	/* Menu interne (submenu) */
	/**************************/
	& > .sub-menu-side{
		display: block;
		position: relative;

		// Les liens du menu
		& > span[data-sublink]{
			display: block;
			position: relative;

			padding: .3em 1.5em;
			margin: 1em 0;
			
			border-radius: 3px;

			background: url('../src/?static/sub-menu-side.svg') left .25em center no-repeat;
			background-size: 1.1em;
			
			color: $sub-menu-color;
			text-shadow: 1px 1px white;
			white-space: nowrap;

			transition: all .2s;

			cursor: pointer;

			// Dimension/Position des svg (icones)
			& > .svg > svg{
				display: inline-block;
				position: absolute;
					left: .25em;
					top: 50%;
					width: 1em;
					height: 1em;

				transform: translateY(-50%);

				// Coloration pour tous les elements du svg
				& path{
					fill: $sub-menu-color !important;
				}
			}
			

			&:hover,
			&.active{
				color: darken($sub-menu-color, 30);
				background-color: #d8deea;
				box-shadow: inset 0 0 4px #c8ced9;

				& > .svg > svg path{
					fill: darken($sub-menu-color, 30) !important;
				}

			}

		}
		
	}


}