muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 05:16:41 +07:00
Code Packages Activity Actions

code cleanup

Browse source
This commit is contained in:
muerwre 2019-07-23 19:00:48 +07:00
parent 606c88d777
commit ef71e55543
23 changed files with 108 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/flow/Cell/index.tsx Normal file
View file

@ -0,0 +1,26 @@
import React, { FC } from 'react';
import * as styles from './styles.scss';
interface IProps {
height?: number;
width?: number;
title?: string;
}
const Cell: FC<IProps> = ({
width = 1,
height = 1,
title,
}) => (
<div
className={styles.cell}
style={{
gridRowEnd: `span ${height}`,
gridColumnEnd: `span ${width}`,
}}
>
{ title && <div className={styles.title}>{title}</div> }
</div>
);
export { Cell };

17
src/components/flow/Cell/styles.scss Normal file
View file

@ -0,0 +1,17 @@
.cell {
padding: $gap / 4;
box-sizing: border-box;
display: flex;
flex: 0 0;
background: $cell_bg;
border-radius: 4px;
@include outer_shadow();
}
.title {
font-family: 'Montserrat';
font-weight: 700;
font-size: 32px;
text-transform: uppercase;
}

21
src/components/flow/TestGrid/index.tsx
View file

@ -1,19 +1,20 @@
import * as React from 'react';
import classnames from 'classnames';
import { Cell } from "~/components/flow/Cell";
const style = require('./style.scss');
export const TestGrid = () => (
<div className={style.grid_test}>
<div className={classnames([style.cell, style.vert_1, style.hor_4])} key="b" />
<div className={classnames([style.cell, style.vert_2, style.hor_1, style.pad_last])} key="a" />
<div className={classnames([style.cell, style.vert_1, style.hor_1])} key="c" />
<div className={classnames([style.cell, style.vert_1, style.hor_1])} key="d" />
<div className={classnames([style.cell, style.vert_2, style.hor_3])} key="e" />
<div className={classnames([style.cell, style.vert_2, style.hor_2])} key="f" />
<div className={classnames([style.cell, style.vert_2, style.hor_1])} key="g" />
<div className={classnames([style.cell, style.vert_2, style.hor_1])} key="h" />
<div className={classnames([style.cell, style.vert_4, style.hor_1])} key="i" />
<div className={classnames([style.cell, style.vert_1, style.hor_1])} key="j" />
<Cell
height={1}
width={4}
title="Example cell"
/>
<Cell />
<Cell height={2} />
<Cell width={2} />
<Cell />
</div>
);

41
src/components/flow/TestGrid/style.scss
View file

@ -18,47 +18,6 @@ $cols: $content_width / $cell;
grid-row-gap: $grid_line;
}
.cell {
padding: $gap / 4;
box-sizing: border-box;
display: flex;
flex: 0 0;
background: $cell_bg;
border-radius: 4px;
@include outer_shadow();
//&::after {
// content: ' ';
// background: transparentize(white, 0.9);
// width: 100%;
// height: 100%;
//}
}
.vert_2 {
grid-row-end: span 2;
}
.vert_3 {
grid-row-end: span 3;
}
.vert_4 {
grid-row-end: span 3;
}
.hor_2 {
grid-column-end: span 2;
}
.hor_3 {
grid-column-end: span 3;
}
.hor_4 {
grid-column-end: span 4;
}
.pad_last {
grid-column-end: $cols + 1;
}