mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
fixed styles
This commit is contained in:
Fedor Katurov
parent
4e18eba558
commit
9b52ff10e5
35 changed files with 12539 additions and 2896 deletions
425
public/images/icon.svg
Normal file
425
public/images/icon.svg
Normal file
|
|
@ -0,0 +1,425 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
|
||||
<defs>
|
||||
<g id="icon-router">
|
||||
<rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
|
||||
<g transform="translate(0 0)">
|
||||
<path d="M12 5c-2.105-.003-3.587 1.238-4.3 2.354a6.454 6.454 0 0 0-.888 2.226l-.02.123v12.137h3v-11.814c.01-.045.098-.531.434-1.057.352-.549.722-.97 1.77-.969 1.073.001 1.547.446 1.945.983.367.493.47.894.49.966v12.45s-.003 1.326.624 2.723c.626 1.396 2.196 3.019 4.627 3.068 2.45.05 4.063-1.603 4.689-3.022.626-1.418.621-2.77.621-2.77v-10.949h-3v10.913s-.032.84-.365 1.595c-.334.756-.61 1.259-1.885 1.233-1.295-.027-1.617-.557-1.95-1.297a4.623 4.623 0 0 1-.36-1.526v-12.873l-.045-.177s-.256-1.071-1.035-2.121c-.78-1.05-2.273-2.193-4.352-2.196z" stroke="none" fill="white" />
|
||||
<circle cx="8.5" cy="24" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
<circle cx="23.5" cy="9" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-sticker">
|
||||
<rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
|
||||
<g transform="translate(-680 -285)">
|
||||
<path d="M690.764 306.811l5.71 7.913 5.014-7.694z" stroke="none" fill="white" />
|
||||
<path transform="matrix(.88332 0 0 .88132 81.246 35.954)" d="M702.328 307.792l-6.02-.026-6.02.026-2.986-5.226-3.033-5.2 3.033-5.2 2.987-5.227 6.02.026 6.02-.026 2.986 5.226 3.033 5.2-3.033 5.2z" fill="none" stroke="white" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-poly">
|
||||
<rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
|
||||
<g>
|
||||
<path d="m6 14l9 -7l-2 16l14 -10l-3 12" fill="none" stroke-linecap="butt" stroke-linejoin="round" stroke="white" />
|
||||
<circle cx="5" cy="15" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
<circle cx="16" cy="5" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
<circle cx="12" cy="25" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
<circle cx="28" cy="11" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
<circle cx="24" cy="27" r="2" fill="none" stroke-width="2" stroke="white" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-shooter">
|
||||
<rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
|
||||
<g transform="translate(18 6)">
|
||||
<path d="m0 0l-4.391.054c-1.418.531-2.34 1.756-3.176 3.102h-5.178c-.68.317-1.351.655-1.455 2.584v11.49c.17 1.001.58 1.765 1.455 2.06h22.537c.746-.044 1.288-.426 1.68-1.06v-13.517c-.185-1.643-.916-1.65-1.68-1.557h-6.62c-.326-1.26-1.91-2.247-3.172-3.156zm-2.122 5.289c3.227 0 5.87 2.626 5.87 5.846s-2.643 5.845-5.87 5.845c-3.227 0-5.869-2.626-5.869-5.845 0-3.22 2.642-5.846 5.87-5.846zm0 1.998a3.844 3.844 0 0 0-3.869 3.848 3.842 3.842 0 0 0 3.87 3.845 3.84 3.84 0 0 0 3.866-3.845 3.842 3.842 0 0 0-3.867-3.848z" fill="white" stroke="none" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-trash">
|
||||
<g transform="matrix(4.6 0 0 4.6 -4 -4)" stroke="none">
|
||||
<path fill="white" d="M2.783 3.626h2.923v2.923H2.783z" />
|
||||
<path fill="white" d="M2.479 2.597h3.508v.748H2.479z" />
|
||||
<path fill="white" d="M3.438 1.919h1.473v.865H3.438z" />
|
||||
<path fill="black" d="M3.859 2.25h.631v.386h-.631z" />
|
||||
<path fill="black" d="M3.134 3.906h.468v2.315h-.468z" />
|
||||
<path fill="black" d="M-4.537 3.906h.444v2.315h-.444z" transform="scale(-1 1)" />
|
||||
<path fill="black" d="M4.958 3.906h.444v2.315h-.444z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-save" stroke="none">
|
||||
<path fill="black" d="M0 0h32v32H0z" />
|
||||
<path fill="white" d="M6.844 8.459V24h18.312V11.375H14.031V8.459z" />
|
||||
<rect fill="black" width="2.74" height="5.038" x="14.63" y="14.411" stroke-width="3.603" />
|
||||
<path fill="black" d="M16.866 19.73l-4.315-.06-4.314.06 2.209-3.707 2.105-3.766 2.106 3.766z" transform="matrix(.45903 -.40628 .79506 .23456 -3.467 21.088)" />
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="svg8" width="600" height="32">
|
||||
<g id="g4853" transform="translate(-29.985 30.509)">
|
||||
<rect id="rect4832" width="4.035" height="1.75" x="16.495" y="-28.417" fill="#fff" stroke-opacity=".941" stroke-width=".115" rx="0" ry="0" />
|
||||
<path id="rect4834" fill="#fff" stroke-opacity=".941" stroke-width=".247" d="M15.535-28.417h5.616v.933h-5.616z" />
|
||||
<path id="rect4836" fill="#fff" stroke-opacity=".941" stroke-width=".293" d="M16.495-29.706v1.29h.671v-.761h2.66v.76h.67v-1.29z" />
|
||||
<path id="path4841" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width=".753" d="M16.886-27.49c.092.03-.101 1.171.111 2.499.213 1.328-.477 1.846-.477 1.846" />
|
||||
<path id="path4843" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width=".753" d="M18.496-27.49c.093.03-.101 1.171.112 2.499.212 1.328-.478 1.846-.478 1.846" />
|
||||
<path id="path4845" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width=".753" d="M20.107-27.49c.092.03-.102 1.171.111 2.499s-.477 1.846-.477 1.846" />
|
||||
</g>
|
||||
<g id="g4909" transform="translate(-.054 .888)">
|
||||
<path id="rect4855" fill="#fff" stroke-opacity=".941" stroke-width=".811" d="M16.272-27.384h4.266l-.397 4.3h-3.538z" />
|
||||
<path id="rect4857" fill="#fff" stroke-opacity=".941" stroke-width=".43" d="M15.809-28.939h5.192v.992h-5.192z" />
|
||||
<path id="rect4879" fill="#fff" stroke-opacity=".941" stroke-width=".502" d="M17.246-29.945v1.123h.586v-.66h1.005v.66h.587v-1.123z" />
|
||||
<g id="g4900">
|
||||
<path id="path4885" fill-rule="evenodd" stroke-width=".265" d="M16.885-26.893l.187 3.508h.538l-.14-3.508z" />
|
||||
<path id="path4887" fill-rule="evenodd" stroke-width=".265" d="M19.983-26.893l-.187 3.508h-.538l.14-3.508z" />
|
||||
<path id="rect4889" stroke-opacity=".941" stroke-width=".821" d="M18.165-26.881h.538v3.473h-.538z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-save" stroke-opacity=".941" transform="translate(-64)">
|
||||
<path id="rect4766" stroke-width=".265" d="M0 0h32v32H0z" />
|
||||
<path id="rect4986" fill="#fff" stroke-width="2.491" d="M6.844 8.459V24h18.312V11.375H14.031V8.459z" />
|
||||
<rect id="rect4991" width="2.74" height="5.038" x="14.63" y="14.411" stroke-width="3.603" rx="0" ry="0" />
|
||||
<path id="path4993" stroke-width="3" d="M16.866 19.73l-4.315-.06-4.314.06 2.209-3.707 2.105-3.766 2.106 3.766z" transform="matrix(.45903 -.40628 .79506 .23456 -3.467 21.088)" />
|
||||
</g>
|
||||
<g id="g4982" stroke-opacity=".941" transform="translate(-32)">
|
||||
<path id="rect4964" stroke-width=".265" d="M0 0h32v32H0z" />
|
||||
<g id="g4980" transform="matrix(3.77953 0 0 3.77953 .002 -.002)">
|
||||
<path id="rect4966" fill="#fff" stroke-width=".794" d="M2.783 3.626h2.923v2.923H2.783z" />
|
||||
<path id="rect4968" fill="#fff" stroke-width=".794" d="M2.479 2.597h3.508v.748H2.479z" />
|
||||
<path id="rect4970" fill="#fff" stroke-width=".794" d="M3.438 1.919h1.473v.865H3.438z" />
|
||||
<path id="rect4972" stroke-width=".684" d="M3.859 2.25h.631v.386h-.631z" />
|
||||
<path id="rect4974" stroke-width="1.442" d="M3.134 3.906h.468v2.315h-.468z" />
|
||||
<path id="rect4976" stroke-width="1.405" d="M-4.537 3.906h.444v2.315h-.444z" transform="scale(-1 1)" />
|
||||
<path id="rect4978" stroke-width="1.405" d="M4.958 3.906h.444v2.315h-.444z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="g5188" transform="translate(-96)">
|
||||
<path id="rect5180" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" />
|
||||
<g id="g5322" fill="#fff" transform="translate(7.066 7.065) scale(.04494)">
|
||||
<path id="path5267" stroke-width="445.017" d="M313.1 147.875c-6.057 0-11.962.654-17.661 1.871l-15.805-53.435 37.842-2.565a9.275 9.275 0 0 1 9.602 6.932 9.246 9.246 0 0 1-1.45 7.728 9.243 9.243 0 0 1-6.865 3.834l-9.126.652a6.5 6.5 0 0 0-6.02 6.947c.256 3.581 3.361 6.289 6.947 6.02l9.126-.652a22.21 22.21 0 0 0 16.493-9.21 22.21 22.21 0 0 0 3.484-18.566c-2.677-10.375-12.376-17.364-23.069-16.654l-45.936 3.114a6.5 6.5 0 0 0-5.793 8.329l6.405 21.656H145.477l-6.316-12H155.5a6.5 6.5 0 1 0 0-13h-47a6.5 6.5 0 1 0 0 13h16.086l9.542 18.349-18.836 33.485a84.026 84.026 0 0 0-30.792-5.834c-46.593 0-84.5 37.906-84.5 84.5s37.907 84.5 84.5 84.5c44.404 0 80.892-34.436 84.225-78h31.776a6.5 6.5 0 0 0 5.511-3.055l68.779-110.047 8.185 27.672c-31.758 12.162-54.376 42.945-54.376 78.93 0 46.594 37.907 84.5 84.5 84.5s84.5-37.906 84.5-84.5-37.907-84.501-84.5-84.501zm-228.6 156c-39.425 0-71.5-32.075-71.5-71.5s32.075-71.5 71.5-71.5c8.549 0 16.75 1.513 24.355 4.276l-31.482 55.968c-3.726 2.365-6.206 6.516-6.206 11.256 0 7.363 5.969 13.333 13.333 13.333 5.002 0 9.354-2.759 11.636-6.833h59.556c-3.297 36.388-33.959 65-71.192 65zm11.636-78a13.384 13.384 0 0 0-4.025-4.439l28.528-50.717c19.37 11.397 32.922 31.647 35.052 55.156zm72.589 0c-2.17-28.365-18.393-52.845-41.715-66.482l14.327-25.471 48.396 91.953zm32.258-6.538l-48.665-92.462h106.454zM313.1 303.875c-39.425 0-71.5-32.075-71.5-71.5 0-30.093 18.697-55.885 45.077-66.418l16.89 57.105a13.284 13.284 0 0 0-3.8 9.313c0 7.363 5.969 13.333 13.333 13.333s13.333-5.97 13.333-13.333c0-6.354-4.449-11.661-10.399-12.999l-16.895-57.123a71.624 71.624 0 0 1 13.962-1.378c39.425 0 71.5 32.075 71.5 71.5s-32.076 71.5-71.501 71.5z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-cycle">
|
||||
<path fill="black" d="M0 0h32v32H0z" />
|
||||
<g id="g5604" fill="#fff" transform="matrix(-.36615 0 0 .36615 24.543 7.457)">
|
||||
<g id="g5527">
|
||||
<g id="g5495">
|
||||
<path id="path5483" d="M37.687 24.66c-4.945 0-8.973 4.025-8.973 8.975 0 4.95 4.026 8.974 8.973 8.974 4.95 0 8.977-4.024 8.977-8.974s-4.027-8.975-8.977-8.975zm0 15.384a6.417 6.417 0 0 1-6.409-6.409 6.418 6.418 0 0 1 6.409-6.41 6.417 6.417 0 0 1 6.411 6.41 6.417 6.417 0 0 1-6.411 6.409z" />
|
||||
<path id="path5485" d="M23.588 15.501v.01h8.047c-2.375-2.4-5.273-5.251-5.99-5.578-1.257-.575-3.966 1.462-4.547 1.748-.532.283-.954.699-1.043 1.236l-2.112 5.927-6.167.069c-1.811.485-.465 2.065-.465 2.065l3.097.041-.295 1.405-1.803 2.989a8.914 8.914 0 0 0-3.333-.648C4.027 24.765 0 28.792 0 33.741c0 4.947 4.026 8.974 8.977 8.974 4.948 0 8.975-4.026 8.975-8.974a8.956 8.956 0 0 0-3.423-7.038l2.005-3.326.487-2.322 2.41.03c.479-.136.833-.538.912-1.029l2.603-4.074zM15.386 33.74a6.417 6.417 0 0 1-6.409 6.409c-3.534 0-6.411-2.876-6.411-6.409a6.419 6.419 0 0 1 6.411-6.411c.694 0 1.36.114 1.986.32l-3.579 5.939 2.197 1.323 3.607-5.989a6.386 6.386 0 0 1 2.198 4.818z" />
|
||||
<path id="path5487" d="M32.24 23.139s2.468-2.578 2.691-2.968c.225-.392.229-.872.007-1.265 0 0-.725-.76-1.771-1.832v.014h-8.949l4.281 3.716-6.367 9.947a1.264 1.264 0 0 0-.104 1.045l2.563 7.692 3.072-.17-1.741-7.787z" />
|
||||
<circle id="circle5489" cx="19.703" cy="7.384" r="3.435" />
|
||||
<path id="path5491" d="M32.845 5.919c-1.06-.744-2.366-.789-3.123-.034l-1.484 1.487c-.756.756-.711 2.062.03 3.124z" />
|
||||
<path id="path5493" d="M33.007 15.317c1.116 1.116 2.73 1.311 3.607.436l1.485-1.488c.877-.876.685-2.491-.434-3.606l-4.081-4.081-4.659 4.658z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-cycle-2">
|
||||
<path fill="black" d="M0 0h32v32H0z" />
|
||||
<g id="g5604" fill="#fff" transform="matrix(-.36615 0 0 .36615 24.543 7.457)">
|
||||
<g id="g5527">
|
||||
<g id="g5495">
|
||||
<path id="path5483" d="M37.687 24.66c-4.945 0-8.973 4.025-8.973 8.975 0 4.95 4.026 8.974 8.973 8.974 4.95 0 8.977-4.024 8.977-8.974s-4.027-8.975-8.977-8.975zm0 15.384a6.417 6.417 0 0 1-6.409-6.409 6.418 6.418 0 0 1 6.409-6.41 6.417 6.417 0 0 1 6.411 6.41 6.417 6.417 0 0 1-6.411 6.409z" />
|
||||
<path id="path5485" d="M23.588 15.501v.01h8.047c-2.375-2.4-5.273-5.251-5.99-5.578-1.257-.575-3.966 1.462-4.547 1.748-.532.283-.954.699-1.043 1.236l-2.112 5.927-6.167.069c-1.811.485-.465 2.065-.465 2.065l3.097.041-.295 1.405-1.803 2.989a8.914 8.914 0 0 0-3.333-.648C4.027 24.765 0 28.792 0 33.741c0 4.947 4.026 8.974 8.977 8.974 4.948 0 8.975-4.026 8.975-8.974a8.956 8.956 0 0 0-3.423-7.038l2.005-3.326.487-2.322 2.41.03c.479-.136.833-.538.912-1.029l2.603-4.074zM15.386 33.74a6.417 6.417 0 0 1-6.409 6.409c-3.534 0-6.411-2.876-6.411-6.409a6.419 6.419 0 0 1 6.411-6.411c.694 0 1.36.114 1.986.32l-3.579 5.939 2.197 1.323 3.607-5.989a6.386 6.386 0 0 1 2.198 4.818z" />
|
||||
<path id="path5487" d="M32.24 23.139s2.468-2.578 2.691-2.968c.225-.392.229-.872.007-1.265 0 0-.725-.76-1.771-1.832v.014h-8.949l4.281 3.716-6.367 9.947a1.264 1.264 0 0 0-.104 1.045l2.563 7.692 3.072-.17-1.741-7.787z" />
|
||||
<circle id="circle5489" cx="19.703" cy="7.384" r="3.435" />
|
||||
<path id="path5491" d="M32.845 5.919c-1.06-.744-2.366-.789-3.123-.034l-1.484 1.487c-.756.756-.711 2.062.03 3.124z" />
|
||||
<path id="path5493" d="M33.007 15.317c1.116 1.116 2.73 1.311 3.607.436l1.485-1.488c.877-.876.685-2.491-.434-3.606l-4.081-4.081-4.659 4.658z" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-logo">
|
||||
<path fill="black" stroke="none" d="M0 0h32v32H0z" />
|
||||
<g transform="matrix(1 0 0 1 2 -1)">
|
||||
<path fill="none" stroke="#fff" stroke-width="2" d="M23.423 9.284c-6.673-4.127-12.713-4.175-19.269 0 .174 4.944-.354 13.294 9.635 17.855 10.323-4.9 9.545-13.305 9.634-17.855z" />
|
||||
<path fill="#fff" stroke="none" d="M13.435 5.925v21.037s10.695-3.27 9.988-17.678c0 0-3.447-2.828-9.988-3.359z" />
|
||||
<path fill="none" stroke-width="2" stroke="#fff" d="M5.773 15.118L15.7 6.19" />
|
||||
<path fill="none" stroke-width="2" stroke="#fff" d="M6.276 20.333l7.778-7.778" />
|
||||
<path fill="none" stroke-width="2" stroke="#fff" d="M8.574 23.691c.442-.53 5.612-5.612 5.612-5.612" />
|
||||
<path fill="none" stroke-width="2" stroke="#fff" d="M11.932 25.636l2.343-2.342" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-locate">
|
||||
<path id="rect5819" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<circle id="path5839" cx="16" cy="16" r="5.127" fill="none" stroke="#fff" stroke-width="2.5" />
|
||||
<path id="path5841" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M16.087 6.854v4.242" />
|
||||
<path id="path5843" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M16.087 20.686v4.243" />
|
||||
<path id="path5845" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M20.948 16.134h4.243" />
|
||||
<path id="path5847" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M6.63 16.134h4.242" />
|
||||
</g>
|
||||
<g id="icon-shot-2" stroke="none" transform="scale(1.1) translate(-2 -1)">
|
||||
<path id="rect5819" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<rect id="rect6617" width="21" height="13.89" x="6.25" y="9.833" fill="#fff" rx="2" ry="2" />
|
||||
<path id="rect6619" fill="#fff" stroke-width="1.979" d="M13.812 7.009h6.282c.45 0 .749.528 1.147 1.039l3.096 3.974c.398.51-3.793 6.989-4.243 6.989h-6.282c-.45 0-4.889-6.747-4.475-7.24l3.19-3.802c.415-.493.836-.96 1.285-.96z" />
|
||||
<circle id="path6621" cx="16.627" cy="16.311" r="6.158" fill="black" />
|
||||
<circle id="circle6628" cx="16.627" cy="16.311" r="3.533" fill="#fff" />
|
||||
</g>
|
||||
<g id="icon-trash-2" stroke="none">
|
||||
<g transform="translate(0 -3) scale(3.82445) scale(1.1) rotate(45 4 4)">
|
||||
<rect id="rect4966" width="3.125" height="2.893" x="2.671" y="3.751" fill="#fff" rx=".36" ry=".403" />
|
||||
<rect id="rect4968" width="3.663" height=".87" x="2.401" y="2.423" fill="#fff" rx=".435" ry=".435" />
|
||||
<rect id="rect4970" width="2.924" height="1.306" x="2.771" y="1.698" fill="#fff" rx=".653" ry=".653" />
|
||||
<rect id="rect4972" width="1.933" height=".523" x="3.266" y="2.114" fill="black" rx=".261" ry=".261" />
|
||||
<g id="g4918" stroke-width=".523" transform="matrix(1.3497 0 0 1.3497 -1.613 -1.674)">
|
||||
<rect id="rect4912" width="2.059" height=".425" x="5.622" y=".289" rx=".237" ry=".21" transform="rotate(45)" fill="black" />
|
||||
<rect id="rect4914" width="2.047" height=".389" x="-.491" y="-6.803" rx=".237" ry=".195" transform="rotate(135)" fill="black" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-logo-2" transform="scale(1.1) translate(-1 -2)">
|
||||
<path id="rect5611" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" stroke="none" />
|
||||
<g id="g5792" fill="none" stroke="#fff" stroke-width="2.37" transform="matrix(.84382 0 0 .84382 4.366 1.93)">
|
||||
<path id="path5774" fill-rule="evenodd" d="M22.399 10.08c-5.964-3.689-11.363-3.732-17.222 0 .155 4.418-.316 11.882 8.61 15.957 9.228-4.38 8.532-11.89 8.612-15.957z" />
|
||||
</g>
|
||||
<g id="g8284" fill="#fff" stroke-width="3.052" transform="matrix(.40236 0 0 .40236 10.45 8.978)">
|
||||
<path d="M22.399 10.08c-5.964-3.689-11.363-3.732-17.222 0 .155 4.418-.316 11.882 8.61 15.957 9.228-4.38 8.532-11.89 8.612-15.957z" stroke="none" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-sticker-2" transform="scale(1.1) translate(-3 -2)" stroke="none">
|
||||
<g id="g4867" transform="matrix(.94996 0 0 .94996 -.16 .083)">
|
||||
<path id="path4859" fill="#fff" fill-rule="evenodd" stroke-width=".767" d="M13.47 22.847l3.045 5.275 3.12-5.405z" />
|
||||
<circle id="path4863" cx="16.552" cy="14.98" r="8.712" fill="#fff" stroke-width="1.851" />
|
||||
<circle id="circle4869" cx="16.552" cy="14.98" r="5" fill="black" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-route-2" transform="scale(1.1) translate(32 -2)" stroke="none">
|
||||
<g fill="white">
|
||||
<circle id="path5642" cx="-24.357" cy="23.576" r="2.507" fill="#fff" stroke-width="4.363" />
|
||||
<path id="path5644" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.621" d="M-24.289 21.588V10.61c0-4.22 6.62-4.194 6.62 0V21.42c0 4.011 6.828 4.027 6.828 0v-10.98" />
|
||||
<circle id="circle5646" cx="-10.93" cy="8.462" r="2.507" fill="#fff" stroke-width="4.363" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-poly-2" transform="scale(1.1) translate(-3 -2)" stroke="none">
|
||||
<g fill="white">
|
||||
<path id="path6375" fill="none" fill-rule="evenodd" stroke="#fff" stroke-linejoin="round" stroke-width="2.387" d="M7.924 12.991l8.569-4.989-6.55 14.587 13.762-7.974-3.958 9.12" />
|
||||
<circle id="path6363" cx="14.711" cy="-4.523" r="2.387" fill="#fff" stroke-width="5.304" transform="rotate(75)" />
|
||||
<circle id="circle6367" cx="12.17" cy="-13.883" r="2.387" fill="#fff" stroke-width="5.304" transform="rotate(75)" />
|
||||
<circle id="circle6371" cx="20.342" cy="-19.194" r="2.387" fill="#fff" stroke-width="5.304" transform="rotate(75)" />
|
||||
<circle id="circle6373" cx="24.138" cy="-3.701" r="2.387" fill="#fff" stroke-width="5.304" transform="rotate(75)" />
|
||||
<circle id="circle6774" cx="27.918" cy="-13.025" r="2.387" fill="#fff" stroke-width="5.304" transform="rotate(75)" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-save-2" transform="scale(1.1) translate(-1 -2)" stroke="none">
|
||||
<g fill="white">
|
||||
<path id="rect4766" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path id="rect4986" fill="#fff" stroke-opacity=".941" stroke-width="2.477" d="M6.894 8.502v15.455h18.212V11.402H14.042v-2.9z" />
|
||||
<path id="path7854" fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2.735" d="M10.923 16.586l4.19 4.19 6.606-6.607" transform="scale(0.9) translate(2 2)" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-trash-3">
|
||||
<path id="rect4766" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" stroke="none" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" fill="white" transform="translate(4 4)" stroke-width="1" />
|
||||
</g>
|
||||
<g id="icon-trash-4">
|
||||
<path id="rect4766" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" stroke="none" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M21 9l-9-7-2.59 2.02 7.87 7.87zm0 5.07l-1.63-1.27-.67.52 1.43 1.43zM3.41.86L2 2.27l4.22 4.22L3 9l9 7 2.1-1.63 1.42 1.42-3.53 2.75-7.37-5.73L3 14.07l9 7 4.95-3.85L20.73 21l1.41-1.41z" fill="white" transform="translate(4 4)" stroke-width="0" />
|
||||
</g>
|
||||
<g id="icon-logo-3" transform="scale(1.1) translate(-1 -2)">
|
||||
<path id="rect5611" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" stroke="none" />
|
||||
<g id="g5792" fill="none" stroke="#fff" stroke-width="3" transform="matrix(.84382 0 0 .84382 5 2.53)">
|
||||
<path id="path5774" fill-rule="evenodd" d="M22.399 10.08c-5.964-3.689-11.363-3.732-17.222 0 .155 4.418-.316 11.882 8.61 15.957 9.228-4.38 8.532-11.89 8.612-15.957z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-shot-3" stroke="none" transform="">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z" fill="white" transform="translate(4 4)" stroke-width="0" />
|
||||
</g>
|
||||
<g id="icon-reg-1" stroke="none" transform="scale(1.1) translate(-2 -1)">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M11 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM5 18c.2-.63 2.57-1.68 4.96-1.94l2.04-2c-.39-.04-.68-.06-1-.06-2.67 0-8 1.34-8 4v2h9l-2-2H5zm15.6-5.5l-5.13 5.17-2.07-2.08L12 17l3.47 3.5L22 13.91z" fill="white" transform="translate(5 3)" stroke-width="1" />
|
||||
</g>
|
||||
<g id="icon-cancel-1" stroke="none">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="white" stroke="white" transform="translate(4 4)" stroke-width="1" />
|
||||
</g>
|
||||
<g id="icon-check-1" stroke="none">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="white" transform="translate(4 4)" stroke-width="1" stroke="white" />
|
||||
</g>
|
||||
<g id="icon-pin-1" stroke="none">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M13 16.12c3.47-.41 6.17-3.36 6.17-6.95 0-3.87-3.13-7-7-7s-7 3.13-7 7c0 3.47 2.52 6.34 5.83 6.89V20H5v2h14v-2h-6v-3.88z" fill="white" transform="translate(4 4)" stroke-width="0" stroke="white" />
|
||||
</g>
|
||||
<g id="icon-check-2" stroke="none" transform="scale(1.1) translate(-2 -1)">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z" fill="white" transform="translate(4 4)" stroke-width="0" stroke="white" />
|
||||
</g>
|
||||
<g id="icon-map-1" stroke="none">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z" fill="white" transform="translate(4 4)" stroke-width="1" />
|
||||
</g>
|
||||
<g id="icon-sticker-3" stroke="none">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<g>
|
||||
<path fill="#fff" fill-rule="evenodd" stroke-width=".767" d="M12 24l4 6 3.5-6.405z" transform="rotate(45 16 16)" />
|
||||
<circle cx="16" cy="15" r="9.5" fill="#fff" stroke-width="1.851" />
|
||||
<circle cx="16" cy="15" r="6.5" fill="black" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-poly-3" transform="scale(1.1) translate(-3 -2)" stroke="none">
|
||||
<path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black" />
|
||||
<g fill="white" transform="translate(2 0.5)">
|
||||
<path stroke-width="2.3" fill="none" fill-rule="evenodd" stroke="#fff" stroke-linejoin="round" d="M7.924 12.991l8.569-4.989-6.55 14.587 13.762-7.974-3.958 9.12" />
|
||||
<circle cx="7.711" cy="13" r="1" fill="black" stroke-width="2.5" stroke="white" />
|
||||
<circle cx="16.5" cy="8" r="1" fill="black" stroke-width="2.5" stroke="white" />
|
||||
<circle cx="10" cy="22" r="1" fill="black" stroke-width="2.5" stroke="white" />
|
||||
<circle cx="19.7" cy="23.701" r="1" fill="black" stroke-width="2.5" stroke="white" />
|
||||
<circle cx="24" cy="14.5" r="1" fill="black" stroke-width="2.5" stroke="white" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-poly-4" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2zm0 0c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z" fill="white" stroke="white" stroke-width="1" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-get-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="white" stroke="white" stroke-width="1" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-folder-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-folder-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-cycle-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-link-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-shot-4" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M14.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-trash-5" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-trash-6" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<g transform="scale(1.25) translate(1 1)">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-copy-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-sync-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-block-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-edit-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-eye-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-gpx-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M8 23h8v-2H8v2zm8-21.99L8 1c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM16 15H8V5h8v10z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-arrow-up-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<circle cx="16" cy="16" fill="white" r="4" />
|
||||
</g>
|
||||
<g id="icon-more-vert" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-star-blank" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-star-fill" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<path d="m12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)" />
|
||||
</g>
|
||||
<g id="icon-cluster-1" stroke="none">
|
||||
<rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
|
||||
<circle cx="10" cy="21" fill="white" r="4" />
|
||||
<circle cx="22" cy="21" fill="white" r="4" />
|
||||
<circle cx="16" cy="11" fill="white" r="4" />
|
||||
</g>
|
||||
<g id="icon-chevron-down" stroke="none">
|
||||
<g transform="scale(2) translate(-4 -3)">
|
||||
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-sad-1" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<g transform="translate(4 4)">
|
||||
<circle cx="15.5" cy="9.5" r="1.5" fill="white" stroke="none" />
|
||||
<circle cx="8.5" cy="9.5" r="1.5" fill="white" stroke="none" />
|
||||
<path d="M12 14c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5zm-.01-12C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="white" stroke="none" stroke-width="0" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-search" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<g transform="translate(4 4)">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-reverse" stroke="none">
|
||||
<path stroke="none" fill="black" />
|
||||
<g transform="translate(6 4)">
|
||||
<path d="M9.832 2.934c-.967 0-1.683-.018-1.683-.018L7.021 0l-3.1 6.51 5.843 2.368-.777-3.032s.351-.051.845-.052a6.974 6.974 0 016.973 6.972 6.973 6.973 0 01-.922 3.457l2.07 2.07a9.833 9.833 0 001.711-5.527c0-5.43-4.402-9.831-9.832-9.832zm-8.094 4.27A9.833 9.833 0 000 12.766c0 5.43 4.402 9.832 9.832 9.832 1.108 0 1.398-.153 1.398-.153l.902 2.4 3.734-5.378-6.43-1.959.914 2.2s.046.03-.518.031a6.974 6.974 0 01-6.973-6.973 6.974 6.974 0 01.948-3.494z" fill="#fff" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-drop-start" stroke="none">
|
||||
<g transform="translate(6 12)" fill="white">
|
||||
<path d="M23.528 6.662H11.979L9.953 4.98l2.026-1.887h11.549zM7.572 9.755l2.183-2.183-2.696-2.695 2.696-2.695L7.572 0 4.877 2.695 2.182 0 0 2.182l2.695 2.695L0 7.572l2.182 2.183 2.695-2.696z" fill="#fff" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-drop-end" stroke="none">
|
||||
<g transform="translate(6 12)" fill="white">
|
||||
<path d="M0 3.093h11.548l2.026 1.681-2.026 1.888H0zM15.955 0l-2.182 2.182 2.695 2.695-2.695 2.695 2.182 2.183 2.695-2.696 2.696 2.696 2.182-2.183-2.696-2.695 2.696-2.695L21.346 0 18.65 2.695z" fill="#fff" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-undo" stroke="none">
|
||||
<g transform="translate(8 8)" fill="white">
|
||||
<path d="M5.912 1.278c-.967 0-2.84.42-2.84.42L2.257 0 0 4.855 5.094 6.19l-.777-1.938s1.101-.113 1.595-.115a6.974 6.974 0 016.972 6.973 6.97 6.97 0 01-.921 3.457l2.07 2.07a9.833 9.833 0 001.71-5.527c0-5.43-4.401-9.832-9.831-9.832z" fill="#fff" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-redo" stroke="none">
|
||||
<g transform="translate(8 8)" fill="white">
|
||||
<path d="M9.832 1.278c.967 0 2.84.42 2.84.42L13.486 0l2.257 4.855L10.65 6.19l.777-1.938s-1.101-.113-1.595-.115a6.974 6.974 0 00-6.973 6.973 6.97 6.97 0 00.922 3.457l-2.07 2.07A9.833 9.833 0 010 11.11c0-5.43 4.402-9.832 9.832-9.832z" fill="#fff" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-draw-forward" stroke="none">
|
||||
<g transform="translate(4 11)" fill="white">
|
||||
<path d="M19.38 0l5.374 4.547-5.374 4.655V0z" />
|
||||
<path d="M0 2.872h19.91v3.569H0z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-draw-backward" stroke="none">
|
||||
<g transform="translate(4 11)" fill="white">
|
||||
<path d="M5.374 9.202L0 4.655 5.374 0v9.202z" />
|
||||
<path d="M24.754 6.33H4.844V2.762h19.91z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-to-poly" stroke="none">
|
||||
<path d="M0 0h32v32H0z" fill="black" />
|
||||
<path d="M7.924 12.991l8.569-4.989-6.55 14.587 13.762-7.974-3.958 9.12" fill="none" stroke="#fff" stroke-width="2.387" stroke-linejoin="round"/>
|
||||
<circle transform="rotate(75)" r="2.387" cy="-4.523" cx="14.711" fill="#fff"/>
|
||||
<circle transform="rotate(75)" r="2.387" cy="-13.883" cx="12.17" fill="#fff"/>
|
||||
<circle transform="rotate(75)" r="2.387" cy="-19.194" cx="20.342" fill="#fff"/>
|
||||
<circle transform="rotate(75)" cx="24.138" cy="-3.701" r="5.48" fill="black" />
|
||||
<circle transform="rotate(75)" cx="27.918" cy="-13.025" r="2.387" fill="#fff"/>
|
||||
|
||||
<path d="M8.224 18.144v3.132H2.357v3.891h5.867v3.012l5.86-5.077z"/>
|
||||
</g>
|
||||
|
||||
<g id="icon-start">
|
||||
<path d="M15.646 2.959a12.688 12.688 0 00-8 2.85v1.837h8zm0 4.687v8h8v-8zm8 0h1.838a12.688 12.688 0 00-1.838-1.835zm0 8v8h1.836a12.688 12.688 0 002.852-8zm0 8h-8v4.688a12.688 12.688 0 008-2.85zm-8 0v-8h-8v8zm-8 0H5.81a12.688 12.688 0 001.837 1.836zm0-8v-8H5.811a12.688 12.688 0 00-2.852 8z" fill="#fff"/>
|
||||
<path d="M15.646 0A15.646 15.646 0 000 15.646a15.646 15.646 0 0015.646 15.647 15.646 15.646 0 0015.647-15.647A15.646 15.646 0 0015.646 0zm0 3.24a12.407 12.407 0 0112.408 12.406 12.407 12.407 0 01-12.408 12.408A12.407 12.407 0 013.24 15.646 12.407 12.407 0 0115.646 3.24z" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
</defs>
|
||||
|
||||
<use xlink:href="#icon-trash-6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 36 KiB |
9287
public/images/stickers-base.svg
Normal file
9287
public/images/stickers-base.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 612 KiB |
|
|
@ -43,6 +43,6 @@ export const Fills = () => (
|
|||
<path d="m 2.625,3.375 h 7.5 L 10.28125,1.609375 13.5,4.25 10.484375,6.921875 10.171875,5.15625 2.625,5.125 Z" fill="#ff3344" fillRule="evenodd" />
|
||||
</g>
|
||||
</defs>
|
||||
<image xlinkHref={require('~/sprites/stickers/stickers-base.svg')} width={0} height={0} />
|
||||
<image xlinkHref="/images/stickers-base.svg" width={0} height={0} />
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export const Icon = memo(({ icon, size = 32 }: { icon: string; size?: number })
|
|||
<svg width={size} height={size} viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<mask id={`icon-mask-${icon}`}>
|
||||
<use xlinkHref={`${require('~/sprites/icon.svg')}#${icon}`} x={0} y={0} />
|
||||
<use xlinkHref={`/images/icon.svg#${icon}`} x={0} y={0} />
|
||||
</mask>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="32" height="32" stroke="none" mask={`url(#icon-mask-${icon})`} />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
|
||||
import { App } from '~/containers/App';
|
||||
import '~/styles/main.less';
|
||||
import '~/styles/_main.scss';
|
||||
|
||||
import { Provider } from 'react-redux';
|
||||
import { PersistGate } from 'redux-persist/integration/react';
|
||||
|
|
|
|||
171
src/styles/_main.scss
Normal file
171
src/styles/_main.scss
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
@import 'colors.scss';
|
||||
|
||||
@import 'map.scss';
|
||||
@import 'panel.scss';
|
||||
@import 'router.scss';
|
||||
@import 'stickers.scss';
|
||||
@import 'button.scss';
|
||||
@import 'logo.scss';
|
||||
@import 'user-button.scss';
|
||||
@import 'save.scss';
|
||||
@import 'renderer.scss';
|
||||
@import 'dialogs.scss';
|
||||
@import 'progress.scss';
|
||||
@import 'slider.scss';
|
||||
@import 'switch.scss';
|
||||
@import 'gpx.scss';
|
||||
|
||||
body {
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-size: 15px;
|
||||
// letter-spacing: 0.4px;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.gray {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: $color_success;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: $color_primary;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: $color_danger;
|
||||
}
|
||||
|
||||
.cursor-tooltip {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 4;
|
||||
fill: black;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-icon-sticker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: cover;
|
||||
background-position: 0 50%;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.track-vertical {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
.thumb-vertical {
|
||||
position: absolute;
|
||||
width: 20px !important;
|
||||
left: -10px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
transition: background 250ms;
|
||||
cursor: grab;
|
||||
|
||||
&:hover, &:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $mobile_breakpoint) {
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 5px 10px 5px 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: $panel_radius;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
:global {
|
||||
.button {
|
||||
background: #444444;
|
||||
padding: 4px 16px;
|
||||
height: 18px;
|
||||
line-height: 1em;
|
||||
border-radius: @button_radius;
|
||||
border-radius: $button_radius;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
display: inline-flex;
|
||||
|
|
@ -61,12 +60,11 @@
|
|||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
border-radius: @button_radius 0 0 @button_radius;
|
||||
border-radius: $button_radius 0 0 $button_radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 @button_radius @button_radius 0;
|
||||
border-radius: 0 $button_radius $button_radius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@blue_primary: #55ddff;
|
||||
@blue_secondary: #7137c8;
|
||||
|
||||
@router_line: #4597d0;
|
||||
|
||||
@bar_background: #333333;
|
||||
@dialog_background: #271535;
|
||||
|
||||
@location_line: #ff3344;
|
||||
|
||||
@green_primary: #abc837;
|
||||
@green_secondary: #009c80;
|
||||
|
||||
@red_primary: #ff7034;
|
||||
@red_secondary: #ff3344;
|
||||
|
||||
@panel_radius: 8px;
|
||||
@button_radius: 6px;
|
||||
|
||||
@color_primary: #4597d0;
|
||||
@color_success: #7cd766;
|
||||
@color_danger: #ff3344;
|
||||
|
||||
@bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
|
||||
@dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
|
||||
|
||||
@mobile_breakpoint: 768px;
|
||||
@micro_breakpoint: 450px;
|
||||
|
||||
@tooltip_background: #123740;
|
||||
|
||||
@loading_shade: darken(fade(@blue_secondary, 80%), 20%);
|
||||
@cluster_small: #0069a7;
|
||||
|
||||
@title_dialog_color: fade(#111111, 85%);
|
||||
35
src/styles/colors.scss
Normal file
35
src/styles/colors.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
$blue_primary: #55ddff;
|
||||
$blue_secondary: #7137c8;
|
||||
|
||||
$router_line: #4597d0;
|
||||
|
||||
$bar_background: #333333;
|
||||
$dialog_background: #271535;
|
||||
|
||||
$location_line: #ff3344;
|
||||
|
||||
$green_primary: #abc837;
|
||||
$green_secondary: #009c80;
|
||||
|
||||
$red_primary: #ff7034;
|
||||
$red_secondary: #ff3344;
|
||||
|
||||
$panel_radius: 8px;
|
||||
$button_radius: 6px;
|
||||
|
||||
$color_primary: #4597d0;
|
||||
$color_success: #7cd766;
|
||||
$color_danger: #ff3344;
|
||||
|
||||
$bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
|
||||
$dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
|
||||
|
||||
$mobile_breakpoint: 768px;
|
||||
$micro_breakpoint: 450px;
|
||||
|
||||
$tooltip_background: #123740;
|
||||
|
||||
$loading_shade: darken($blue_secondary, 20%);
|
||||
$cluster_small: #0069a7;
|
||||
|
||||
$title_dialog_color: fade(#111111, 85%);
|
||||
|
|
@ -1,544 +0,0 @@
|
|||
:global {
|
||||
.dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 10px 10px 68px 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
pointer-events: none;
|
||||
transition: transform 500ms, background-color 500ms 500ms;
|
||||
|
||||
&.active {
|
||||
transform: translate3d(0, 0, 0);
|
||||
pointer-events: all;
|
||||
transition: transform 500ms 250ms, background-color 250ms;
|
||||
|
||||
.dialog-close-button {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
width: 100%;
|
||||
z-index: 6;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
padding: 0 0 68px 0;
|
||||
|
||||
&.active {
|
||||
background: rgba(19, 45, 53, 0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-close-button {
|
||||
position: absolute;
|
||||
right: -38px;
|
||||
bottom: 68px;
|
||||
background: @red_secondary;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
transform: translate3d(-48px, 0, 0);
|
||||
border-radius: 0 @panel_radius @panel_radius 0;
|
||||
opacity: 0;
|
||||
|
||||
transition: all 250ms 250ms;
|
||||
z-index: -1;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
border-radius: @panel_radius;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
background: @dialog_background;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background: @dialog_background;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: @panel_radius @panel_radius 0 @panel_radius;
|
||||
box-shadow: @dialog_shadow;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.full {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-flex-scroll {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.nominatim-dialog-content {
|
||||
padding-bottom: 48px;
|
||||
min-height: 25vh;
|
||||
}
|
||||
|
||||
.nominatim-list-item {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding-bottom: 200px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
text-overflow: hidden;
|
||||
font-size: 12px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-shader {
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist-pulse {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: linear-gradient(fade(@loading_shade, 0%), @loading_shade 70%);
|
||||
height: 100px;
|
||||
pointer-events: none;
|
||||
transition: opacity 100ms;
|
||||
opacity: 0;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
animation: pulse 500ms 250ms infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist-loader {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
opacity: 0.1;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
padding-top: 200px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
|
||||
.spin {
|
||||
animation: spin infinite reverse 2s linear;
|
||||
}
|
||||
|
||||
.dialog-maplist-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
|
||||
svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-wrapper {
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.has_edit {
|
||||
//transform: translateY(-2px);
|
||||
.route-row {
|
||||
background: fade(@green_secondary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&.is_menu_target {
|
||||
.route-row,
|
||||
.route-row-fav {
|
||||
transform: translateX(-120px);
|
||||
}
|
||||
|
||||
.route-row-edit-menu {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-editor {
|
||||
color: white;
|
||||
padding: 5px 0 5px;
|
||||
}
|
||||
|
||||
.route-row-buttons {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.route-row-view {
|
||||
overflow: hidden;
|
||||
transition: height 500ms;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
&.has_menu {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit {
|
||||
background: fade(@green_secondary, 30%);
|
||||
}
|
||||
|
||||
.route-row-drop {
|
||||
background: fade(@red_secondary, 20%);
|
||||
|
||||
.route-row {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.route-row {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 10px 10px 5px 10px;
|
||||
color: white;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 250ms, transform 500ms;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 64px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.route-row-panel {
|
||||
transform: scaleY(1);
|
||||
pointer-events: all;
|
||||
touch-action: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-button {
|
||||
width: 32px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
fill: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 250ms;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-fav {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
fill: fade(white, 30%);
|
||||
background: fade(white, 8%);
|
||||
cursor: pointer;
|
||||
transition: background 250ms, transform 500ms;
|
||||
|
||||
&:hover {
|
||||
background: fade(white, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-menu {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
right: 32px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
fill: fade(white, 30%);
|
||||
|
||||
div {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
box-shadow: fade(black, 30%) 1px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: fade(@red_secondary, 30%);
|
||||
}
|
||||
|
||||
&.modify-button {
|
||||
&:hover {
|
||||
background: fade(@green_secondary, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 2.4em;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
|
||||
.route-row-corner {
|
||||
svg {
|
||||
fill: fade(white, 50%);
|
||||
margin-right: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-description {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.3;
|
||||
margin-bottom: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
vertical-align: text-bottom;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 10px;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog-tabs {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
height: 32px;
|
||||
user-select: none;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
||||
.dialog-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
height: 48px;
|
||||
|
||||
.dialog-tab {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-head-title {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.app-info-changelog {
|
||||
color: white;
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
|
||||
div {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-number {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.app-info-changelog-item {
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.app-info-current {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.3;
|
||||
display: inline;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-version {
|
||||
padding-bottom: 5px;
|
||||
flex: 1;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.app-info-release {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-info-build {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-info-change {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.app-info-number {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-list {
|
||||
padding: 5px 0;
|
||||
|
||||
div {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
542
src/styles/dialogs.scss
Normal file
542
src/styles/dialogs.scss
Normal file
|
|
@ -0,0 +1,542 @@
|
|||
.dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 10px 10px 68px 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
pointer-events: none;
|
||||
transition: transform 500ms, background-color 500ms 500ms;
|
||||
|
||||
&.active {
|
||||
transform: translate3d(0, 0, 0);
|
||||
pointer-events: all;
|
||||
transition: transform 500ms 250ms, background-color 250ms;
|
||||
|
||||
.dialog-close-button {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
width: 100%;
|
||||
z-index: 6;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
padding: 0 0 68px 0;
|
||||
|
||||
&.active {
|
||||
background: rgba(19, 45, 53, 0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-close-button {
|
||||
position: absolute;
|
||||
right: -38px;
|
||||
bottom: 68px;
|
||||
background: $red_secondary;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
transform: translate3d(-48px, 0, 0);
|
||||
border-radius: 0 $panel_radius $panel_radius 0;
|
||||
opacity: 0;
|
||||
|
||||
transition: all 250ms 250ms;
|
||||
z-index: -1;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
border-radius: $panel_radius;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
background: $dialog_background;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background: $dialog_background;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: $panel_radius $panel_radius 0 $panel_radius;
|
||||
box-shadow: $dialog_shadow;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.full {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-flex-scroll {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.nominatim-dialog-content {
|
||||
padding-bottom: 48px;
|
||||
min-height: 25vh;
|
||||
}
|
||||
|
||||
.nominatim-list-item {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding-bottom: 200px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
text-overflow: hidden;
|
||||
font-size: 12px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-shader {
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist-pulse {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: linear-gradient(fade($loading_shade, 0%), $loading_shade 70%);
|
||||
height: 100px;
|
||||
pointer-events: none;
|
||||
transition: opacity 100ms;
|
||||
opacity: 0;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
animation: pulse 500ms 250ms infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist-loader {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
opacity: 0.1;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
padding-top: 200px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
|
||||
.spin {
|
||||
animation: spin infinite reverse 2s linear;
|
||||
}
|
||||
|
||||
.dialog-maplist-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
|
||||
svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-wrapper {
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.has_edit {
|
||||
//transform: translateY(-2px);
|
||||
.route-row {
|
||||
background: fade($green_secondary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&.is_menu_target {
|
||||
.route-row,
|
||||
.route-row-fav {
|
||||
transform: translateX(-120px);
|
||||
}
|
||||
|
||||
.route-row-edit-menu {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-editor {
|
||||
color: white;
|
||||
padding: 5px 0 5px;
|
||||
}
|
||||
|
||||
.route-row-buttons {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.route-row-view {
|
||||
overflow: hidden;
|
||||
transition: height 500ms;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
&.has_menu {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit {
|
||||
background: fade($green_secondary, 30%);
|
||||
}
|
||||
|
||||
.route-row-drop {
|
||||
background: fade($red_secondary, 20%);
|
||||
|
||||
.route-row {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.route-row {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 10px 10px 5px 10px;
|
||||
color: white;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 250ms, transform 500ms;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 64px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.route-row-panel {
|
||||
transform: scaleY(1);
|
||||
pointer-events: all;
|
||||
touch-action: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-button {
|
||||
width: 32px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
fill: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 250ms;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-fav {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
fill: fade(white, 30%);
|
||||
background: fade(white, 8%);
|
||||
cursor: pointer;
|
||||
transition: background 250ms, transform 500ms;
|
||||
|
||||
&:hover {
|
||||
background: fade(white, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-menu {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
right: 32px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
fill: fade(white, 30%);
|
||||
|
||||
div {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
box-shadow: fade(black, 30%) 1px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: fade($red_secondary, 30%);
|
||||
}
|
||||
|
||||
&.modify-button {
|
||||
&:hover {
|
||||
background: fade($green_secondary, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 2.4em;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
|
||||
.route-row-corner {
|
||||
svg {
|
||||
fill: fade(white, 50%);
|
||||
margin-right: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-description {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.3;
|
||||
margin-bottom: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
vertical-align: text-bottom;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 10px;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog-tabs {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border-radius: $panel_radius $panel_radius 0 0;
|
||||
height: 32px;
|
||||
user-select: none;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
||||
.dialog-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
border-radius: $panel_radius $panel_radius 0 0;
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
height: 48px;
|
||||
|
||||
.dialog-tab {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-head-title {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.app-info-changelog {
|
||||
color: white;
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
|
||||
div {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-number {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.app-info-changelog-item {
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.app-info-current {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.3;
|
||||
display: inline;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-version {
|
||||
padding-bottom: 5px;
|
||||
flex: 1;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.app-info-release {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-info-build {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-info-change {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.app-info-number {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-list {
|
||||
padding: 5px 0;
|
||||
|
||||
div {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
:global {
|
||||
.gpx-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.gpx-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
padding: 5px 10px;
|
||||
min-width: 0;
|
||||
|
||||
&_disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__color {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
// span {
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-buttons {
|
||||
padding: 10px;
|
||||
|
||||
& > * {
|
||||
margin: 2.5px 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .button {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-confirm {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
z-index: 5;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
border-radius: @panel_radius;
|
||||
box-sizing: border-box;
|
||||
background: lighten(@bar_background, 10%);
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
|
||||
}
|
||||
}
|
||||
99
src/styles/gpx.scss
Normal file
99
src/styles/gpx.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.gpx-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.gpx-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
padding: 5px 10px;
|
||||
min-width: 0;
|
||||
|
||||
&_disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__color {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
// span {
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-buttons {
|
||||
padding: 10px;
|
||||
|
||||
& > * {
|
||||
margin: 2.5px 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .button {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-confirm {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
z-index: 5;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
border-radius: $panel_radius;
|
||||
box-sizing: border-box;
|
||||
background: lighten($bar_background, 10%);
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
:global {
|
||||
.logo-preview {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 58px;
|
||||
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
background: 100% 100% no-repeat;
|
||||
|
||||
&.top {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/styles/logo.scss
Normal file
22
src/styles/logo.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.logo-preview {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 58px;
|
||||
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
background: 100% 100% no-repeat;
|
||||
|
||||
&.top {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
@import 'colors.less';
|
||||
|
||||
@import 'map.less';
|
||||
@import 'panel.less';
|
||||
@import 'router.less';
|
||||
@import 'stickers.less';
|
||||
@import 'button.less';
|
||||
@import 'logo.less';
|
||||
@import 'user-button.less';
|
||||
@import 'save.less';
|
||||
@import 'renderer.less';
|
||||
@import 'dialogs.less';
|
||||
@import 'progress.less';
|
||||
@import 'slider.less';
|
||||
@import 'switch.less';
|
||||
@import 'gpx.less';
|
||||
|
||||
:global {
|
||||
body {
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-size: 15px;
|
||||
// letter-spacing: 0.4px;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.gray {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: @color_success;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: @color_primary;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: @color_danger;
|
||||
}
|
||||
|
||||
.cursor-tooltip {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 4;
|
||||
fill: black;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-icon-sticker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: cover;
|
||||
background-position: 0 50%;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.track-vertical {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
.thumb-vertical {
|
||||
position: absolute;
|
||||
width: 20px !important;
|
||||
left: -10px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
transition: background 250ms;
|
||||
cursor: grab;
|
||||
|
||||
&:hover, &:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @mobile_breakpoint) {
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 5px 10px 5px 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: @panel_radius;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,367 +0,0 @@
|
|||
:global {
|
||||
#map {
|
||||
width: 50% !important;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
border-radius: @panel_radius !important;
|
||||
}
|
||||
|
||||
@keyframes vertex_spin {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-vertex-drag-helper {
|
||||
pointer-events: none !important;
|
||||
background: fade(red, 50%);
|
||||
border-radius: 12px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid @red_secondary;
|
||||
border-radius: 24px;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: -9px;
|
||||
animation: vertex_spin 500ms infinite linear alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.vertex-icon-mixin(@left, @right) {
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: @left;
|
||||
right: @right;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
transform: scale(1);
|
||||
transition: transform 150ms;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-vertex-icon {
|
||||
outline: none !important;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
margin-left: -8px !important;
|
||||
margin-top: -8px !important;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
|
||||
&::before {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: none;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
transform: translate(-4px, -4px);
|
||||
border-radius: 16px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
&::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translate(-8px, -8px);
|
||||
background: rgba(255, 50, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.vertex-icon-mixin(4px, auto);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-arrow {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: -18px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-arrow-icon {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.leaflet-km-marker,
|
||||
.leaflet-km-marker-2 {
|
||||
position: absolute;
|
||||
z-index: 0 !important;
|
||||
|
||||
.leaflet-km-dist {
|
||||
background: @red_secondary;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
svg {
|
||||
transform: translate(-50%, 0) rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-marker {
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.end-marker {
|
||||
.leaflet-km-dist {
|
||||
left: auto;
|
||||
right: -3px;
|
||||
top: -2px;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
padding: 1px 15px 1px 6px;
|
||||
border-radius: 10px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.leaflet-km-dist {
|
||||
padding: 2px 4px 2px 16px;
|
||||
left: -3px;
|
||||
right: auto;
|
||||
|
||||
&::after {
|
||||
left: 5px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.router-marker {
|
||||
div {
|
||||
background: @router_line;
|
||||
color: white;
|
||||
left: auto;
|
||||
right: 15px;
|
||||
// transform: translate(50%, 0);
|
||||
top: -3px;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
padding: 0 6px 0 6px;
|
||||
border-radius: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.right {
|
||||
div {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-dist {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
.touch-hinter-poly {
|
||||
stroke: rgba(255, 50, 0, 0.1);
|
||||
cursor: grab;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
stroke: rgba(255, 50, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: @bar_shadow !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.leaflet-bar a {
|
||||
background: @bar_background;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
user-select: none;
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background: @bar_background;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.location-marker {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
margin-left: -10px;
|
||||
margin-top: -2px;
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
background: @red_secondary;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
box-shadow: 0 0 0 3px @red_secondary;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: @red_secondary;
|
||||
left: 8.5px;
|
||||
top: -9px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-top {
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.custom-marker-cluster {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: @cluster_small;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
box-shadow: fade(@cluster_small, 70%) 0 0 0 5px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
transform: translate(-12px, -12px);
|
||||
transition: box-shadow 250ms;
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
|
||||
}
|
||||
|
||||
span {
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
bottom: 11px;
|
||||
background: @cluster_small;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
#canvas {
|
||||
background: #eeeeee;
|
||||
z-index: 0;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-pane {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.current-location {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
fill: @bar_background;
|
||||
stroke: white;
|
||||
stroke-width: 0.2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
365
src/styles/map.scss
Normal file
365
src/styles/map.scss
Normal file
|
|
@ -0,0 +1,365 @@
|
|||
#map {
|
||||
width: 50% !important;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
border-radius: $panel_radius !important;
|
||||
}
|
||||
|
||||
@keyframes vertex_spin {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-vertex-drag-helper {
|
||||
pointer-events: none !important;
|
||||
background: fade(red, 50%);
|
||||
border-radius: 12px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid $red_secondary;
|
||||
border-radius: 24px;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: -9px;
|
||||
animation: vertex_spin 500ms infinite linear alternate;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertex-icon-mixin($left, $right) {
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: $left;
|
||||
right: $right;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
transform: scale(1);
|
||||
transition: transform 150ms;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-vertex-icon {
|
||||
outline: none !important;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
margin-left: -8px !important;
|
||||
margin-top: -8px !important;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
|
||||
&::before {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: none;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
transform: translate(-4px, -4px);
|
||||
border-radius: 16px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
&::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translate(-8px, -8px);
|
||||
background: rgba(255, 50, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@include vertex-icon-mixin(4px, auto);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-arrow {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: -18px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-arrow-icon {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.leaflet-km-marker,
|
||||
.leaflet-km-marker-2 {
|
||||
position: absolute;
|
||||
z-index: 0 !important;
|
||||
|
||||
.leaflet-km-dist {
|
||||
background: $red_secondary;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
svg {
|
||||
transform: translate(-50%, 0) rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-marker {
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.end-marker {
|
||||
.leaflet-km-dist {
|
||||
left: auto;
|
||||
right: -3px;
|
||||
top: -2px;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
padding: 1px 15px 1px 6px;
|
||||
border-radius: 10px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.leaflet-km-dist {
|
||||
padding: 2px 4px 2px 16px;
|
||||
left: -3px;
|
||||
right: auto;
|
||||
|
||||
&::after {
|
||||
left: 5px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.router-marker {
|
||||
div {
|
||||
background: $router_line;
|
||||
color: white;
|
||||
left: auto;
|
||||
right: 15px;
|
||||
// transform: translate(50%, 0);
|
||||
top: -3px;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
padding: 0 6px 0 6px;
|
||||
border-radius: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.right {
|
||||
div {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-dist {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
.touch-hinter-poly {
|
||||
stroke: rgba(255, 50, 0, 0.1);
|
||||
cursor: grab;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
stroke: rgba(255, 50, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: $bar_shadow !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.leaflet-bar a {
|
||||
background: $bar_background;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
user-select: none;
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background: $bar_background;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.location-marker {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
margin-left: -10px;
|
||||
margin-top: -2px;
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
background: $red_secondary;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
box-shadow: 0 0 0 3px $red_secondary;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: $red_secondary;
|
||||
left: 8.5px;
|
||||
top: -9px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-top {
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.custom-marker-cluster {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: $cluster_small;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
box-shadow: fade($cluster_small, 70%) 0 0 0 5px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
transform: translate(-12px, -12px);
|
||||
transition: box-shadow 250ms;
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: fade($cluster_small, 70%) 0 0 0 7px;
|
||||
}
|
||||
|
||||
span {
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
bottom: 11px;
|
||||
background: $cluster_small;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
#canvas {
|
||||
background: #eeeeee;
|
||||
z-index: 0;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-pane {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.current-location {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
fill: $bar_background;
|
||||
stroke: white;
|
||||
stroke-width: 0.2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,796 +0,0 @@
|
|||
:global {
|
||||
.control-bar {
|
||||
background: @bar_background;
|
||||
border-radius: @panel_radius;
|
||||
display: flex;
|
||||
box-shadow: @bar_shadow;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar-padded {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.control-sep {
|
||||
height: 36px;
|
||||
background: #222222;
|
||||
width: 4px;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-bar {
|
||||
background: #222222;
|
||||
margin: 0 -1px;
|
||||
padding: 0 1px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: @panel_radius 0 0 @panel_radius;
|
||||
}
|
||||
|
||||
.panel & button {
|
||||
height: 40px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__undo {
|
||||
opacity: 0;
|
||||
transform: translate(50px, 0);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: transform 0.25s, opacity 0.25s;
|
||||
z-index: -1;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
pointer-events: all;
|
||||
touch-action: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
z-index: 6;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: translateY(100px);
|
||||
transition: transform 500ms;
|
||||
|
||||
&.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.center {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
color: white;
|
||||
align-items: center;
|
||||
transition: background-color 500ms;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: @panel_radius 0 0 @panel_radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 @panel_radius @panel_radius 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
svg {
|
||||
fill: url(#activeButtonGradient);
|
||||
stroke: url(#activeButtonGradient);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.inactive {
|
||||
color: #999999;
|
||||
|
||||
svg {
|
||||
fill: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
// background: linear-gradient(270deg, #0f5871, #444444 60%);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.single {
|
||||
border-radius: @panel_radius;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
stroke: white;
|
||||
display: inline;
|
||||
fill-rule: evenodd;
|
||||
stroke-linecap: butt;
|
||||
stroke-linejoin: miter;
|
||||
stroke-miterlimit: 4;
|
||||
stroke-dasharray: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-tooltip {
|
||||
position: absolute;
|
||||
bottom: 58px;
|
||||
left: 50%;
|
||||
background: @tooltip_background;
|
||||
padding: 10px;
|
||||
transform: translate(-50%, -10px);
|
||||
border-radius: @panel_radius;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 250ms;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
background: @tooltip_background;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 5px) rotate(45deg);
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&.top {
|
||||
bottom: auto;
|
||||
top: 43px;
|
||||
transform: translate(-50%, 10px);
|
||||
|
||||
&::after {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
transform: translate(-50%, -5px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel button,
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
|
||||
&:hover .panel-tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar-counter {
|
||||
color: white;
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
box-sizing: border-box;
|
||||
transform: translate(50%, 50%);
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.panel-separator {
|
||||
height: 48px;
|
||||
width: 4px;
|
||||
background: #222222;
|
||||
}
|
||||
|
||||
.panel-user {
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
z-index: 3;
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
|
||||
.control-sep {
|
||||
opacity: 0;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @micro_breakpoint) {
|
||||
bottom: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-dialog {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 68px;
|
||||
z-index: 3;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 48px;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px;
|
||||
background: #222222;
|
||||
border-radius: @panel_radius;
|
||||
|
||||
&.bottom.right {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
&.top {
|
||||
bottom: auto;
|
||||
top: 52px;
|
||||
}
|
||||
|
||||
&.left,
|
||||
&__left {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
|
||||
@media (max-width: @micro_breakpoint) {
|
||||
left: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.helper:first-child {
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
}
|
||||
|
||||
.helper:last-child {
|
||||
border-radius: 0 0 @panel_radius @panel_radius;
|
||||
}
|
||||
|
||||
.helper:only-child {
|
||||
border-radius: @panel_radius;
|
||||
}
|
||||
|
||||
&__big {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 620px;
|
||||
|
||||
@media (max-width: @micro_breakpoint) {
|
||||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
|
||||
&__medium {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 417px;
|
||||
|
||||
@media (max-width: @micro_breakpoint) {
|
||||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
|
||||
&__small {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 324px;
|
||||
|
||||
@media (max-width: @micro_breakpoint) {
|
||||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-dialog-provider {
|
||||
width: 500px;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.helper {
|
||||
// width: 500px;
|
||||
padding: 12px;
|
||||
font-weight: 200;
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
|
||||
//background: #222222;
|
||||
//border-radius: @panel_radius;
|
||||
box-shadow: @bar_shadow;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-prefetch {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.helper__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: @color_success;
|
||||
|
||||
svg {
|
||||
fill: @color_success;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: @color_danger;
|
||||
|
||||
svg {
|
||||
fill: @color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: @color_danger;
|
||||
|
||||
svg {
|
||||
fill: @color_danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.helper__icon_button {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
svg {
|
||||
fill: url(#activeButtonGradient);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helper__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
stroke: white;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.trash-buttons {
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
flex-direction: column;
|
||||
|
||||
.button-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-helper {
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
padding: 16px 0 16px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.helper-back {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
svg {
|
||||
fill: @bar_background;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-menu-item {
|
||||
padding: 8px 20px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 16px;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 14px;
|
||||
position: absolute;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.provider-helper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
.provider-helper-thumb {
|
||||
height: 100px;
|
||||
background: #333333;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background: 50% 50% no-repeat;
|
||||
border-radius: @panel_radius;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.provider-helper-check {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 20px;
|
||||
transform: translate(50%, 50%);
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
height: 32px;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
|
||||
&.bottom {
|
||||
top: auto;
|
||||
bottom: 68px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
|
||||
.status-bar {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #222222;
|
||||
display: flex;
|
||||
font-weight: 200;
|
||||
color: #cccccc;
|
||||
user-select: none;
|
||||
border-radius: @panel_radius;
|
||||
margin-right: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: @bar_shadow;
|
||||
outline: none;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.square {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&.padded {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: shade(@red_secondary, 10%);
|
||||
|
||||
svg {
|
||||
//fill: @red_secondary;
|
||||
fill: black;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-only {
|
||||
padding: 0 10px 0 15px;
|
||||
}
|
||||
|
||||
&.top-control {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #cccccc;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.status-bar-tip {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar-tip {
|
||||
position: absolute;
|
||||
background: @bar_background;
|
||||
top: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
right: 0;
|
||||
border-radius: @panel_radius;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.status-bar-sep {
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin: 0 8px 0 5px;
|
||||
}
|
||||
|
||||
.dialog-prefetch-stage {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dialog-prefetch-progress {
|
||||
padding: 10px 0 5px;
|
||||
}
|
||||
|
||||
.speed-helper {
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
|
||||
.rc-slider {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
padding: 10px 10px 58px 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.title-dialog-sizer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.title-dialog {
|
||||
z-index: 2;
|
||||
transition: opacity 500ms, transform 1s;
|
||||
transform: translate(0, 68px);
|
||||
user-select: none;
|
||||
pointer-events: all;
|
||||
touch-action: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.title-dialog-pane {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: @title_dialog_color;
|
||||
color: fade(white, 50%);
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
border-radius: @panel_radius;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0 5px 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.6em;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog-text {
|
||||
overflow: hidden;
|
||||
transition: height 500ms;
|
||||
line-height: 14px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
color: white;
|
||||
|
||||
> div {
|
||||
margin: 10px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
&.has_shade {
|
||||
::after {
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: linear-gradient(fade(@title_dialog_color, 0), @title_dialog_color);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: opacity 250ms;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-bar {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.nominatim-panel {
|
||||
position: fixed;
|
||||
bottom: 53px;
|
||||
left: 10px;
|
||||
width: 272px;
|
||||
}
|
||||
|
||||
.nominatim-search-input {
|
||||
padding-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
794
src/styles/panel.scss
Normal file
794
src/styles/panel.scss
Normal file
|
|
@ -0,0 +1,794 @@
|
|||
.control-bar {
|
||||
background: $bar_background;
|
||||
border-radius: $panel_radius;
|
||||
display: flex;
|
||||
box-shadow: $bar_shadow;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar-padded {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.control-sep {
|
||||
height: 36px;
|
||||
background: #222222;
|
||||
width: 4px;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-bar {
|
||||
background: #222222;
|
||||
margin: 0 -1px;
|
||||
padding: 0 1px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $panel_radius 0 0 $panel_radius;
|
||||
}
|
||||
|
||||
.panel & button {
|
||||
height: 40px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__undo {
|
||||
opacity: 0;
|
||||
transform: translate(50px, 0);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: transform 0.25s, opacity 0.25s;
|
||||
z-index: -1;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
pointer-events: all;
|
||||
touch-action: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
z-index: 6;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: translateY(100px);
|
||||
transition: transform 500ms;
|
||||
|
||||
&.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.center {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
color: white;
|
||||
align-items: center;
|
||||
transition: background-color 500ms;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $panel_radius 0 0 $panel_radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $panel_radius $panel_radius 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
svg {
|
||||
fill: url(#activeButtonGradient);
|
||||
stroke: url(#activeButtonGradient);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.inactive {
|
||||
color: #999999;
|
||||
|
||||
svg {
|
||||
fill: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
// background: linear-gradient(270deg, #0f5871, #444444 60%);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: linear-gradient(150deg, $blue_primary, $blue_secondary) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(150deg, $green_primary, $green_secondary) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: linear-gradient(150deg, $red_primary, $red_secondary) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.single {
|
||||
border-radius: $panel_radius;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
stroke: white;
|
||||
display: inline;
|
||||
fill-rule: evenodd;
|
||||
stroke-linecap: butt;
|
||||
stroke-linejoin: miter;
|
||||
stroke-miterlimit: 4;
|
||||
stroke-dasharray: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-tooltip {
|
||||
position: absolute;
|
||||
bottom: 58px;
|
||||
left: 50%;
|
||||
background: $tooltip_background;
|
||||
padding: 10px;
|
||||
transform: translate(-50%, -10px);
|
||||
border-radius: $panel_radius;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 250ms;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
background: $tooltip_background;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 5px) rotate(45deg);
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&.top {
|
||||
bottom: auto;
|
||||
top: 43px;
|
||||
transform: translate(-50%, 10px);
|
||||
|
||||
&::after {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
transform: translate(-50%, -5px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel button,
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
|
||||
&:hover .panel-tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar-counter {
|
||||
color: white;
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
box-sizing: border-box;
|
||||
transform: translate(50%, 50%);
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.panel-separator {
|
||||
height: 48px;
|
||||
width: 4px;
|
||||
background: #222222;
|
||||
}
|
||||
|
||||
.panel-user {
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
z-index: 3;
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
|
||||
.control-sep {
|
||||
opacity: 0;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $micro_breakpoint) {
|
||||
bottom: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-dialog {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 68px;
|
||||
z-index: 3;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 48px;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px;
|
||||
background: #222222;
|
||||
border-radius: $panel_radius;
|
||||
|
||||
&.bottom.right {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
&.top {
|
||||
bottom: auto;
|
||||
top: 52px;
|
||||
}
|
||||
|
||||
&.left,
|
||||
&__left {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
|
||||
@media (max-width: $micro_breakpoint) {
|
||||
left: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.helper:first-child {
|
||||
border-radius: $panel_radius $panel_radius 0 0;
|
||||
}
|
||||
|
||||
.helper:last-child {
|
||||
border-radius: 0 0 $panel_radius $panel_radius;
|
||||
}
|
||||
|
||||
.helper:only-child {
|
||||
border-radius: $panel_radius;
|
||||
}
|
||||
|
||||
&__big {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 620px;
|
||||
|
||||
@media (max-width: $micro_breakpoint) {
|
||||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
|
||||
&__medium {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 417px;
|
||||
|
||||
@media (max-width: $micro_breakpoint) {
|
||||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
|
||||
&__small {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 324px;
|
||||
|
||||
@media (max-width: $micro_breakpoint) {
|
||||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-dialog-provider {
|
||||
width: 500px;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.helper {
|
||||
// width: 500px;
|
||||
padding: 12px;
|
||||
font-weight: 200;
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
|
||||
//background: #222222;
|
||||
//border-radius: $panel_radius;
|
||||
box-shadow: $bar_shadow;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-prefetch {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.helper__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: $color_success;
|
||||
|
||||
svg {
|
||||
fill: $color_success;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: $color_danger;
|
||||
|
||||
svg {
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: $color_danger;
|
||||
|
||||
svg {
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.helper__icon_button {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
svg {
|
||||
fill: url(#activeButtonGradient);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helper__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
stroke: white;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.trash-buttons {
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
flex-direction: column;
|
||||
|
||||
.button-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-helper {
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
padding: 16px 0 16px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.helper-back {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
svg {
|
||||
fill: $bar_background;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-menu-item {
|
||||
padding: 8px 20px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 16px;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 14px;
|
||||
position: absolute;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.provider-helper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
.provider-helper-thumb {
|
||||
height: 100px;
|
||||
background: #333333;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background: 50% 50% no-repeat;
|
||||
border-radius: $panel_radius;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.provider-helper-check {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 20px;
|
||||
transform: translate(50%, 50%);
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
height: 32px;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
|
||||
&.bottom {
|
||||
top: auto;
|
||||
bottom: 68px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
|
||||
.status-bar {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #222222;
|
||||
display: flex;
|
||||
font-weight: 200;
|
||||
color: #cccccc;
|
||||
user-select: none;
|
||||
border-radius: $panel_radius;
|
||||
margin-right: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: $bar_shadow;
|
||||
outline: none;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.square {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&.padded {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: shade($red_secondary, 10%);
|
||||
|
||||
svg {
|
||||
//fill: $red_secondary;
|
||||
fill: black;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-only {
|
||||
padding: 0 10px 0 15px;
|
||||
}
|
||||
|
||||
&.top-control {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #cccccc;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.status-bar-tip {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar-tip {
|
||||
position: absolute;
|
||||
background: $bar_background;
|
||||
top: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
right: 0;
|
||||
border-radius: $panel_radius;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.status-bar-sep {
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin: 0 8px 0 5px;
|
||||
}
|
||||
|
||||
.dialog-prefetch-stage {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dialog-prefetch-progress {
|
||||
padding: 10px 0 5px;
|
||||
}
|
||||
|
||||
.speed-helper {
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
|
||||
.rc-slider {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
padding: 10px 10px 58px 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.title-dialog-sizer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.title-dialog {
|
||||
z-index: 2;
|
||||
transition: opacity 500ms, transform 1s;
|
||||
transform: translate(0, 68px);
|
||||
user-select: none;
|
||||
pointer-events: all;
|
||||
touch-action: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.title-dialog-pane {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: $title_dialog_color;
|
||||
color: fade(white, 50%);
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
border-radius: $panel_radius;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0 5px 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.6em;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog-text {
|
||||
overflow: hidden;
|
||||
transition: height 500ms;
|
||||
line-height: 14px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
color: white;
|
||||
|
||||
> div {
|
||||
margin: 10px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
&.has_shade {
|
||||
::after {
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: linear-gradient(fade($title_dialog_color, 0), $title_dialog_color);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: opacity 250ms;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-bar {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.nominatim-panel {
|
||||
position: fixed;
|
||||
bottom: 53px;
|
||||
left: 10px;
|
||||
width: 272px;
|
||||
}
|
||||
|
||||
.nominatim-search-input {
|
||||
padding-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
:global {
|
||||
.progress {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 5px;
|
||||
background: #111111;
|
||||
border-radius: @panel_radius;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bar {
|
||||
width: 30%;
|
||||
background: linear-gradient(270deg, @blue_primary, @blue_secondary);
|
||||
height: 100%;
|
||||
border-radius: @panel_radius;
|
||||
transition: width 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/styles/progress.scss
Normal file
16
src/styles/progress.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.progress {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 5px;
|
||||
background: #111111;
|
||||
border-radius: $panel_radius;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bar {
|
||||
width: 30%;
|
||||
background: linear-gradient(270deg, $blue_primary, $blue_secondary);
|
||||
height: 100%;
|
||||
border-radius: $panel_radius;
|
||||
transition: width 500ms;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
:global {
|
||||
.renderer-shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 80px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
img#rendererOutput {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.croppr-region {
|
||||
box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.croppr-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.renderer-logo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
53
src/styles/renderer.scss
Normal file
53
src/styles/renderer.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.renderer-shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 80px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
img#rendererOutput {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.croppr-region {
|
||||
box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.croppr-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.renderer-logo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
:global {
|
||||
.router-waypoint {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px @router_line;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px @router_line;
|
||||
background: @router_line;
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.router-helper {
|
||||
}
|
||||
|
||||
.router-helper__button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
41
src/styles/router.scss
Normal file
41
src/styles/router.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.router-waypoint {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px $router_line;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px $router_line;
|
||||
background: $router_line;
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.router-helper {
|
||||
}
|
||||
|
||||
.router-helper__button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
:global {
|
||||
.save-helper {
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.save-title {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
|
||||
flex-direction: column;
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
font-weight: 200;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.save-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @loading_shade;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 250ms;
|
||||
opacity: 0;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.2em;
|
||||
color: fade(white, 70%);
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
touch-action: auto;
|
||||
pointer-events: all;
|
||||
|
||||
svg {
|
||||
animation: jump infinite alternate 600ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.save-title-input {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: @panel_radius;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.save-title-label {
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.save-address-input {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
input {
|
||||
padding: 5px 5px 5px 2px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.save-address-label {
|
||||
display: flex;
|
||||
padding: 5px 0 5px 10px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.save-address-copy {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0 5px;
|
||||
border-radius: 0 @panel_radius @panel_radius 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.save-text {
|
||||
padding: 10px;
|
||||
line-height: 1.1em;
|
||||
min-height: 2.2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.save-buttons {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-buttons-text {
|
||||
flex: 1;
|
||||
padding: 0 10px 2px 10px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.switch {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
textarea {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-controls {
|
||||
padding: 5px 10px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
183
src/styles/save.scss
Normal file
183
src/styles/save.scss
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
.save-helper {
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.save-title {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
|
||||
flex-direction: column;
|
||||
border-radius: $panel_radius $panel_radius 0 0;
|
||||
font-weight: 200;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.save-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $loading_shade;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 250ms;
|
||||
opacity: 0;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.2em;
|
||||
color: fade(white, 70%);
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
touch-action: auto;
|
||||
pointer-events: all;
|
||||
|
||||
svg {
|
||||
animation: jump infinite alternate 600ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.save-title-input {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: $panel_radius;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.save-title-label {
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.save-address-input {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
input {
|
||||
padding: 5px 5px 5px 2px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.save-address-label {
|
||||
display: flex;
|
||||
padding: 5px 0 5px 10px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.save-address-copy {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0 5px;
|
||||
border-radius: 0 $panel_radius $panel_radius 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.save-text {
|
||||
padding: 10px;
|
||||
line-height: 1.1em;
|
||||
min-height: 2.2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.save-buttons {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-buttons-text {
|
||||
flex: 1;
|
||||
padding: 0 10px 2px 10px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.switch {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
textarea {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-controls {
|
||||
padding: 5px 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -1,18 +1,15 @@
|
|||
@prefixClass: rc-slider;
|
||||
$disabledColor: #ccc;
|
||||
$border-radius-base: 6px;
|
||||
$primary-color: transparent;
|
||||
$tooltip-color: #fff;
|
||||
$tooltip-bg: darken(#666, 4%);
|
||||
$tooltip-arrow-width: 4px;
|
||||
$tooltip-distance: $tooltip-arrow-width+4;
|
||||
$tooltip-arrow-color: $tooltip-bg;
|
||||
$ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||
$ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
|
||||
@disabledColor: #ccc;
|
||||
@border-radius-base: 6px;
|
||||
@primary-color: transparent;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: tint(#666, 4%);
|
||||
@tooltip-arrow-width: 4px;
|
||||
@tooltip-distance: @tooltip-arrow-width+4;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
|
||||
:global {
|
||||
.borderBox() {
|
||||
@mixin borderBox() {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
|
||||
|
|
@ -20,25 +17,26 @@
|
|||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass} {
|
||||
:global {
|
||||
.rc-slider {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
// width: 100%;
|
||||
margin: 8px;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: $border-radius-base;
|
||||
touch-action: none;
|
||||
|
||||
.borderBox();
|
||||
@include borderBox();
|
||||
|
||||
&-rail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: $border-radius-base;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -46,8 +44,8 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
background: linear-gradient(270deg, @red_secondary, @blue_secondary);
|
||||
border-radius: $border-radius-base;
|
||||
background: linear-gradient(270deg, $red_secondary, $blue_secondary);
|
||||
// background-size: 320px 100px;
|
||||
}
|
||||
|
||||
|
|
@ -57,11 +55,9 @@
|
|||
margin-top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
border-radius: 50%;
|
||||
border: solid 2px tint(@primary-color, 50%);
|
||||
border: solid 2px darken($primary-color, 50%);
|
||||
background-color: #fff;
|
||||
touch-action: pan-x;
|
||||
|
||||
|
|
@ -79,24 +75,23 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
// border-color: tint(@primary-color, 20%);
|
||||
box-shadow: 0 0 0 4px tint(@primary-color, 50%);
|
||||
// border-color: darken($primary-color, 20%);
|
||||
box-shadow: 0 0 0 4px darken($primary-color, 50%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-click-focused:focus {
|
||||
// border-color: tint(@primary-color, 50%);
|
||||
// border-color: darken($primary-color, 50%);
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
border-color: darken($primary-color, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
box-shadow: 0 0 5px tint(@primary-color, 20%);
|
||||
cursor: -webkit-grabbing;
|
||||
border-color: darken($primary-color, 20%);
|
||||
box-shadow: 0 0 5px darken($primary-color, 20%);
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
|
@ -141,38 +136,38 @@
|
|||
vertical-align: middle;
|
||||
|
||||
&-active {
|
||||
// border-color: tint(@primary-color, 50%);
|
||||
// border-color: darken($primary-color, 50%);
|
||||
background-color: white;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.@{prefixClass}-track {
|
||||
background-color: @disabledColor;
|
||||
.rc-slider-track {
|
||||
background-color: $disabledColor;
|
||||
}
|
||||
|
||||
.@{prefixClass}-handle, .@{prefixClass}-dot {
|
||||
border-color: @disabledColor;
|
||||
.rc-slider-handle, .rc-slider-dot {
|
||||
border-color: $disabledColor;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
|
||||
.rc-slider-mark-text, .rc-slider-dot, .rc-slider-track {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-vertical {
|
||||
.rc-slider-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
|
||||
.@{prefixClass} {
|
||||
.rc-slider {
|
||||
&-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
|
|
@ -218,42 +213,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.motion-common() {
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-leave {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
}
|
||||
.@{className}-leave.@{className}-leave-active {
|
||||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
.zoom-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
transform: scale(0, 0); // need this by yiminghe
|
||||
animation-timing-function: @ease-out-quint;
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: @ease-in-quint;
|
||||
}
|
||||
}
|
||||
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -278,20 +237,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-tooltip {
|
||||
.rc-slider-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
|
||||
.borderBox();
|
||||
@include borderBox();
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-placement-top {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
padding: $tooltip-arrow-width 0 $tooltip-distance 0;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
|
|
@ -300,11 +259,11 @@
|
|||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: @tooltip-color;
|
||||
color: $tooltip-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: $tooltip-bg;
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
}
|
||||
|
||||
|
|
@ -317,11 +276,11 @@
|
|||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||
bottom: $tooltip-distance - $tooltip-arrow-width;
|
||||
left: 50%;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
:global {
|
||||
.leaflet-dragging .sticker-container {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.sticker-container {
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: transform 250ms;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
|
||||
&.leaflet-drag-target {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
background: @red_secondary;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -24px;
|
||||
top: -24px;
|
||||
position: absolute;
|
||||
border-radius: 40px;
|
||||
opacity: 0.25;
|
||||
transform: scale(0.5);
|
||||
transition: opacity 250ms, transform 500ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: transform 250ms;
|
||||
|
||||
.sticker-delete {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
&:before {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
transition: transform 250ms;
|
||||
|
||||
.sticker-delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sticker-desc.is_empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-label {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
//background: white;
|
||||
//border-radius: 32px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
outline: none;
|
||||
|
||||
//&:after {
|
||||
// content: ' ';
|
||||
// box-shadow: 0 0 0 1px #ff3344;
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
// left: -16px;
|
||||
// top: -16px;
|
||||
// position: absolute;
|
||||
// border-radius: 40px;
|
||||
// pointer-events: none;
|
||||
// opacity: 0;
|
||||
//}
|
||||
|
||||
svg {
|
||||
left: -8px;
|
||||
top: -8px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sticker-image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
left: -12px;
|
||||
top: -12px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.sticker-desc {
|
||||
padding: 10px 36px 10px 10px;
|
||||
left: auto;
|
||||
right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-wrapper {
|
||||
will-change: transform;
|
||||
transition: transform 250ms;
|
||||
|
||||
@media (hover: hover) {
|
||||
transition: transform 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-arrow {
|
||||
position: absolute;
|
||||
transform-origin: 0 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff3344;' /%3E%3C/svg%3E") no-repeat;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-45deg);
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-delete {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: red;
|
||||
border-radius: 24px;
|
||||
transition: transform 500ms;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
left: 28px;
|
||||
top: -16px;
|
||||
z-index: 20;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2) !important;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stickers-helper {
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.stickers-grid {
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stickers-set-title {
|
||||
opacity: 0.3;
|
||||
font-size: 0.8em;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background-color: #666666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-preview {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
transition: transform 250ms;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-desc {
|
||||
min-width: 60px;
|
||||
z-index: -1;
|
||||
height: auto;
|
||||
background: #222222;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 10px 36px;
|
||||
}
|
||||
|
||||
.sticker-desc-sizer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
padding: 1px;
|
||||
|
||||
textarea {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
resize: none;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
263
src/styles/stickers.scss
Normal file
263
src/styles/stickers.scss
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
.leaflet-dragging .sticker-container {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.sticker-container {
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: transform 250ms;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
|
||||
&.leaflet-drag-target {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
background: $red_secondary;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -24px;
|
||||
top: -24px;
|
||||
position: absolute;
|
||||
border-radius: 40px;
|
||||
opacity: 0.25;
|
||||
transform: scale(0.5);
|
||||
transition: opacity 250ms, transform 500ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: transform 250ms;
|
||||
|
||||
.sticker-delete {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
&:before {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
pointer-events: none;
|
||||
transition: transform 250ms;
|
||||
|
||||
.sticker-delete {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sticker-desc.is_empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-label {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
//background: white;
|
||||
//border-radius: 32px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
outline: none;
|
||||
|
||||
//&:after {
|
||||
// content: ' ';
|
||||
// box-shadow: 0 0 0 1px #ff3344;
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
// left: -16px;
|
||||
// top: -16px;
|
||||
// position: absolute;
|
||||
// border-radius: 40px;
|
||||
// pointer-events: none;
|
||||
// opacity: 0;
|
||||
//}
|
||||
|
||||
svg {
|
||||
left: -8px;
|
||||
top: -8px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sticker-image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
left: -12px;
|
||||
top: -12px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.sticker-desc {
|
||||
padding: 10px 36px 10px 10px;
|
||||
left: auto;
|
||||
right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-wrapper {
|
||||
will-change: transform;
|
||||
transition: transform 250ms;
|
||||
|
||||
@media (hover: hover) {
|
||||
transition: transform 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-arrow {
|
||||
position: absolute;
|
||||
transform-origin: 0 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff3344;' /%3E%3C/svg%3E") no-repeat;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-45deg);
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-delete {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: red;
|
||||
border-radius: 24px;
|
||||
transition: transform 500ms;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
left: 28px;
|
||||
top: -16px;
|
||||
z-index: 20;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2) !important;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stickers-helper {
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.stickers-grid {
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stickers-set-title {
|
||||
opacity: 0.3;
|
||||
font-size: 0.8em;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background-color: #666666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-preview {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
transition: transform 250ms;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-desc {
|
||||
min-width: 60px;
|
||||
z-index: -1;
|
||||
height: auto;
|
||||
background: #222222;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 10px 36px;
|
||||
}
|
||||
|
||||
.sticker-desc-sizer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
padding: 1px;
|
||||
|
||||
textarea {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
resize: none;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
:global {
|
||||
.switch {
|
||||
height: 1em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: inset white 0 0 0 0.1em;
|
||||
display: inline-flex;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
transition: all 500ms;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0.2em;
|
||||
top: 0.2em;
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
border-radius: 0.3em;
|
||||
background: white;
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: white;
|
||||
|
||||
&::after {
|
||||
left: 1.2em;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/styles/switch.scss
Normal file
32
src/styles/switch.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.switch {
|
||||
height: 1em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: inset white 0 0 0 0.1em;
|
||||
display: inline-flex;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
transition: all 500ms;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0.2em;
|
||||
top: 0.2em;
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
border-radius: 0.3em;
|
||||
background: white;
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: white;
|
||||
|
||||
&::after {
|
||||
left: 1.2em;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
:global {
|
||||
.user-bar {
|
||||
// width: 160px;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-bar-guest {
|
||||
// width: 168px;
|
||||
@media (min-width: @mobile_breakpoint) {
|
||||
width: 158px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button {
|
||||
width: 120px;
|
||||
padding-left: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
width: 0;
|
||||
|
||||
.user-button-fields {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-picture {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: cover;
|
||||
background: rgba(0, 0, 0, 0.3) 50% 50%;
|
||||
border-radius: 3px 0 0 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.user-button-fields {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 10px 0 10px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-button-text {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
padding-top: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.user-panel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-panel-menu {
|
||||
position: absolute;
|
||||
bottom: 58px;
|
||||
left: 0;
|
||||
width: 219px;
|
||||
background: @dialog_background;
|
||||
border-radius: @panel_radius;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: -1;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-title {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px;
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-panel-ver {
|
||||
font-size: 12px;
|
||||
vertical-align: text-top;
|
||||
opacity: 0.5;
|
||||
padding-left: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.user-panel-item {
|
||||
padding: 10px 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: all 250ms;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
display: block;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child::after {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(150deg, @blue_primary, @blue_secondary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-text {
|
||||
padding: 10px;
|
||||
opacity: 0.5;
|
||||
font-weight: 200;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
div {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
158
src/styles/user-button.scss
Normal file
158
src/styles/user-button.scss
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
.user-bar {
|
||||
// width: 160px;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-bar-guest {
|
||||
// width: 168px;
|
||||
@media (min-width: $mobile_breakpoint) {
|
||||
width: 158px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button {
|
||||
width: 120px;
|
||||
padding-left: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
width: 0;
|
||||
|
||||
.user-button-fields {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-picture {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: cover;
|
||||
background: rgba(0, 0, 0, 0.3) 50% 50%;
|
||||
border-radius: 3px 0 0 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.user-button-fields {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 10px 0 10px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-button-text {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
padding-top: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.user-panel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-panel-menu {
|
||||
position: absolute;
|
||||
bottom: 58px;
|
||||
left: 0;
|
||||
width: 219px;
|
||||
background: $dialog_background;
|
||||
border-radius: $panel_radius;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: -1;
|
||||
|
||||
@media (max-width: $mobile_breakpoint) {
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-title {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px;
|
||||
border-radius: $panel_radius $panel_radius 0 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-panel-ver {
|
||||
font-size: 12px;
|
||||
vertical-align: text-top;
|
||||
opacity: 0.5;
|
||||
padding-left: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.user-panel-item {
|
||||
padding: 10px 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: all 250ms;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
display: block;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child::after {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(150deg, $blue_primary, $blue_secondary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-text {
|
||||
padding: 10px;
|
||||
opacity: 0.5;
|
||||
font-weight: 200;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
div {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue