170 lines
4.6 KiB
CSS
Executable File
170 lines
4.6 KiB
CSS
Executable File
|
|
*
|
|
* 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 |