muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

appearance: icons fixed

Browse source
This commit is contained in:
muerwre 2018-11-27 12:02:04 +07:00
parent 9e186397e0
commit 169d4d4222
16 changed files with 290 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

5
package-lock.json generated
View file

@ -12044,6 +12044,11 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true "dev": true
}, },
"typeface-pt-sans": {
"version": "0.0.54",
"resolved": "https://registry.npmjs.org/typeface-pt-sans/-/typeface-pt-sans-0.0.54.tgz",
"integrity": "sha512-uvf3OIiTRXBly8iXD09iNZcLndJ89iGCyzWh4YzxdL+OMXPZxROupW8OR4JYo1RRfhzCdvebE6W/KrKDnAbdmw=="
},
"ua-parser-js": { "ua-parser-js": {
"version": "0.7.18", "version": "0.7.18",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",

1
package.json
View file

@ -71,6 +71,7 @@
"scrypt": "^6.0.3", "scrypt": "^6.0.3",
"styled-components": "^3.2.6", "styled-components": "^3.2.6",
"styled-theming": "^2.2.0", "styled-theming": "^2.2.0",
"typeface-pt-sans": "0.0.54",
"webpack-git-hash": "^1.0.2" "webpack-git-hash": "^1.0.2"
}, },
"flow-coverage-report": { "flow-coverage-report": {

36
src/components/panels/EditorPanel.jsx
View file

@ -73,7 +73,7 @@ class Component extends React.PureComponent<Props, void> {
</div> </div>
<div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}> <div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
<div className="control-bar"> <div className="control-bar control-bar-padded">
<button <button
className={classnames({ active: mode === MODES.ROUTER })} className={classnames({ active: mode === MODES.ROUTER })}
onClick={this.startRouterMode} onClick={this.startRouterMode}
@ -84,39 +84,45 @@ class Component extends React.PureComponent<Props, void> {
className={classnames({ active: mode === MODES.POLY })} className={classnames({ active: mode === MODES.POLY })}
onClick={this.startPolyMode} onClick={this.startPolyMode}
> >
<Icon icon="icon-poly-2" /> <Icon icon="icon-poly-3" />
</button> </button>
<button <button
className={classnames({ active: mode === MODES.STICKERS })} className={classnames({ active: mode === MODES.STICKERS })}
onClick={this.startStickerMode} onClick={this.startStickerMode}
> >
<Icon icon="icon-sticker-2" /> <Icon icon="icon-sticker-3" />
</button> </button>
</div> </div>
<div className="control-sep" /> <div className="control-sep" />
<div className="control-bar"> <div className="control-bar control-bar-padded">
<button
className={classnames({ active: mode === MODES.SHOTTER })}
onClick={this.startShotterMode}
>
<Icon icon="icon-shot-2" />
</button>
<button <button
className={classnames({ active: mode === MODES.TRASH })} className={classnames({ active: mode === MODES.TRASH })}
onClick={this.startTrashMode} onClick={this.startTrashMode}
> >
<Icon icon="icon-trash-2" /> <Icon icon="icon-trash-4" />
</button>
<button
className={classnames('disabled', { active: mode === MODES.SHOTTER })}
// onClick={this.startShotterMode}
>
<Icon icon="icon-shot-3" />
</button>
<button
className={classnames('disabled', { active: mode === MODES.LOGO })}
>
<Icon icon="icon-map-1" />
</button> </button>
<button <button
className={classnames({ active: mode === MODES.LOGO })} className={classnames({ active: mode === MODES.LOGO })}
onClick={this.startLogoMode} onClick={this.startLogoMode}
> >
<Icon icon="icon-logo-2" /> <Icon icon="icon-logo-3" />
</button> </button>
</div> </div>
@ -127,7 +133,7 @@ class Component extends React.PureComponent<Props, void> {
className="highlighted cancel" className="highlighted cancel"
onClick={this.props.stopEditing} onClick={this.props.stopEditing}
> >
<span>ОТМЕНА</span> <Icon icon="icon-cancel-1" />
</button> </button>
<button <button
@ -135,7 +141,7 @@ class Component extends React.PureComponent<Props, void> {
onClick={this.startSaveMode} onClick={this.startSaveMode}
> >
<span>СХОРОНИТЬ</span> <span>СХОРОНИТЬ</span>
<Icon icon="icon-save-2" /> <Icon icon="icon-check-1" />
</button> </button>
</div> </div>

17
src/components/router/RouterDialog.jsx
View file

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { Icon } from '$components/panels/Icon';
type Props = { type Props = {
routerCancel: Function, routerCancel: Function,
@ -9,8 +10,10 @@ type Props = {
const noPoints = ({ routerCancel }: Props) => ( const noPoints = ({ routerCancel }: Props) => (
<div className="helper router-helper"> <div className="helper router-helper">
<div className="helper__text"> <div className="helper__text">
<div className="big white">Укажите на карте первую точку маршрута</div> <Icon icon="icon-pin-1" />
<div className="small gray">Путь прокладывается по улицам, тротуарам и тропинкам</div> <div className="big white upper">
Укажите первую точку на карте
</div>
</div> </div>
<div className="helper__buttons"> <div className="helper__buttons">
<div className="button router-helper__button" onClick={routerCancel}> <div className="button router-helper__button" onClick={routerCancel}>
@ -23,8 +26,8 @@ const noPoints = ({ routerCancel }: Props) => (
const firstPoint = ({ routerCancel }: Props) => ( const firstPoint = ({ routerCancel }: Props) => (
<div className="helper router-helper"> <div className="helper router-helper">
<div className="helper__text"> <div className="helper__text">
<div className="big white">Укажите на карте конечную точку маршрута</div> <Icon icon="icon-pin-1" />
<div className="small gray"> Вы сможете добавить уточняющие точки</div> <div className="big white upper">Теперь - следующую</div>
</div> </div>
<div className="helper__buttons"> <div className="helper__buttons">
<div className="button router-helper__button" onClick={routerCancel}> <div className="button router-helper__button" onClick={routerCancel}>
@ -36,9 +39,9 @@ const firstPoint = ({ routerCancel }: Props) => (
const draggablePoints = ({ routerCancel, routerSubmit }: Props) => ( const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
<div className="helper router-helper"> <div className="helper router-helper">
<div className="helper__text"> <div className="helper__text success">
<div className="big white">Продолжите маршрут, щелкая по карте</div> <Icon icon="icon-check-1" />
<div className="small gray">Потяните линию, чтобы указать промежуточные точки</div> <div className="big upper">Продолжайте маршрут</div>
</div> </div>
<div className="helper__buttons button-group"> <div className="helper__buttons button-group">
<div className="button button_red router-helper__button" onClick={routerCancel}> <div className="button button_red router-helper__button" onClick={routerCancel}>

24
src/components/trash/TrashDialog.jsx
View file

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { Icon } from '$components/panels/Icon';
type Props = { type Props = {
clearPoly: Function, clearPoly: Function,
@ -12,18 +13,19 @@ export const TrashDialog = ({
}: Props) => ( }: Props) => (
<div className="helper trash-helper"> <div className="helper trash-helper">
<div className="helper__text"> <div className="helper__text">
<div className="big white">Уверены?</div> <div className="big white upper">Уверены?</div>
<div className="small gray">Мы все удалим</div>
</div> </div>
<div className="helper__buttons button-group"> <div className="helper__buttons">
<div className="button router-helper__button" onClick={clearStickers}> <div className="button-group">
Стикеры <div className="button router-helper__button" onClick={clearPoly}>
</div> Маршрут
<div className="button router-helper__button" onClick={clearPoly}> </div>
Маршрут <div className="button router-helper__button" onClick={clearStickers}>
</div> Стикеры
<div className="button danger router-helper__button" onClick={clearAll}> </div>
Очистить <div className="button danger router-helper__button" onClick={clearAll}>
Удалить все
</div>
</div> </div>
<div className="button primary router-helper__button" onClick={clearCancel}> <div className="button primary router-helper__button" onClick={clearCancel}>
Отмена Отмена

4
src/components/user/GuestButton.jsx
View file

@ -1,16 +1,18 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Icon } from '$components/panels/Icon';
type Props = { type Props = {
onClick: Function, onClick: Function,
} }
export const GuestButton = ({ onClick }: Props) => ( export const GuestButton = ({ onClick }: Props) => (
<div className="control-bar user-bar"> <div className="control-bar user-bar control-bar-padded">
<button <button
className="user-bar-guest" className="user-bar-guest"
onClick={onClick} onClick={onClick}
> >
<Icon icon="icon-reg-1" />
<span>ВОЙТИ</span> <span>ВОЙТИ</span>
</button> </button>
</div> </div>

2
src/index.html
View file

@ -3,7 +3,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=0.8"> <meta name="viewport" content="initial-scale=1, maximum-scale=0.8">
<link rel="icon" href="favicon.png?d" type="image/png" /> <link rel="icon" href="favicon.png?d" type="image/png" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow|PT+Sans:200,400,700|Rubik&amp;subset=cyrillic" rel="stylesheet">
<title>@ORCHID</title> <title>@ORCHID</title>
<link rel="shortcut icon" href="/favicon.png?wd" type="image/png"> <link rel="shortcut icon" href="/favicon.png?wd" type="image/png">

3
src/index.js
View file

@ -4,7 +4,8 @@ import ReactDOM from 'react-dom';
import { App } from '$containers/App'; import { App } from '$containers/App';
import '$styles/main.less'; import '$styles/main.less';
import 'raleway-cyrillic/raleway.css'; // import 'raleway-cyrillic/raleway.css';
// import 'typeface-pt-sans';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
// import { ConnectedRouter } from 'react-router-redux'; // import { ConnectedRouter } from 'react-router-redux';

96
src/sprites/icon.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
<defs> <defs>
<g id="icon-router"> <g id="icon-router">
<rect x="0" y="0" width="32" height="32" fill="black" stroke="none" /> <rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
@ -139,7 +139,7 @@
<path id="path5847" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M6.63 16.134h4.242"/> <path id="path5847" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M6.63 16.134h4.242"/>
</g> </g>
<g id="icon-shot-2" stroke="none" transform="scale(1.1) translate(-2 -2)"> <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"/> <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"/> <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"/> <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"/>
@ -198,13 +198,103 @@
</g> </g>
</g> </g>
<g id="icon-save-2" transform="scale(1.1) translate(-3 -2)" stroke="none"> <g id="icon-save-2" transform="scale(1.1) translate(-1 -2)" stroke="none">
<g fill="white"> <g fill="white">
<path id="rect4766" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black"/> <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="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)"/> <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> </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="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="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(5 3)" 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" 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="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(5 3)" 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-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" 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>
</svg> </svg>
</defs> </defs>
<use xlink:href="#icon-pin-1" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

134
src/sprites/icons.svg
View file

@ -1,70 +1,80 @@
<svg xmlns="http://www.w3.org/2000/svg" id="svg8" width="600" height="32"> <svg
<g id="g4853" transform="translate(-29.985 30.509)"> xmlns="http://www.w3.org/2000/svg"
<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"/> xmlns:xlink="http://www.w3.org/1999/xlink"
<path id="rect4834" fill="#fff" stroke-opacity=".941" stroke-width=".247" d="M15.535-28.417h5.616v.933h-5.616z"/> id="svg8"
<path id="rect4836" fill="#fff" stroke-opacity=".941" stroke-width=".293" d="M16.495-29.706v1.29h.671v-.761h2.66v.76h.67v-1.29z"/> width="32"
<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"/> height="32"
<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"/> <defs>
</g> <g id="g4853" transform="translate(-29.985 30.509)">
<g id="g4909" transform="translate(-.054 .888)"> <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="rect4855" fill="#fff" stroke-opacity=".941" stroke-width=".811" d="M16.272-27.384h4.266l-.397 4.3h-3.538z"/> <path id="rect4834" fill="#fff" stroke-opacity=".941" stroke-width=".247" d="M15.535-28.417h5.616v.933h-5.616z"/>
<path id="rect4857" fill="#fff" stroke-opacity=".941" stroke-width=".43" d="M15.809-28.939h5.192v.992h-5.192z"/> <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="rect4879" fill="#fff" stroke-opacity=".941" stroke-width=".502" d="M17.246-29.945v1.123h.586v-.66h1.005v.66h.587v-1.123z"/> <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"/>
<g id="g4900"> <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="path4885" fill-rule="evenodd" stroke-width=".265" d="M16.885-26.893l.187 3.508h.538l-.14-3.508z"/> <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"/>
<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> <g id="g4909" transform="translate(-.054 .888)">
<g id="icon-save" stroke-opacity=".941" transform="translate(-64)"> <path id="rect4855" fill="#fff" stroke-opacity=".941" stroke-width=".811" d="M16.272-27.384h4.266l-.397 4.3h-3.538z"/>
<path id="rect4766" stroke-width=".265" d="M0 0h32v32H0z"/> <path id="rect4857" fill="#fff" stroke-opacity=".941" stroke-width=".43" d="M15.809-28.939h5.192v.992h-5.192z"/>
<path id="rect4986" fill="#fff" stroke-width="2.491" d="M6.844 8.459V24h18.312V11.375H14.031V8.459z"/> <path id="rect4879" fill="#fff" stroke-opacity=".941" stroke-width=".502" d="M17.246-29.945v1.123h.586v-.66h1.005v.66h.587v-1.123z"/>
<rect id="rect4991" width="2.74" height="5.038" x="14.63" y="14.411" stroke-width="3.603" rx="0" ry="0"/> <g id="g4900">
<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)"/> <path id="path4885" fill-rule="evenodd" stroke-width=".265" d="M16.885-26.893l.187 3.508h.538l-.14-3.508z"/>
</g> <path id="path4887" fill-rule="evenodd" stroke-width=".265" d="M19.983-26.893l-.187 3.508h-.538l.14-3.508z"/>
<g id="g4982" stroke-opacity=".941" transform="translate(-32)"> <path id="rect4889" stroke-opacity=".941" stroke-width=".821" d="M18.165-26.881h.538v3.473h-.538z"/>
<path id="rect4964" stroke-width=".265" d="M0 0h32v32H0z"/> </g>
<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> <g id="icon-save" stroke-opacity=".941" transform="translate(-64)">
<g id="g5188" transform="translate(-96)"> <path id="rect4766" stroke-width=".265" d="M0 0h32v32H0z"/>
<path id="rect5180" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z"/> <path id="rect4986" fill="#fff" stroke-width="2.491" d="M6.844 8.459V24h18.312V11.375H14.031V8.459z"/>
<g id="g5322" fill="#fff" transform="translate(7.066 7.065) scale(.04494)"> <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="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"/> <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>
</g> <g id="g4982" stroke-opacity=".941" transform="translate(-32)">
<g id="g5360" transform="translate(-128)"> <path id="rect4964" stroke-width=".265" d="M0 0h32v32H0z"/>
<path id="rect5324" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z"/> <g id="g4980" transform="matrix(3.77953 0 0 3.77953 .002 -.002)">
<g id="g5604" fill="#fff" transform="matrix(-.36615 0 0 .36615 24.543 7.457)"> <path id="rect4966" fill="#fff" stroke-width=".794" d="M2.783 3.626h2.923v2.923H2.783z"/>
<g id="g5527"> <path id="rect4968" fill="#fff" stroke-width=".794" d="M2.479 2.597h3.508v.748H2.479z"/>
<g id="g5495"> <path id="rect4970" fill="#fff" stroke-width=".794" d="M3.438 1.919h1.473v.865H3.438z"/>
<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="rect4972" stroke-width=".684" d="M3.859 2.25h.631v.386h-.631z"/>
<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="rect4974" stroke-width="1.442" d="M3.134 3.906h.468v2.315h-.468z"/>
<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"/> <path id="rect4976" stroke-width="1.405" d="M-4.537 3.906h.444v2.315h-.444z" transform="scale(-1 1)"/>
<circle id="circle5489" cx="19.703" cy="7.384" r="3.435"/> <path id="rect4978" stroke-width="1.405" d="M4.958 3.906h.444v2.315h-.444z"/>
<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"/> </g>
<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 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="g5360" transform="translate(-128)">
<path id="rect5324" stroke-opacity=".941" stroke-width=".265" 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>
</g> </g>
</g> <g id="icon-logo">
<g id="icon-logo"> <path id="rect5611" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z"/>
<path id="rect5611" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z"/> <g id="g5792" fill-rule="evenodd" transform="matrix(.77499 0 0 .77499 5.316 3.064)">
<g id="g5792" fill-rule="evenodd" transform="matrix(.77499 0 0 .77499 5.316 3.064)"> <path id="path5774" fill="none" stroke="#fff" 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 id="path5774" fill="none" stroke="#fff" 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 id="path5776" fill="#fff" d="M13.435 5.925v21.037s10.695-3.27 9.988-17.678c0 0-3.447-2.828-9.988-3.359z"/>
<path id="path5776" fill="#fff" d="M13.435 5.925v21.037s10.695-3.27 9.988-17.678c0 0-3.447-2.828-9.988-3.359z"/> <path id="path5778" fill="none" stroke="#fff" d="M4.773 15.118L13.7 6.19"/>
<path id="path5778" fill="none" stroke="#fff" d="M4.773 15.118L13.7 6.19"/> <path id="path5780" fill="none" stroke="#fff" d="M6.276 20.333l7.778-7.778"/>
<path id="path5780" fill="none" stroke="#fff" d="M6.276 20.333l7.778-7.778"/> <path id="path5782" fill="none" stroke="#fff" d="M8.574 23.691c.442-.53 5.612-5.612 5.612-5.612"/>
<path id="path5782" fill="none" stroke="#fff" d="M8.574 23.691c.442-.53 5.612-5.612 5.612-5.612"/> <path id="path5784" fill="none" stroke="#fff" d="M11.932 25.636l2.343-2.342"/>
<path id="path5784" fill="none" stroke="#fff" d="M11.932 25.636l2.343-2.342"/> </g>
</g> </g>
</g> </defs>
<use xlink:href="#icon-logo" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

Before After
Before After

10
src/styles/button.less
View file

@ -4,29 +4,35 @@
height: 18px; height: 18px;
line-height: 1em; line-height: 1em;
border-radius: 2px; border-radius: 2px;
font-family: sans-serif; font-family: inherit;
font-size: 14px; font-size: 1em;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0; box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
color: white; color: white;
font-weight: 200;
&.primary { &.primary {
background: #3c78db; background: #3c78db;
color: white;
} }
&.danger { &.danger {
background: #ed2f3b; background: #ed2f3b;
color: white;
} }
&.success { &.success {
background: #17bf6d; background: #17bf6d;
color: white;
} }
} }
.button-group { .button-group {
display: flex;
.button { .button {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;

5
src/styles/colors.less
View file

@ -14,3 +14,8 @@
@red_primary: #ff7034; @red_primary: #ff7034;
@red_secondary: #ff3344; @red_secondary: #ff3344;
@panel_radius: 0;
@color_primary: #4597d0;
@color_success: #7cd766;

23
src/styles/main.less
View file

@ -10,23 +10,36 @@
@import 'save.less'; @import 'save.less';
body { body {
font-family: 'Raleway', sans-serif; font-family: 'Rubik', sans-serif;
font-size: 14px; font-size: 15px;
// letter-spacing: 0.4px;
padding: 0; padding: 0;
} }
.gray { .gray {
opacity: 0.75; opacity: 0.5;
} }
.big { .big {
font-size: 14px; font-size: 1em;
}
.upper {
text-transform: uppercase;
} }
.small { .small {
font-size: 12px; font-size: 0.9em;
} }
.white { .white {
color: white; color: white;
} }
.success {
color: @color_success;
}
.primary {
color: @color_primary;
}

14
src/styles/map.less
View file

@ -85,18 +85,18 @@
margin-top: -2px; margin-top: -2px;
outline: none; outline: none;
z-index: 10001; z-index: 10001;
background: @blue_secondary; background: @red_secondary;
&:after { &:after {
content: ' '; content: ' ';
box-shadow: 0 0 0 3px @blue_secondary; box-shadow: 0 0 0 3px @red_secondary;
background: @blue_primary; background: white;
border-radius: 8px; border-radius: 8px;
width: 8px; width: 8px;
height: 8px; height: 8px;
position: absolute; position: absolute;
left: 6px; left: 6px;
top: -2px; top: -3px;
} }
&:before { &:before {
@ -104,9 +104,9 @@
display: block; display: block;
width: 3px; width: 3px;
height: 20px; height: 20px;
background: @blue_secondary; background: @red_secondary;
left: 9px; left: 8.5px;
top: -8px; top: -9px;
position: absolute; position: absolute;
} }
} }

34
src/styles/panel.less
View file

@ -1,10 +1,14 @@
.control-bar { .control-bar {
background: @bar_background; background: @bar_background;
border-radius: 4px; border-radius: @panel_radius;
display: flex; display: flex;
box-shadow: @bar_shadow; box-shadow: @bar_shadow;
} }
.control-bar-padded {
padding: 0 5px;
}
.control-dist { .control-dist {
background: #222222; background: #222222;
padding: 0 10px; padding: 0 10px;
@ -78,11 +82,11 @@
} }
&:first-child { &:first-child {
border-radius: 4px 0 0 4px; border-radius: @panel_radius 0 0 @panel_radius;
} }
&:last-child { &:last-child {
border-radius: 0 4px 4px 0; border-radius: 0 @panel_radius @panel_radius 0;
} }
&.active { &.active {
@ -92,6 +96,12 @@
} }
} }
&.disabled {
svg {
fill: #999999;
}
}
&.highlighted { &.highlighted {
background: #555555; background: #555555;
} }
@ -151,13 +161,29 @@
// width: 500px; // width: 500px;
padding: 12px; padding: 12px;
font-weight: 200; font-weight: 200;
font-size: 14px; font-size: 1em;
display: flex; display: flex;
} }
.helper__text { .helper__text {
width: 100%; width: 100%;
display: flex;
align-items: center;
svg {
fill: white;
width: 24px;
margin-right: 6px;
}
&.success {
color: @color_success;
svg {
fill: @color_success;
}
}
} }
.helper__buttons { .helper__buttons {

2
src/styles/user-button.less
View file

@ -6,7 +6,7 @@
} }
} }
.user-bar-guest { .user-bar-guest {
width: 168px; // width: 168px;
} }
.user-button { .user-button {