2018-02-20 18:00:09 +00:00
|
|
|
$menu-bg: #163042;
|
|
|
|
|
|
|
|
|
|
#side-menu{
|
|
|
|
|
|
|
|
|
|
/* (1) Container
|
|
|
|
|
---------------------------------------------------------*/
|
|
|
|
|
display: flex;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 4.5em;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
background-color: $menu-bg;
|
|
|
|
|
|
|
|
|
|
// flex properties
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
/* (2) Items
|
|
|
|
|
---------------------------------------------------------*/
|
|
|
|
|
.item{
|
|
|
|
|
display: block;
|
|
|
|
|
width: 3.5em;
|
|
|
|
|
height: 3.5em;
|
|
|
|
|
|
|
|
|
|
border-radius: 3px / 3px;
|
|
|
|
|
|
|
|
|
|
// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
|
|
|
|
|
|
|
|
|
|
background: url('/asset/svg/home.svg') center center no-repeat;
|
|
|
|
|
background-size: 50%;
|
|
|
|
|
|
|
|
|
|
border: 1px solid lighten($menu-bg, 5%);
|
|
|
|
|
|
|
|
|
|
transition: all .2s ease-in-out;
|
|
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
/* (1) Set icons */
|
|
|
|
|
&[data-icon='home']{ background-image: url('/asset/svg/home.svg'); }
|
|
|
|
|
&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg'); }
|
|
|
|
|
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg'); }
|
|
|
|
|
&[data-icon='login']{ background-image: url('/asset/svg/login.svg'); }
|
|
|
|
|
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg'); }
|
|
|
|
|
|
|
|
|
|
/* (2) On mouseover */
|
|
|
|
|
&:hover{
|
|
|
|
|
border: 1px solid lighten($menu-bg, 20%);
|
|
|
|
|
// box-shadow: inset 0 0 5px darken($menu-bg, 60%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (3) Label */
|
|
|
|
|
span{
|
|
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
// display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin-top: calc( 3.5em / 4 );
|
|
|
|
|
left: calc( 100% + .5em );
|
|
|
|
|
|
|
|
|
|
padding: .3em .7em;
|
|
|
|
|
|
|
|
|
|
background-color: $menu-bg;
|
|
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
border-radius: 3px / 3px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (4) Display label on item hover */
|
|
|
|
|
&:hover span{ display: block; }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
