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);
|
||||
}
|
Reference in New Issue
Block a user