mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
buttons and icons
This commit is contained in:
muerwre
parent
5cb229ae90
commit
2375bc3f57
6 changed files with 77 additions and 13 deletions
|
|
@ -106,7 +106,7 @@ export class EditorPanel extends React.PureComponent {
|
|||
|
||||
<div className="control-bar">
|
||||
<button
|
||||
className="highlighted"
|
||||
className="highlighted cancel"
|
||||
onClick={this.stopEditing}
|
||||
>
|
||||
<span>ОТМЕНА</span>
|
||||
|
|
@ -117,7 +117,7 @@ export class EditorPanel extends React.PureComponent {
|
|||
onClick={this.startSaveMode}
|
||||
>
|
||||
<span>СХОРОНИТЬ</span>
|
||||
<Icon icon="icon-save" />
|
||||
<Icon icon="icon-save-2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 819 B After Width: | Height: | Size: 707 B |
|
|
@ -139,7 +139,7 @@
|
|||
<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.2) translate(-2 -2)">
|
||||
<g id="icon-shot-2" stroke="none" transform="scale(1.1) translate(-2 -2)">
|
||||
<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"/>
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
</g>
|
||||
|
||||
<g id="icon-trash-2" stroke="none">
|
||||
<g transform="translate(-4 -3) scale(3.82445) scale(1.2)">
|
||||
<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"/>
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
</g>
|
||||
</g>
|
||||
|
||||
<g id="icon-logo-2" transform="scale(1.2) translate(-3 -2)">
|
||||
<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"/>
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
</g>
|
||||
</g>
|
||||
|
||||
<g id="icon-sticker-2" transform="scale(1.2) translate(-3 -2)" stroke="none">
|
||||
<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"/>
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
</g>
|
||||
</g>
|
||||
|
||||
<g id="icon-route-2" transform="scale(1.2) translate(32 -2)" stroke="none">
|
||||
<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"/>
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
</g>
|
||||
</g>
|
||||
|
||||
<g id="icon-poly-2" transform="scale(1.2) translate(-3 -2)" stroke="none">
|
||||
<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)"/>
|
||||
|
|
@ -197,6 +197,14 @@
|
|||
<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(-3 -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>
|
||||
</svg>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 19 KiB |
|
|
@ -7,6 +7,7 @@
|
|||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="600"
|
||||
|
|
@ -17,7 +18,29 @@
|
|||
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
|
||||
sodipodi:docname="icons_draft.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
id="defs2">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient8806">
|
||||
<stop
|
||||
style="stop-color:#2ad4ff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop8802" />
|
||||
<stop
|
||||
style="stop-color:#5a2ca0;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop8804" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient8806"
|
||||
id="linearGradient8808"
|
||||
x1="-60.605404"
|
||||
y1="-51.468327"
|
||||
x2="-51.154362"
|
||||
y2="-34.093327"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#333333"
|
||||
|
|
@ -25,9 +48,9 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="4"
|
||||
inkscape:cx="-158.00628"
|
||||
inkscape:cy="4.4652866"
|
||||
inkscape:zoom="5.6568542"
|
||||
inkscape:cx="-59.116412"
|
||||
inkscape:cy="72.422571"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="svg8"
|
||||
showgrid="false"
|
||||
|
|
@ -611,4 +634,32 @@
|
|||
style="opacity:1;fill:none;fill-opacity:1;stroke:#ff5555;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
transform="matrix(0.5,0,0,0.5,-64,-49.407377)"
|
||||
id="g8789"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96">
|
||||
<g
|
||||
id="g8773"
|
||||
style="fill:#1a1a1a">
|
||||
<rect
|
||||
y="0"
|
||||
x="0"
|
||||
height="32"
|
||||
width="32"
|
||||
id="rect8771"
|
||||
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
|
||||
rx="4"
|
||||
ry="4" />
|
||||
</g>
|
||||
<g
|
||||
id="g8775"
|
||||
transform="matrix(0.625,0,0,0.625,6,6)"
|
||||
style="stroke:#ff5555" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:url(#linearGradient8808);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.60278547;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="M -55.560547 -48.251953 A 1.6027855 1.6027855 45 0 0 -56.037109 -48.197266 A 1.6027855 1.6027855 45 0 0 -57.216797 -46.783203 L -60.574219 -44.828125 A 1.6027855 1.6027855 45 0 0 -61.667969 -44.923828 A 1.6027855 1.6027855 45 0 0 -62.800781 -42.960938 A 1.6027855 1.6027855 45 0 0 -60.837891 -41.826172 A 1.6027855 1.6027855 45 0 0 -59.65625 -43.509766 L -57.421875 -44.810547 L -60.15625 -38.71875 A 1.6027855 1.6027855 45 0 0 -60.5625 -38.666016 A 1.6027855 1.6027855 45 0 0 -61.695312 -36.703125 A 1.6027855 1.6027855 45 0 0 -59.732422 -35.568359 A 1.6027855 1.6027855 45 0 0 -58.558594 -36.910156 L -52.527344 -40.404297 L -53.625 -37.875 A 1.6027855 1.6027855 45 0 0 -53.857422 -37.833984 A 1.6027855 1.6027855 45 0 0 -54.990234 -35.871094 A 1.6027855 1.6027855 45 0 0 -53.027344 -34.738281 A 1.6027855 1.6027855 45 0 0 -51.894531 -36.701172 A 1.6027855 1.6027855 45 0 0 -52.154297 -37.240234 L -50.664062 -40.671875 A 1.6027855 1.6027855 45 0 0 -50.341797 -40.724609 A 1.6027855 1.6027855 45 0 0 -49.208984 -42.6875 A 1.6027855 1.6027855 45 0 0 -51.171875 -43.820312 A 1.6027855 1.6027855 45 0 0 -52.357422 -42.355469 L -58.316406 -38.902344 L -55.556641 -45.050781 A 1.6027855 1.6027855 45 0 0 -55.207031 -45.101562 A 1.6027855 1.6027855 45 0 0 -54.074219 -47.064453 A 1.6027855 1.6027855 45 0 0 -55.560547 -48.251953 z "
|
||||
transform="matrix(2,0,0,2,128,98.814754)"
|
||||
id="path8777" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 27 KiB |
|
|
@ -12,5 +12,5 @@
|
|||
@green_primary: #abc837;
|
||||
@green_secondary: #009c80;
|
||||
|
||||
@red_primary: #ff8100;
|
||||
@red_primary: #ff7034;
|
||||
@red_secondary: #ff3344;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
transition: background-color 500ms;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 100, 100, 0.2);
|
||||
|
|
@ -91,6 +92,10 @@
|
|||
background: #555555;
|
||||
}
|
||||
|
||||
&.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%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue