updated login.svg asset + menu nice animations
This commit is contained in:
xdrm-brackets
parent
bd4558d1e4
commit
d2e7c1d5ea
|
|
@ -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"><metadata
|
||||
id="metadata43"><rdf:RDF><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="defs41" /><sodipodi:namedview
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||
<metadata
|
||||
id="metadata17">
|
||||
<rdf:RDF>
|
||||
<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"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
|
|
@ -26,69 +34,26 @@
|
|||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="812"
|
||||
inkscape:window-height="480"
|
||||
id="namedview39"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1015"
|
||||
id="namedview13"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.6978417"
|
||||
inkscape:cx="69.5"
|
||||
inkscape:cy="69.5"
|
||||
inkscape:zoom="7.375"
|
||||
inkscape:cx="16"
|
||||
inkscape:cy="16"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="29"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="Слой_2_1_" /><style
|
||||
type="text/css"
|
||||
id="style2">
|
||||
.st0{display:none;}
|
||||
.st1{display:inline;}
|
||||
.st2{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
|
||||
.st3{fill:none;stroke:#000103;stroke-miterlimit:10;}
|
||||
.st4{fill:none;stroke:#000103;stroke-width:6;stroke-miterlimit:10;}
|
||||
</style><g
|
||||
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"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg11" />
|
||||
<title
|
||||
id="title2" />
|
||||
<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>
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue