update menu.scss
This commit is contained in:
parent
2039965501
commit
e3c47d3a36
|
@ -1,4 +1,6 @@
|
|||
$menu-bg: #163042;
|
||||
$menu-width: 3em;
|
||||
$menu-outer-width: #{$menu-width + 1em};
|
||||
|
||||
#side-menu{
|
||||
|
||||
|
@ -8,7 +10,7 @@ $menu-bg: #163042;
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4.5em;
|
||||
width: $menu-outer-width;
|
||||
height: 100%;
|
||||
|
||||
background-color: $menu-bg;
|
||||
|
@ -22,14 +24,14 @@ $menu-bg: #163042;
|
|||
---------------------------------------------------------*/
|
||||
.item{
|
||||
display: block;
|
||||
width: 3.5em;
|
||||
height: 3.5em;
|
||||
width: $menu-width;
|
||||
height: $menu-width;
|
||||
|
||||
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: center center no-repeat;
|
||||
background-size: 50%;
|
||||
|
||||
border: 1px solid lighten($menu-bg, 5%);
|
||||
|
@ -39,17 +41,20 @@ $menu-bg: #163042;
|
|||
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'); }
|
||||
&[data-icon='home']{ background-image: url('/asset/svg/home.svg@bebedd'); }
|
||||
&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@bebedd'); }
|
||||
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@bebedd'); }
|
||||
&[data-icon='login']{ background-image: url('/asset/svg/login.svg@bebedd'); }
|
||||
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@bebedd'); }
|
||||
|
||||
/* (2) On mouseover */
|
||||
&:hover{
|
||||
border: 1px solid lighten($menu-bg, 20%);
|
||||
// box-shadow: inset 0 0 5px darken($menu-bg, 60%);
|
||||
}
|
||||
/* (2) On hover */
|
||||
&:hover{ border: 1px solid lighten($menu-bg, 20%); }
|
||||
|
||||
&[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 */
|
||||
span{
|
||||
|
@ -57,7 +62,7 @@ $menu-bg: #163042;
|
|||
display: none;
|
||||
// display: block;
|
||||
position: absolute;
|
||||
margin-top: calc( 3.5em / 4 );
|
||||
margin-top: #{$menu-width / 4};
|
||||
left: calc( 100% + .5em );
|
||||
|
||||
padding: .3em .7em;
|
||||
|
|
Loading…
Reference in New Issue