jss-es6-example-1.js

export default {
  input: {
    display: 'inline-block',
    width: '100%',
    height: '100%',
    lineHeight: 0
  },
  browser: {
    position: 'absolute',
    width: '100%',
    bottom: 0
  },
  completeWrapper: {
    position: 'relative'
  }
}

jss-es6-example-2.js

import colors from 'grape-theme/dist/base-colors'
import fonts from 'grape-theme/dist/fonts'

export default {
  header: {
    ...fonts.small,
    background: colors.silverLight,
    borderBottom: `1px solid ${colors.silverDark}`,
    padding: '5px 12px',
    textTransform: 'uppercase',
    letterSpacing: '0.05em',
    color: colors.gainsboroDark
  }
}

jss-es6-example-3.js

import colors from 'grape-theme/dist/base-colors'
import fonts from 'grape-theme/dist/fonts'
import defaults from 'lodash/object/defaults'
import color from 'color'

import * as tabStyle from './tabStyle'

const arrow = {
  ...tabStyle.container
  ...fonts.small,
  position: 'absolute',
  top: 0,
  padding: '0 12px',
  zIndex: 1,
  border: `0px solid ${colors.silverDark}`,
  backgroundColor: colors.white,
  color: color(colors.grapeTypo).alpha(0.3).rgbaString(),
  '&:hover': {
    color: color(colors.grapeTypo).alpha(0.6).rgbaString()
  }
}

export default {
  controls: {
    position: 'relative',
    margin: 0,
    padding: 0
  },
  prevArrow: {
    ...arrow,
    borderRightWidth: 1,
    left: 0
  },
  nextArrow: {
    ...arrow,
    borderLeftWidth: 1,
    right: 0
  }
}