sid/css/menu.css

*
*  Gestion complète du MENU
*  -------------------------------------
*  1. propriétés complémentaires #MENU
*  2. position textes
*  3. icônes
*  4. Labels
*
*/




/*******************************************/
/*** 1. Propriétés complémentaires #MENU ***/
/*******************************************/
#MENU{}



/**************************/
/*** 2. Position textes ***/
/**************************/
#MENU li{
	/* position */
	display: block;  
	position: relative;
		margin: .75em; 
		width: 4em; /* 5.5 - 1.5 */
		height: 4em;

	/* border */
	border-radius: .3em;

	/* background */
	background: center center no-repeat;
	background-size: auto 2.2em;

	/* Xtra */
	cursor: pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

	/* animation */
	transition: all 0s, background-color .2s ease-in-out;
	-moz-transition: all 0s, background-color .2s ease-in-out;
	-webkit-transition: all 0s, background-color .2s ease-in-out;
	-ms-transition: all 0s, background-color .2s ease-in-out;
	-o-transition: all 0s, background-color .2s ease-in-out;
}



/*****************/
/*** 3. Icônes ***/
/*****************/
/* dernier en bas */
#MENU li:last-child{ align-self: flex-start; }

/* icônes de base */
#MENU li[data-link='home']          { background-image: url(../src/menu_icon/home_grayscale.svg);           }
#MENU li[data-link='groups']        { background-image: url(../src/menu_icon/groups_grayscale.svg);         }
#MENU li[data-link='ue']            { background-image: url(../src/menu_icon/ue_grayscale.svg);             }
#MENU li[data-link='modules']       { background-image: url(../src/menu_icon/modules_grayscale.svg);        }
#MENU li[data-link='marks']         { background-image: url(../src/menu_icon/marks_grayscale.svg);          }
#MENU li[data-link='settings']      { background-image: url(../src/menu_icon/settings_grayscale.svg);       }
#MENU li[data-link='auth']          { background-image: url(../src/menu_icon/auth_grayscale.svg);           }

/* HOVER ou active (page courante) */
#MENU li:hover, #MENU li.active{
	color: #fff;
	background-color: rgba(0,0,0,.3);
}

/* icône quand HOVER ou .active */
#MENU li[data-link='home']:hover     , #MENU li[data-link='home'].active      { background-image: url(../src/menu_icon/home.svg);      }
#MENU li[data-link='groups']:hover   , #MENU li[data-link='groups'].active    { background-image: url(../src/menu_icon/groups.svg);    }
#MENU li[data-link='ue']:hover       , #MENU li[data-link='ue'].active        { background-image: url(../src/menu_icon/ue.svg);        }
#MENU li[data-link='modules']:hover  , #MENU li[data-link='modules'].active   { background-image: url(../src/menu_icon/modules.svg);   }
#MENU li[data-link='marks']:hover    , #MENU li[data-link='marks'].active     { background-image: url(../src/menu_icon/marks.svg);     }
#MENU li[data-link='settings']:hover , #MENU li[data-link='settings'].active  { background-image: url(../src/menu_icon/settings.svg);  }
#MENU li[data-link='auth']:hover     , #MENU li[data-link='auth'].active      { background-image: url(../src/menu_icon/auth.svg);      }


/* le séparateur qui remplit l'espace entre le haut et le bas */
#MENU li.fill{
	flex-grow: 1;
	opacity: 0;
	cursor: default;
}



/*****************/
/*** 4. Labels ***/
/*****************/
#MENU li[data-text]::before{ /* affichage du texte */
	content: attr(data-text);

	/* position */
	display: block;
	position: absolute;
		top: .4em;
		left: 6em;
		width: auto;
		width: 0;
		height: 3em;
	padding: 0 0;

	/* border */
	border-radius: 5px;

	/* background */
	background: #232323;

	/* foreground */
	line-height: 3em;

	/* animation */
	transition: .1s ease-out;
	-moz-transition: .1s ease-out;
	-webkit-transition: .1s ease-out;
	-ms-transition: .1s ease-out;
	-o-transition: .1s ease-out;

	/* overflow */
	overflow: hidden;

	/* z axis */
	z-index: -1;
}



#MENU li[data-text]::after{ /* petite flèche */
	content: '';

	/* position */
	display: none;
	position: absolute;
	top: 1.16em;
	left: 5.7em;

	/* border */
	border-style: solid;
	border-width: .8em .8em .8em 0;
	border-color: transparent #232323 transparent transparent;

	/* animation */
	transition: .2s ease-in;
	-moz-transition: .2s ease-in;
	-webkit-transition: .2s ease-in;
	-ms-transition: .2s ease-in;
	-o-transition: .2s ease-in;

	/* z axis */
	z-index: -1;
}



/* lors du survol */

#MENU li[data-text]:hover::before{ width: auto; left: 6em; padding: 0 1em; } /* affichage du texte */

#MENU li[data-text]:hover::after{ display: block; }                 /* affichage de la petite flèche