UI structure (basic cards + css modules setup)

This commit is contained in:
Cássio Zen
2016-06-28 15:28:42 -03:00
parent 5f0ec91015
commit c6babdecff
9 changed files with 84 additions and 0 deletions

View 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%;
}

View 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>
}

View File

@ -0,0 +1 @@
export { default as Card } from './card/Card'

View 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);
}