muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

colors

Browse source
This commit is contained in:
muerwre 2019-07-27 06:51:03 +07:00
parent 1a7557eab4
commit 1b37ed4bbf
6 changed files with 42 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/main/SidePane/index.tsx
View file

@ -1,6 +1,7 @@
import React, { FC, LegacyRef, ReactChild, useCallback, useEffect, useState } from 'react'; import React, { FC, LegacyRef, ReactChild, useCallback, useEffect, useState } from 'react';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
import classNames from 'classnames'; import classNames from 'classnames';
import {Group} from "~/components/containers/Group";
interface IProps { interface IProps {
} }
@ -31,18 +32,26 @@ export const SidePane: FC<IProps> = ({
return ( return (
<div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}> <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
<div <Group>
className={classNames(styles.group, 'logo')} <div className={classNames(styles.btn, "orange")}><div>‹</div></div>
>
<div>V</div>
</div>
<div className={styles.group}> <div
<div className={styles.btn} /> className={classNames(styles.group, 'logo')}
<div className={styles.btn} /> >
<div className={styles.btn} /> <div>V</div>
<div className={styles.btn} /> </div>
</div>
<div className={styles.btn}><div>P</div></div>
<div className={styles.btn}><div>F</div></div>
<div className={styles.group}>
<div className={styles.btn} />
<div className={styles.btn} />
<div className={styles.btn} />
<div className={styles.btn} />
</div>
</Group>
<div className={styles.flexy} /> <div className={styles.flexy} />

12
src/components/main/SidePane/styles.scss
View file

@ -5,7 +5,7 @@
top: 0; top: 0;
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
padding: $gap / 2 0; padding: $gap 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -13,7 +13,6 @@
.group { .group {
width: 54px; width: 54px;
border-radius: $panel_radius; border-radius: $panel_radius;
margin: ($gap / 2) 0;
background: $panel_bg; background: $panel_bg;
box-sizing: border-box; box-sizing: border-box;
@ -52,6 +51,15 @@
box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px; box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;
border-radius: $panel_radius; border-radius: $panel_radius;
background: #191919; background: #191919;
display: flex;
align-items: center;
justify-content: center;
font: $font_24_semibold;
&:global(.orange) {
background: linear-gradient(280deg, $red, $orange);
color: transparentize(black, 0.7);
}
} }
.flexy { .flexy {

2
src/components/node/NodeRelated/index.tsx
View file

@ -16,7 +16,7 @@ const NodeRelated: FC<IProps> = ({
</div> </div>
<div className={styles.grid}> <div className={styles.grid}>
{ {
range(1,7).map(el => (<div className={styles.item} />)) range(1,7).map(el => (<div className={styles.item} key={el} />))
} }
</div> </div>
</Group> </Group>

7
src/components/node/Tag/styles.scss
View file

@ -17,16 +17,15 @@
} }
&:global(.red) { &:global(.red) {
background: $red; background: $red_gradient;
} }
&:global(.blue) { &:global(.blue) {
background: $blue; background: $blue_gradient;
//color: transparentize(black, 0.4);
} }
&:global(.green) { &:global(.green) {
background: $green; background: $green_gradient;
color: transparentize(black, 0.4); color: transparentize(black, 0.4);
} }

6
src/styles/colors.scss
View file

@ -4,6 +4,12 @@ $dark_blue: #3c75ff;
$blue: #3ca1ff; $blue: #3ca1ff;
$green: #00d2b9; $green: #00d2b9;
$olive: #8bc12a; $olive: #8bc12a;
$orange: #ff7549;
$red_gradient: linear-gradient(170deg, $orange, $red);
$blue_gradient: linear-gradient(170deg, $green, $dark_blue);
$green_gradient: linear-gradient(170deg, $green, $olive);
$purple_gradient: linear-gradient(170deg, $red, $dark_blue);
//$color_yellow: complement($color_red); //$color_yellow: complement($color_red);
//$color_yellow: yellow; //$color_yellow: yellow;

4
webpack.config.js
View file

@ -61,7 +61,7 @@ module.exports = () => {
modules: true, modules: true,
sourceMap: true, sourceMap: true,
importLoaders: 2, importLoaders: 2,
localIdentName: '[name]__[local]__[hash:base64:5]' localIdentName: '[folder]__[local]__[hash:base64:5]'
} }
}, },
{ loader: 'less-loader' } { loader: 'less-loader' }
@ -77,7 +77,7 @@ module.exports = () => {
modules: true, modules: true,
sourceMap: true, sourceMap: true,
importLoaders: 2, importLoaders: 2,
localIdentName: '[name]__[local]__[hash:base64:5]' localIdentName: '[folder]__[local]__[hash:base64:5]'
} }
}, },
{ loader: 'resolve-url-loader' }, { loader: 'resolve-url-loader' },