ptut-vhost/webpack/scss/menu.scss

111 lines
3.3 KiB
SCSS
Raw Permalink Normal View History

2018-02-28 12:00:51 +00:00
@import 'constants';
@keyframes menu-label{
0%{ display: none; opacity: 0; left: 0; transform: translateX(-100%) translateY(-50%); }
1%{ display: block; }
80%{ opacity: 0; }
100%{ opacity: 1; left: calc( 100% + 1em ); transform: translateX(0) translateY(-50%); }
}
#side-menu{
/* (1) Container
---------------------------------------------------------*/
display: flex;
position: fixed;
top: $header-height;
left: 0;
width: calc( #{$menu-width} - 1px );
height: calc( 100% - #{$header-height} );
background-color: $menu-bg;
border-right: 1px solid #e3e7eb;
// flex properties
flex-direction: column;
justify-content: space-around;
// justify-content: flex-start;
align-items: center;
z-index: 101;
/* (2) Items
---------------------------------------------------------*/
.item{
display: block;
position: relative;
width: $menu-item-width;
height: $menu-item-width;
2018-02-28 12:00:51 +00:00
margin: .5em;
background: $menu-bg center center no-repeat;
2018-02-28 12:00:51 +00:00
background-size: auto 50%;
transition: background-position .1s ease-in-out;
cursor: pointer;
z-index: 1;
/* (1) Set icons */
&[data-icon='home']{ background-image: url('/asset/svg/home.svg@#{$menu-item-inactive}'); }
&[data-icon='teacher']{ background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}'); }
&[data-icon='ue']{ background-image: url('/asset/svg/ue.svg@#{$menu-item-inactive}'); }
&[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@#{$menu-item-inactive}'); }
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@#{$menu-item-inactive}'); }
&[data-icon='login']{ background-image: url('/asset/svg/login.svg@#{$menu-item-inactive}'); }
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@#{$menu-item-inactive}'); }
2018-02-20 18:37:45 +00:00
2018-02-28 12:00:51 +00:00
&[data-icon='home']:hover, &[data-icon='home'].active{ background-image: url('/asset/svg/home.svg@10d197'); }
&[data-icon='teacher']:hover, &[data-icon='teacher'].active{ background-image: url('/asset/svg/teacher.svg@edb910'); }
&[data-icon='ue']:hover, &[data-icon='ue'].active{ background-image: url('/asset/svg/ue.svg@1fc9ef'); }
&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@dab245'); }
2018-02-28 12:00:51 +00:00
&[data-icon='fiche']:hover, &[data-icon='fiche'].active{ background-image: url('/asset/svg/fiche.svg@ea4C3a'); }
&[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'); }
/* (2) Label */
&:after{
content: attr(data-label);
display: none;
position: absolute;
top: 50%;
left: 0;
opacity: 0;
padding: .3em .7em;
background-color: #333;
border: 1px solid #222;
color: #ccc;
border-radius: 3px / 3px;
transform: translateX(-100%) translateY(-50%);
2018-02-28 12:00:51 +00:00
// 1 line only
white-space: nowrap;
overflow: hidden;
z-index: -1;
}
/* (3) Display label on item hover */
&:hover:after{
display: block;
left: calc( 100% + 1em );
opacity: 1;
transform: translateX(0) translateY(-50%);
animation: menu-label .2s ease-in-out 0s;
}
}
}