119 lines
3.3 KiB
SCSS
119 lines
3.3 KiB
SCSS
@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: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
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;
|
|
position: relative;
|
|
width: $menu-width;
|
|
height: $menu-width;
|
|
|
|
margin-top: .5em;
|
|
|
|
border-radius: 3px / 3px;
|
|
|
|
box-shadow: inset 0 0 0 transparent;
|
|
|
|
background: $menu-bg center center no-repeat;
|
|
background-size: auto 50%;
|
|
|
|
border: 1px solid lighten($menu-bg, 5%);
|
|
|
|
transition: all .2s ease-in-out;
|
|
|
|
cursor: pointer;
|
|
|
|
z-index: 1;
|
|
|
|
/* (1) Set icons */
|
|
&[data-icon='home']{ background-image: url('/asset/svg/home.svg@7992a3'); }
|
|
&[data-icon='teacher']{ background-image: url('/asset/svg/teacher.svg@7992a3'); }
|
|
&[data-icon='ue']{ background-image: url('/asset/svg/ue.svg@7992a3'); }
|
|
&[data-icon='settings']{ background-image: url('/asset/svg/settings.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'); }
|
|
|
|
/* (2) On hover */
|
|
&:hover, &.active{
|
|
border: 1px solid lighten($menu-bg, 20%);
|
|
// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
|
|
box-shadow: 0 0 8px darken($menu-bg, 7%);
|
|
}
|
|
|
|
color: #4a71dd;
|
|
|
|
&[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@b7b7b7'); }
|
|
&[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'); }
|
|
|
|
/* (3) Label */
|
|
&:after{
|
|
|
|
content: attr(data-label);
|
|
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
opacity: 0;
|
|
|
|
padding: .3em .7em;
|
|
|
|
background-color: $menu-bg;
|
|
|
|
color: #fff;
|
|
|
|
border-radius: 3px / 3px;
|
|
|
|
transform: translateX(-100%) translateY(-50%);
|
|
|
|
// 1 line only
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
z-index: -1;
|
|
}
|
|
|
|
/* (4) 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;
|
|
}
|
|
|
|
}
|
|
|
|
} |