@muvehealth/fixins/dist/elements/Absolute/index.js.flow

Component library for Muvehealth

// @flow
import styled from 'react-emotion'
import { color, space } from 'styled-system'

const absoluteValue = (prop: ?string | ?number) => {
  switch (typeof prop) {
    case 'string':
      return prop
    case 'number':
      return (`${prop}px`)
    default:
      return null
  }
}

export default styled('div')(
  { position: 'absolute' },
  color,
  space,
  ({ top, right, bottom, left }) => ({
    top: absoluteValue(top),
    right: absoluteValue(right),
    bottom: absoluteValue(bottom),
    left: absoluteValue(left),
  }),
)