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

updated login.svg asset + menu nice animations

This commit is contained in:
xdrm-brackets 2018-02-20 21:32:03 +01:00
parent bd4558d1e4
commit d2e7c1d5ea
2 changed files with 67 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
public_html/asset/svg/login.svg
View File

@ -7,17 +7,25 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
style="enable-background:new 0 0 139 139;" viewBox="0 0 32 32"
version="1.1" version="1.1"
viewBox="0 0 139 139" id="svg11"
xml:space="preserve"
id="svg37"
sodipodi:docname="login.svg" sodipodi:docname="login.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata inkscape:version="0.92.2 5c3e80d, 2017-08-06">
id="metadata43"><rdf:RDF><cc:Work <metadata
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type id="metadata17">
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs <rdf:RDF>
id="defs41" /><sodipodi:namedview <cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff" pagecolor="#ffffff"
bordercolor="#666666" bordercolor="#666666"
borderopacity="1" borderopacity="1"
@ -26,69 +34,26 @@
guidetolerance="10" guidetolerance="10"
inkscape:pageopacity="0" inkscape:pageopacity="0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:window-width="812" inkscape:window-width="1920"
inkscape:window-height="480" inkscape:window-height="1015"
id="namedview39" id="namedview13"
showgrid="false" showgrid="false"
inkscape:zoom="1.6978417" inkscape:zoom="7.375"
inkscape:cx="69.5" inkscape:cx="16"
inkscape:cy="69.5" inkscape:cy="16"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="29" inkscape:window-y="29"
inkscape:window-maximized="0" inkscape:window-maximized="1"
inkscape:current-layer="Слой_2_1_" /><style inkscape:current-layer="svg11" />
type="text/css" <title
id="style2"> id="title2" />
.st0{display:none;} <g
.st1{display:inline;} data-name="Layer 8"
.st2{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;} id="Layer_8">
.st3{fill:none;stroke:#000103;stroke-miterlimit:10;} <path
.st4{fill:none;stroke:#000103;stroke-width:6;stroke-miterlimit:10;} 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"
</style><g 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"
class="st0"
id="Слой_1"><g
class="st1"
id="Profile"><circle
cx="69.5"
cy="52.2"
r="27.4"
id="circle4" /><path
d="M85.1,75.2c-4.7,2.5-10,3.9-15.6,4c-5.7,0-11-1.5-15.6-4c-9.6,8.6-24.3,4.5-24.3,31.5l39.7,17.9h0.5l39.7-17.9 C109.4,79.8,94.8,83.8,85.1,75.2z"
id="path6" /><path
d="M51.9,64c0,0,2,5.1,0,13.1c0,0,1.9,2.3,17.6,2.5V71L51.9,64z"
id="path8" /><path
d="M87.1,64c0,0-2,5.1,0,13.1c0,0-1.9,2.3-17.6,2.5V71L87.1,64z"
id="path10" /><circle
class="st2"
cx="69.5"
cy="66.6"
r="58"
id="circle12" /><path
d="M29.5,106.7c0,0,13.7,17.8,40.2,17.9c0,0,22.4,1.5,39.7-17.9H29.5z"
id="path14" /></g><g
class="st1"
id="Profile_1_"><path
class="st3"
d="M85.1,75.2c-4.7,2.5-10,3.9-15.6,4c-5.7,0-11-1.5-15.6-4c-9.6,8.6-24.3,4.5-24.3,31.5l39.7,17.9h0.5 l39.7-17.9C109.4,79.8,94.8,83.8,85.1,75.2z"
id="path17" /><path
class="st3"
d="M51.9,64c0,0,2,5.1,0,13.1c0,0,1.9,2.3,17.6,2.5V71L51.9,64z"
id="path19" /><path
class="st3"
d="M87.1,64c0,0-2,5.1,0,13.1c0,0-1.9,2.3-17.6,2.5V71L87.1,64z"
id="path21" /><circle
class="st4"
cx="69.5"
cy="66.6"
r="58"
id="circle23" /><path
class="st3"
d="M29.5,106.7c0,0,13.7,17.8,40.2,17.9c0,0,22.4,1.5,39.7-17.9H29.5z"
id="path25" /></g><g
class="st1"
id="Слой_2" /></g><g
id="Слой_2_1_"><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:#000103;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;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 69.5,21.800781 c -16.753922,0 -30.400391,13.644515 -30.400391,30.398438 0,9.136749 4.064889,17.342808 10.472657,22.921875 l -8.359375,3.96875 0.169921,-0.07422 c -8.214556,3.297393 -11.931109,10.593733 -13.464843,16.632813 -1.533735,6.039082 -1.109375,11.285152 -1.109375,11.285152 l 0.08203,1.03711 0.705078,0.76563 c 17.616582,19.06849 38.819022,18.99997 42.003906,18.87695 3.184885,0.12302 24.387321,0.19154 42.003911,-18.87695 l 0.70703,-0.76563 0.0801,-1.03711 c 0,0 0.42632,-5.24607 -1.10742,-11.285152 -1.52293,-5.996551 -5.20296,-13.228754 -13.296872,-16.558594 L 89.498047,75.060547 C 95.865427,69.482709 99.900391,61.30271 99.900391,52.199219 99.900391,35.445296 86.253922,21.800781 69.5,21.800781 Z m 0,6 c 13.511282,0 24.400391,10.887156 24.400391,24.398438 0,13.511281 -10.889109,24.40039 -24.400391,24.40039 -13.511282,0 -24.400391,-10.889109 -24.400391,-24.40039 0,-13.511282 10.889109,-24.398438 24.400391,-24.398438 z m 14.785156,50.94336 0.386719,0.666015 10.824219,5.138672 0.08594,0.03516 c 5.985439,2.402607 8.618499,7.555096 9.884769,12.541016 1.02387,4.0315 0.98705,7.03187 0.94336,8.26953 -16.391098,17.07968 -35.02157,16.32865 -36.652348,16.22852 l -0.002,-0.0137 c 0,0 -0.1357,0.004 -0.154297,0.006 -0.01906,-0.001 -0.156249,-0.006 -0.15625,-0.006 l -0.002,0.0137 c -1.6309,0.10014 -20.262794,0.85119 -36.654297,-16.23047 -0.04365,-1.23918 -0.08007,-4.23782 0.94336,-8.26758 1.266265,-4.98592 3.899323,-10.138409 9.884766,-12.541016 l 0.08594,-0.03516 10.826172,-5.138672 0.335937,-0.580078 c 4.34539,2.399084 9.333072,3.769531 14.634766,3.769531 5.363385,0 10.404438,-1.404205 14.785156,-3.855468 z"
id="fill-edit" id="fill-edit"
inkscape:connector-curvature="0" /></g></svg> inkscape:connector-curvature="0" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

49
webpack/scss/menu.scss
View File

@ -1,4 +1,4 @@
$menu-bg: #163042; $menu-bg: #303030;
$menu-width: 3em; $menu-width: 3em;
$menu-outer-width: #{$menu-width + 1em}; $menu-outer-width: #{$menu-width + 1em};
@ -29,7 +29,7 @@ $menu-outer-width: #{$menu-width + 1em};
border-radius: 3px / 3px; 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: center center no-repeat;
background-size: 50%; background-size: 50%;
@ -41,29 +41,36 @@ $menu-outer-width: #{$menu-width + 1em};
cursor: pointer; cursor: pointer;
/* (1) Set icons */ /* (1) Set icons */
&[data-icon='home']{ background-image: url('/asset/svg/home.svg@bebedd'); } &[data-icon='home']{ background-image: url('/asset/svg/home.svg@7992a3'); }
&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@bebedd'); } &[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@7992a3'); }
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@bebedd'); } &[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg@7992a3'); }
&[data-icon='login']{ background-image: url('/asset/svg/login.svg@bebedd'); } &[data-icon='login']{ background-image: url('/asset/svg/login.svg@7992a3'); }
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@bebedd'); } &[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@7992a3'); }
/* (2) On hover */ /* (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'); } color: #4a71dd;
&[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='home']:hover, &[data-icon='home'].active{ background-image: url('/asset/svg/home.svg@10d197'); }
&[data-icon='login']:hover{ background-image: url('/asset/svg/login.svg@dfdfee'); } &[data-icon='manage']:hover, &[data-icon='manage'].active{ background-image: url('/asset/svg/manage.svg@da5645'); }
&[data-icon='logout']:hover{ background-image: url('/asset/svg/logout.svg@dfdfee'); } &[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 */ /* (3) Label */
span{ span{
display: none; // display: none;
// display: block; display: block;
position: absolute; position: absolute;
margin-top: #{$menu-width / 4}; margin-top: #{$menu-width / 5};
left: calc( 100% + .5em ); left: calc( -100% + .5em );
opacity: 0;
padding: .3em .7em; padding: .3em .7em;
@ -73,10 +80,16 @@ $menu-outer-width: #{$menu-width + 1em};
border-radius: 3px / 3px; border-radius: 3px / 3px;
transition: all .2s ease-in-out;
z-index: -1;
} }
/* (4) Display label on item hover */ /* (4) Display label on item hover */
&:hover span{ display: block; } &:hover span{
left: calc( 100% + .5em );
opacity: 1;
}
} }