Adding size xs on Block

This commit is contained in:
apanizo 2018-08-31 12:23:31 +02:00
parent e54c95bf74
commit 8406a3d156
4 changed files with 21 additions and 8 deletions

View File

@ -2,12 +2,11 @@
import classNames from 'classnames/bind'
import React, { PureComponent } from 'react'
import { capitalize } from '~/utils/css'
import { type Size } from '~/theme/size'
import styles from './index.scss'
const cx = classNames.bind(styles)
type Size = 'sm' | 'md' | 'lg' | 'xl'
type Props = {
margin?: Size,
padding?: Size,

View File

@ -2,6 +2,9 @@
width: 100%;
overflow: hidden;
}
.xs {
margin-bottom: $xs;
}
.sm {
margin-bottom: $sm;
@ -19,6 +22,10 @@
margin-bottom: $xl;
}
.paddingXs {
padding-top: $xs;
}
.paddingSm {
padding-top: $sm;
}

View File

@ -1,16 +1,23 @@
// @flow
import * as React from 'react'
import { type Size, getSize } from '~/theme/size'
import { border } from '~/theme/variables'
const hairlineStyle = {
const calculateStyleFrom = (margin: Size) => ({
width: '100%',
height: '2px',
backgroundColor: border,
margin: '20px 0px',
margin: `${getSize(margin)} 0px`,
})
type Props = {
margin?: Size,
}
const Hairline = () => (
<div style={hairlineStyle} />
)
const Hairline = ({ margin = 'md' }: Props) => {
const style = calculateStyleFrom(margin)
return <div style={style} />
}
export default Hairline

View File

@ -102,7 +102,7 @@ class GnoTransaction extends React.PureComponent<Props> {
destination={transaction.get('destination')}
threshold={threshold}
/> }
<Hairline />
<Hairline margin="md" />
</React.Fragment>
)
}