Adding size xs on Block
This commit is contained in:
parent
e54c95bf74
commit
8406a3d156
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -102,7 +102,7 @@ class GnoTransaction extends React.PureComponent<Props> {
|
|||
destination={transaction.get('destination')}
|
||||
threshold={threshold}
|
||||
/> }
|
||||
<Hairline />
|
||||
<Hairline margin="md" />
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue