UI structure (basic cards + css modules setup)
This commit is contained in:
23
src/components/UI/card/Card.css
Normal file
23
src/components/UI/card/Card.css
Normal file
@ -0,0 +1,23 @@
|
||||
.card {
|
||||
composes: base from "../theme.css";
|
||||
composes: container from "../theme.css";
|
||||
composes: rounded from "../theme.css";
|
||||
composes: depth from "../theme.css";
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer):first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer):last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card > iframe, .card > video, .card > img {
|
||||
max-width: 100%;
|
||||
}
|
7
src/components/UI/card/Card.js
Normal file
7
src/components/UI/card/Card.js
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import styles from './Card.css'
|
||||
|
||||
|
||||
export default function Card({style, children}) {
|
||||
return <div className={styles.card} style={style}>{children}</div>
|
||||
}
|
1
src/components/UI/index.js
Normal file
1
src/components/UI/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default as Card } from './card/Card'
|
26
src/components/UI/theme.css
Normal file
26
src/components/UI/theme.css
Normal file
@ -0,0 +1,26 @@
|
||||
:root {
|
||||
--defaultColor: #333;
|
||||
--backgroundColor: #fff;
|
||||
--shadowColor: rgba(0, 0, 0, 0.25);
|
||||
--successColor: #1c7;
|
||||
--warningColor: #fa0;
|
||||
--errorColor: #f52;
|
||||
}
|
||||
|
||||
.base {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 10px;
|
||||
color: var(--defaultColor);
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.depth {
|
||||
box-shadow: 0px 1px 2px 0px var(--shadowColor);
|
||||
}
|
13
src/index.css
Normal file
13
src/index.css
Normal file
@ -0,0 +1,13 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #appRoot, #appRoot > * {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
@ -4,12 +4,14 @@ import { Provider } from 'react-redux';
|
||||
import configureStore from './store/configureStore';
|
||||
import Routes from './routes/routes';
|
||||
import 'file?name=index.html!../example/index.html';
|
||||
import styles from './index.css';
|
||||
|
||||
const store = configureStore();
|
||||
|
||||
window.store = store;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.id = 'appRoot';
|
||||
document.body.appendChild(el);
|
||||
|
||||
render((
|
||||
|
Reference in New Issue
Block a user