ptut-vhost/webpack/scss/menu.scss

96 lines
2.4 KiB
SCSS
Raw Permalink Normal View History

$menu-bg: #303030;
2018-02-20 18:37:45 +00:00
$menu-width: 3em;
$menu-outer-width: #{$menu-width + 1em};
#side-menu{
/* (1) Container
---------------------------------------------------------*/
display: flex;
position: absolute;
top: 0;
left: 0;
2018-02-20 18:37:45 +00:00
width: $menu-outer-width;
height: 100%;
background-color: $menu-bg;
// flex properties
flex-direction: column;
justify-content: space-around;
align-items: center;
/* (2) Items
---------------------------------------------------------*/
.item{
display: block;
2018-02-20 18:37:45 +00:00
width: $menu-width;
height: $menu-width;
border-radius: 3px / 3px;
box-shadow: inset 0 0 0 transparent;
2018-02-20 18:37:45 +00:00
background: 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@7992a3'); }
&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@7992a3'); }
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@7992a3'); }
&[data-icon='login']{ background-image: url('/asset/svg/login.svg@7992a3'); }
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@7992a3'); }
2018-02-20 18:37:45 +00:00
/* (2) On hover */
&:hover, &.active{
border: 1px solid lighten($menu-bg, 20%);
// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
2018-02-20 20:57:48 +00:00
box-shadow: 0 0 8px darken($menu-bg, 7%);
}
color: #4a71dd;
2018-02-20 18:37:45 +00:00
&[data-icon='home']:hover, &[data-icon='home'].active{ background-image: url('/asset/svg/home.svg@10d197'); }
&[data-icon='manage']:hover, &[data-icon='manage'].active{ background-image: url('/asset/svg/manage.svg@da5645'); }
&[data-icon='fiche']:hover, &[data-icon='fiche'].active{ background-image: url('/asset/svg/fiche.svg@4a71dd'); }
&[data-icon='login']:hover, &[data-icon='login'].active{ background-image: url('/asset/svg/login.svg@dab245'); }
&[data-icon='logout']:hover, &[data-icon='logout'].active{ background-image: url('/asset/svg/logout.svg@dab245'); }
/* (3) Label */
span{
// display: none;
display: block;
position: absolute;
margin-top: #{$menu-width / 5};
left: calc( -100% + .5em );
opacity: 0;
padding: .3em .7em;
background-color: $menu-bg;
color: #fff;
border-radius: 3px / 3px;
transition: all .2s ease-in-out;
z-index: -1;
}
/* (4) Display label on item hover */
&:hover span{
left: calc( 100% + .5em );
opacity: 1;
}
}
}