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

fixes

Browse source
This commit is contained in:
muerwre 2019-07-23 19:08:55 +07:00
parent ef71e55543
commit 1b001db91a
6 changed files with 34 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/flow/Cell/index.tsx
View file

@ -1,19 +1,22 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
import classNames = require("classnames");
interface IProps { interface IProps {
height?: number; height?: number;
width?: number; width?: number;
title?: string; title?: string;
is_hero?: boolean;
} }
const Cell: FC<IProps> = ({ const Cell: FC<IProps> = ({
width = 1, width = 1,
height = 1, height = 1,
title, title,
is_hero,
}) => ( }) => (
<div <div
className={styles.cell} className={classNames(styles.cell, { is_hero })}
style={{ style={{
gridRowEnd: `span ${height}`, gridRowEnd: `span ${height}`,
gridColumnEnd: `span ${width}`, gridColumnEnd: `span ${width}`,

22
src/components/flow/Cell/styles.scss
View file

@ -5,13 +5,31 @@
flex: 0 0; flex: 0 0;
background: $cell_bg; background: $cell_bg;
border-radius: 4px; border-radius: 4px;
position: relative;
&:global(.is_hero) {
.title {
font-size: 48px;
}
}
@include outer_shadow(); @include outer_shadow();
} }
.title { .title {
font-family: 'Montserrat'; font-family: $font;
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 24px;
text-transform: uppercase; text-transform: uppercase;
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 $gap;
position: absolute;
bottom: $gap;
left: 0;
width: 100%;
box-sizing: border-box;
} }

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

@ -1,5 +1,4 @@
import * as React from 'react'; import * as React from 'react';
import classnames from 'classnames';
import { Cell } from "~/components/flow/Cell"; import { Cell } from "~/components/flow/Cell";
const style = require('./style.scss'); const style = require('./style.scss');
@ -9,11 +8,15 @@ export const TestGrid = () => (
<Cell <Cell
height={1} height={1}
width={4} width={4}
title="Example cell" title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
is_hero
/> />
<Cell /> <Cell />
<Cell height={2} /> <Cell
height={2}
title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
/>
<Cell width={2} /> <Cell width={2} />
<Cell /> <Cell />
</div> </div>

2
src/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,800&display=swap&subset=cyrillic" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

3
src/styles/colors.scss
View file

@ -4,7 +4,8 @@ $color_blue: complement($color_red);
//$color_yellow: complement($color_red); //$color_yellow: complement($color_red);
//$color_yellow: yellow; //$color_yellow: yellow;
$main_bg_color: #161616; //$main_bg_color: #161616;
$main_bg_color: #111111;
$main_text_color: white; $main_text_color: white;
$content_bg_color: #222222; $content_bg_color: #222222;

1
src/styles/variables.scss
View file

@ -12,6 +12,7 @@ $input_height: 32px;
$input_radius: 2px; $input_radius: 2px;
$info_height: 24px; $info_height: 24px;
$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@mixin outer_shadow() { @mixin outer_shadow() {
box-shadow: inset transparentize(white, 0.95) 0 1px, box-shadow: inset transparentize(white, 0.95) 0 1px,