mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update menu.scss

This commit is contained in:
xdrm-brackets 2018-02-20 19:37:45 +01:00
parent 2039965501
commit e3c47d3a36
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
webpack/scss/menu.scss
View File

@ -1,4 +1,6 @@
$menu-bg: #163042; $menu-bg: #163042;
$menu-width: 3em;
$menu-outer-width: #{$menu-width + 1em};
#side-menu{ #side-menu{
@ -8,7 +10,7 @@ $menu-bg: #163042;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 4.5em; width: $menu-outer-width;
height: 100%; height: 100%;
background-color: $menu-bg; background-color: $menu-bg;
@ -22,14 +24,14 @@ $menu-bg: #163042;
---------------------------------------------------------*/ ---------------------------------------------------------*/
.item{ .item{
display: block; display: block;
width: 3.5em; width: $menu-width;
height: 3.5em; height: $menu-width;
border-radius: 3px / 3px; border-radius: 3px / 3px;
// box-shadow: inset 0 0 5px darken($menu-bg, 6%); // box-shadow: inset 0 0 5px darken($menu-bg, 6%);
background: url('/asset/svg/home.svg') center center no-repeat; background: center center no-repeat;
background-size: 50%; background-size: 50%;
border: 1px solid lighten($menu-bg, 5%); border: 1px solid lighten($menu-bg, 5%);
@ -39,17 +41,20 @@ $menu-bg: #163042;
cursor: pointer; cursor: pointer;
/* (1) Set icons */ /* (1) Set icons */
&[data-icon='home']{ background-image: url('/asset/svg/home.svg'); } &[data-icon='home']{ background-image: url('/asset/svg/home.svg@bebedd'); }
&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg'); } &[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@bebedd'); }
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg'); } &[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@bebedd'); }
&[data-icon='login']{ background-image: url('/asset/svg/login.svg'); } &[data-icon='login']{ background-image: url('/asset/svg/login.svg@bebedd'); }
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg'); } &[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@bebedd'); }
/* (2) On mouseover */ /* (2) On hover */
&:hover{ &:hover{ border: 1px solid lighten($menu-bg, 20%); }
border: 1px solid lighten($menu-bg, 20%);
// box-shadow: inset 0 0 5px darken($menu-bg, 60%); &[data-icon='home']:hover{ background-image: url('/asset/svg/home.svg@dfdfee'); }
} &[data-icon='manage']:hover{ background-image: url('/asset/svg/manage.svg@dfdfee'); }
&[data-icon='fiche']:hover{ background-image: url('/asset/svg/fiche.svg@dfdfee'); }
&[data-icon='login']:hover{ background-image: url('/asset/svg/login.svg@dfdfee'); }
&[data-icon='logout']:hover{ background-image: url('/asset/svg/logout.svg@dfdfee'); }
/* (3) Label */ /* (3) Label */
span{ span{
@ -57,7 +62,7 @@ $menu-bg: #163042;
display: none; display: none;
// display: block; // display: block;
position: absolute; position: absolute;
margin-top: calc( 3.5em / 4 ); margin-top: #{$menu-width / 4};
left: calc( 100% + .5em ); left: calc( 100% + .5em );
padding: .3em .7em; padding: .3em .7em;