diff --git a/public_html/asset/svg/login.svg b/public_html/asset/svg/login.svg index 1c0d830..8c1bdd0 100644 --- a/public_html/asset/svg/login.svg +++ b/public_html/asset/svg/login.svg @@ -7,17 +7,25 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - style="enable-background:new 0 0 139 139;" + viewBox="0 0 32 32" version="1.1" - viewBox="0 0 139 139" - xml:space="preserve" - id="svg37" + id="svg11" sodipodi:docname="login.svg" - inkscape:version="0.92.2 5c3e80d, 2017-08-06">image/svg+xml + + + + image/svg+xml + + + + + + + + <g + data-name="Layer 8" + id="Layer_8"> + <path + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" + d="M 16,0 C 7.1752886,0 0,7.1752886 0,16 0,24.824711 7.1752886,32 16,32 24.824711,32 32,24.824711 32,16 32,7.1752886 24.824711,0 16,0 Z m 0,2 C 23.743831,2 30,8.2561689 30,16 30,23.743831 23.743831,30 16,30 8.2561689,30 2,23.743831 2,16 2,8.2561689 8.2561689,2 16,2 Z m 0,4 c -2.749579,0 -5,2.2504209 -5,5 0,2.749579 2.250421,5 5,5 2.749579,0 5,-2.250421 5,-5 0,-2.7495791 -2.250421,-5 -5,-5 z m 0,2 c 1.668699,0 3,1.3313011 3,3 0,1.668699 -1.331301,3 -3,3 -1.668699,0 -3,-1.331301 -3,-3 0,-1.6686989 1.331301,-3 3,-3 z m -4.177734,9 C 9.7734595,16.954469 8.0518488,18.595876 8,20.644531 a 1.0001,1.0001 0 0 0 0,0.02539 v 1 a 1.0001,1.0001 0 0 0 0.2226562,0.628906 c 3.9886668,4.935724 11.5660208,4.935724 15.5546878,0 A 1.0001,1.0001 0 0 0 24,21.669922 v -0.01953 -1 a 1.0001,1.0001 0 0 0 0,-0.0332 C 23.933531,18.579034 22.216455,16.954262 20.177734,17 Z m -0.04492,2 a 1.0001,1.0001 0 0 0 0.02344,0 h 8.398438 a 1.0001,1.0001 0 0 0 0.02344,0 C 21.187951,18.978344 21.968528,19.716608 22,20.681641 v 0.535156 c -3.193051,3.673896 -8.806949,3.673896 -12,0 V 20.695312 C 10.024557,19.725011 10.806971,18.978435 11.777344,19 Z" id="fill-edit" - inkscape:connector-curvature="0" /></g></svg> \ No newline at end of file + inkscape:connector-curvature="0" /> + </g> +</svg> diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss index 7213753..dd47959 100644 --- a/webpack/scss/menu.scss +++ b/webpack/scss/menu.scss @@ -1,4 +1,4 @@ -$menu-bg: #163042; +$menu-bg: #303030; $menu-width: 3em; $menu-outer-width: #{$menu-width + 1em}; @@ -29,7 +29,7 @@ $menu-outer-width: #{$menu-width + 1em}; border-radius: 3px / 3px; - // box-shadow: inset 0 0 5px darken($menu-bg, 6%); + box-shadow: inset 0 0 0 transparent; background: center center no-repeat; background-size: 50%; @@ -41,29 +41,36 @@ $menu-outer-width: #{$menu-width + 1em}; cursor: pointer; /* (1) Set icons */ - &[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'); } + &[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'); } /* (2) On hover */ - &:hover{ border: 1px solid lighten($menu-bg, 20%); } + &:hover, &.active{ + border: 1px solid lighten($menu-bg, 20%); + // box-shadow: inset 0 0 5px darken($menu-bg, 6%); + box-shadow: 0 0 10px darken($menu-bg, 10%); + } - &[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'); } + color: #4a71dd; + + &[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; + // display: none; + display: block; position: absolute; - margin-top: #{$menu-width / 4}; - left: calc( 100% + .5em ); + margin-top: #{$menu-width / 5}; + left: calc( -100% + .5em ); + opacity: 0; padding: .3em .7em; @@ -73,10 +80,16 @@ $menu-outer-width: #{$menu-width + 1em}; border-radius: 3px / 3px; + transition: all .2s ease-in-out; + + z-index: -1; } /* (4) Display label on item hover */ - &:hover span{ display: block; } + &:hover span{ + left: calc( 100% + .5em ); + opacity: 1; + } }