Change styling
parent
a81a5a2458
commit
067e1ccda6
@ -0,0 +1,28 @@
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
import styles from './Container.css'
|
||||
|
||||
export const Container = ({ children }) => {
|
||||
return <div className={styles.container}>{children}</div>
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mainItem {
|
||||
flex: 1;
|
||||
}
|
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
import styles from './Flex.css'
|
||||
|
||||
export const Flex = ({ children, ...rest }) => {
|
||||
return (
|
||||
<div className={styles.container} style={rest}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const FlexMain = ({ children }) => {
|
||||
return <div className={styles.mainItem}>{children}</div>
|
||||
}
|
Loading…
Reference in New Issue