WIP of modern login page:

- Add modern social networks icons
This commit is contained in:
Hadi Nategh 2017-02-07 19:02:45 +01:00
parent cf2bc4158f
commit 775f8f93fc
4 changed files with 95 additions and 51 deletions

View File

@ -1,21 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="../../../../pixelegg/less/svg.css" ?>
<svg version="1.1" id="mail_navbar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28.347px" height="28.347px" viewBox="0 0 28.347 28.347" enable-background="new 0 0 28.347 28.347" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M20.038,16.039c-3.507,0-5.767,2.659-5.767,5.72
c0,2.867,2.195,4.649,4.788,4.649c1.059,0,1.942-0.163,2.812-0.595l-0.253-0.639c-0.647,0.342-1.485,0.521-2.386,0.521
c-2.338,0-4.06-1.545-4.06-4.026c0-3.016,2.164-4.947,4.739-4.947c2.448,0,3.823,1.561,3.823,3.729
c0,1.708-0.901,2.733-1.707,2.703c-0.521-0.015-0.711-0.534-0.473-1.663l0.537-2.689c-0.412-0.178-1.028-0.312-1.691-0.312
c-2.196,0-3.743,1.68-3.743,3.521c0,1.174,0.789,1.871,1.706,1.871c0.947,0,1.674-0.43,2.228-1.307h0.046
c-0.03,0.921,0.554,1.307,1.186,1.307c1.469,0,2.797-1.307,2.797-3.535C24.62,17.866,22.787,16.039,20.038,16.039z M20.67,21.061
c-0.174,0.92-1.011,2.02-1.927,2.02c-0.695,0-1.043-0.476-1.043-1.129c0-1.44,1.121-2.674,2.512-2.674
c0.363,0,0.632,0.06,0.79,0.119L20.67,21.061z"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" points="22.897,4.501 22.467,2.624 2.439,7.218 2.869,9.095
14.319,13.058 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M23.185,6.551l-8.578,8.556l-11.45-3.961l2.44,9.842l7.337-1.684
c0.902-2.904,3.611-5.013,6.812-5.013c2.052,0,3.896,0.872,5.197,2.259l0.683-0.157L23.185,6.551z"/>
</g>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M334.214,212.307"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M335.602,213.389"/>
<path fill="#FFFFFF" d="M63.905,1.875C29.44,1.875,1.5,29.814,1.5,64.281c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C126.312,29.814,98.371,1.875,63.905,1.875z M22.731,48.011l70.857-18.829l1.907,7.214
L66.287,67.604L24.513,54.729L22.731,48.011z M105.768,78.744L58.272,91.305l-22.451,5.968l-0.873-3.065l-8.436-31.902l41.067,12.65
l29.719-31.749l9.321,35.248l-0.867,0.23L105.768,78.744z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,19 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28.35px" height="28.35px" viewBox="0 0 28.35 28.35" enable-background="new 0 0 28.35 28.35" xml:space="preserve">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M334.214,212.307"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M335.602,213.389"/>
<g>
<defs>
<rect id="SVGID_1_" x="0.003" y="0.003" width="28.344" height="28.344"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#35528F" d="M26.782,28.347c0.863,0,1.564-0.7,1.564-1.564V1.567
c0-0.863-0.701-1.563-1.564-1.563H1.567c-0.864,0-1.564,0.7-1.564,1.563v25.216c0,0.864,0.7,1.564,1.564,1.564H26.782z"/>
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M19.56,28.347V17.371h3.684l0.553-4.278H19.56v-2.731
c0-1.238,0.344-2.083,2.119-2.083l2.266-0.001V4.452c-0.393-0.053-1.736-0.169-3.301-0.169c-3.266,0-5.502,1.993-5.502,5.654v3.155
h-3.693v4.278h3.693v10.976H19.56z"/>
<path fill="#FFFFFF" d="M908.674,389.945c-0.932-4.762-4.723-9.699-13.974-6.521c-5.244,1.798-8.066,4.175-6.521,12.11
C890.537,407.616,911.655,405.222,908.674,389.945z"/>
<path fill="#FFFFFF" d="M921,370c-4,0-7,0-10,0c0,4,0,7,0,11c3,0,6,0,10,0C921,377,921,374,921,370z"/>
<path fill="#FFFFFF" d="M897.405,331.375c-34.465,0-62.405,27.939-62.405,62.406c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C959.812,359.314,931.871,331.375,897.405,331.375z M924.51,418.82
c-4.248,4.248-19.133,2.797-26.082,2.797c-5.749,0-22.45,0.837-26.083-2.797c-3.911-3.91-5.349-47.041,0-52.164
c1.218-1.164,5.094-1.705,5.588-1.863c10.667-3.502,42.21-2.506,46.577,1.863C929.68,371.826,930.145,413.186,924.51,418.82z"/>
<path fill="#FFFFFF" d="M921.716,386c-2.797,0-5.591,0-8.383,0c8.913,28-38.801,29-29.811,0c-2.795,0-5.59,0-8.383,0
c0.567,9-1.164,20.528,0.932,28.054c10.861,3.056,33.851,3.001,44.712-0.055C922.879,406.474,921.146,395,921.716,386z"/>
</g>
<path fill="#FFFFFF" d="M749.405,331.375c-34.465,0-62.405,27.939-62.405,62.406c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C811.812,359.314,783.871,331.375,749.405,331.375z M782.023,371.158
c-0.622,2.676-2.729,5.3-4.657,6.52c1.508,30.862-30.09,52.307-55.895,37.262c5.785-1.975,12.894-2.723,16.769-6.607
C733.359,406.07,728.112,404,727.062,398c1.556,0,3.101,0,4.657,0c-4.722-3-8.877-6.566-9.314-13.888
c2.244-0.382,2.021,1.748,4.657,0.975c-3.185-4.489-5.85-10.458-3.727-17.677c8.096,5.57,14.346,12.986,27.015,13.983
c-1.201-13.45,14.363-23.721,23.286-13.036c3.42-0.298,5.153-2.299,8.387-2.792c-0.048,1.191-2.347,4.505-4.316,6.288
L782.023,371.158z"/>
<path fill="#FFFFFF" d="M63.405,1.594C28.94,1.594,1,29.534,1,64c0,34.464,27.94,62.406,62.405,62.406
c34.466,0,62.407-27.941,62.407-62.406C125.812,29.534,97.871,1.594,63.405,1.594z M76,42c-3,0-5.54,0-8.333,0
c-1.557,2-0.934,3.358-0.932,8.727C67.042,51.23,67.573,51,68.235,52h4.056C76.049,52,72,52,76,52c0,3,0,7,0,11c-3,0-6,0-9,0
c0,10,0,21,0,31c-5,0-9,0-13,0c0-10,0-19.812,0-30.06V63h-7c0-4,0-8,0-11c2,0,4.522,0,6.692,0C52.634,32,56,30.306,76,31.336
C76,35.062,76,39,76,42z"/>
<g>
<polygon fill="#FFFFFF" points="301,382 301,403 301.317,403 315.625,392.909 301.278,382 "/>
<path fill="#FFFFFF" d="M305.405,331.375c-34.465,0-62.405,27.939-62.405,62.406c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C367.812,359.314,339.871,331.375,305.405,331.375z M331.896,409.368
c-13.488,4.117-38.676,4.117-52.164,0c-3.69-8.664-3.69-24.873,0-33.536c13.291-4.172,38.873-4.172,52.164,0
C335.752,384.328,335.519,400.771,331.896,409.368z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -1,24 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28.35px" height="28.35px" viewBox="0 0 28.35 28.35" enable-background="new 0 0 28.35 28.35" xml:space="preserve">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M334.214,212.307"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M335.602,213.389"/>
<g>
<defs>
<rect id="SVGID_1_" x="0.002" y="0.003" width="28.345" height="28.344"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#6BACD9" d="M26.782,28.347c0.863,0,1.564-0.701,1.564-1.564V1.566
c0-0.863-0.701-1.563-1.564-1.563H1.566c-0.864,0-1.564,0.7-1.564,1.563v25.216c0,0.863,0.7,1.564,1.564,1.564H26.782z"/>
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M26.041,7.459c-0.874,0.388-1.813,0.65-2.8,0.768
c1.006-0.604,1.779-1.559,2.143-2.697c-0.941,0.559-1.984,0.965-3.096,1.183C21.4,5.764,20.132,5.173,18.73,5.173
c-2.693,0-4.875,2.184-4.875,4.875c0,0.383,0.043,0.755,0.125,1.111C9.928,10.956,6.335,9.014,3.93,6.065
c-0.42,0.72-0.66,1.558-0.66,2.45c0,1.692,0.861,3.185,2.169,4.06c-0.799-0.026-1.551-0.245-2.208-0.61
C3.23,11.985,3.23,12.006,3.23,12.026c0,2.362,1.681,4.333,3.911,4.78c-0.409,0.111-0.84,0.172-1.284,0.172
c-0.314,0-0.62-0.031-0.918-0.088c0.621,1.938,2.422,3.348,4.555,3.387c-1.669,1.307-3.771,2.088-6.055,2.088
c-0.394,0-0.782-0.023-1.163-0.068c2.157,1.383,4.72,2.189,7.474,2.189c8.968,0,13.872-7.43,13.872-13.872
c0-0.212-0.006-0.422-0.014-0.631C24.562,9.296,25.387,8.436,26.041,7.459"/>
<path fill="#FFFFFF" d="M908.674,389.945c-0.932-4.762-4.723-9.699-13.974-6.521c-5.244,1.798-8.066,4.175-6.521,12.11
C890.537,407.616,911.655,405.222,908.674,389.945z"/>
<path fill="#FFFFFF" d="M921,370c-4,0-7,0-10,0c0,4,0,7,0,11c3,0,6,0,10,0C921,377,921,374,921,370z"/>
<path fill="#FFFFFF" d="M897.405,331.375c-34.465,0-62.405,27.939-62.405,62.406c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C959.812,359.314,931.871,331.375,897.405,331.375z M924.51,418.82
c-4.248,4.248-19.133,2.797-26.082,2.797c-5.749,0-22.45,0.837-26.083-2.797c-3.911-3.91-5.349-47.041,0-52.164
c1.218-1.164,5.094-1.705,5.588-1.863c10.667-3.502,42.21-2.506,46.577,1.863C929.68,371.826,930.145,413.186,924.51,418.82z"/>
<path fill="#FFFFFF" d="M921.716,386c-2.797,0-5.591,0-8.383,0c8.913,28-38.801,29-29.811,0c-2.795,0-5.59,0-8.383,0
c0.567,9-1.164,20.528,0.932,28.054c10.861,3.056,33.851,3.001,44.712-0.055C922.879,406.474,921.146,395,921.716,386z"/>
</g>
<path fill="#FFFFFF" d="M63.405,1.188C28.94,1.188,1,29.128,1,63.595C1,98.06,28.94,126,63.405,126
c34.466,0,62.407-27.94,62.407-62.405C125.812,29.128,97.871,1.188,63.405,1.188z M96.023,40.972c-0.622,2.676-2.729,5.3-4.657,6.52
c1.508,30.862-30.09,52.307-55.895,37.262c5.785-1.975,12.894-2.63,16.769-6.515C47.359,75.977,42.112,74,41.062,68
c1.556,0,3.101,0,4.657,0c-4.722-3-8.877-6.66-9.314-13.981c2.244-0.382,2.021,1.702,4.657,0.928
c-3.185-4.489-5.85-10.482-3.727-17.701c8.096,5.57,14.346,12.975,27.015,13.972c-1.201-13.45,14.363-23.727,23.286-13.042
c3.42-0.298,5.153-2.302,8.387-2.795c-0.048,1.191-2.347,4.503-4.316,6.287L96.023,40.972z"/>
<g>
<polygon fill="#FFFFFF" points="301,382 301,403 301.317,403 315.625,392.909 301.278,382 "/>
<path fill="#FFFFFF" d="M305.405,331.375c-34.465,0-62.405,27.939-62.405,62.406c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C367.812,359.314,339.871,331.375,305.405,331.375z M331.896,409.368
c-13.488,4.117-38.676,4.117-52.164,0c-3.69-8.664-3.69-24.873,0-33.536c13.291-4.172,38.873-4.172,52.164,0
C335.752,384.328,335.519,400.771,331.896,409.368z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M334.214,212.307"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M335.602,213.389"/>
<g>
<path fill="#FFFFFF" d="M908.674,389.945c-0.932-4.762-4.723-9.699-13.974-6.521c-5.244,1.798-8.066,4.175-6.521,12.11
C890.537,407.616,911.655,405.222,908.674,389.945z"/>
<path fill="#FFFFFF" d="M921,370c-4,0-7,0-10,0c0,4,0,7,0,11c3,0,6,0,10,0C921,377,921,374,921,370z"/>
<path fill="#FFFFFF" d="M897.405,331.375c-34.465,0-62.405,27.939-62.405,62.406c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C959.812,359.314,931.871,331.375,897.405,331.375z M924.51,418.82
c-4.248,4.248-19.133,2.797-26.082,2.797c-5.749,0-22.45,0.837-26.083-2.797c-3.911-3.91-5.349-47.041,0-52.164
c1.218-1.164,5.094-1.705,5.588-1.863c10.667-3.502,42.21-2.506,46.577,1.863C929.68,371.826,930.145,413.186,924.51,418.82z"/>
<path fill="#FFFFFF" d="M921.716,386c-2.797,0-5.591,0-8.383,0c8.913,28-38.801,29-29.811,0c-2.795,0-5.59,0-8.383,0
c0.567,9-1.164,20.528,0.932,28.054c10.861,3.056,33.851,3.001,44.712-0.055C922.879,406.474,921.146,395,921.716,386z"/>
</g>
<g>
<polygon fill="#FFFFFF" points="59,52 59,73 59.317,73 73.625,62.909 59.278,52 "/>
<path fill="#FFFFFF" d="M63.405,1.375C28.94,1.375,1,29.314,1,63.781c0,34.465,27.94,62.405,62.405,62.405
c34.466,0,62.407-27.94,62.407-62.405C125.812,29.314,97.871,1.375,63.405,1.375z M89.896,79.368
c-13.488,4.117-38.676,4.117-52.164,0c-3.69-8.664-3.69-24.873,0-33.536c13.291-4.172,38.873-4.172,52.164,0
C93.752,54.328,93.519,70.771,89.896,79.368z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB