How to use the @project-r/styleguide.mediaQueries.onlyS function in @project-r/styleguide

import React from 'react'
import {css} from 'glamor'

import {
  H1, H2, A, P, fontFamilies, mediaQueries, colors
} from '@project-r/styleguide'

const styles = {
  h1: css({
    [mediaQueries.onlyS]: {
      fontSize: 36,
      lineHeight: '39px'
    }
  }),
  list: css({
    color: colors.text,
    fontFamily: fontFamilies.serifRegular,
    fontSize: 16,
    lineHeight: '25px',
    [mediaQueries.mUp]: {
      fontSize: 21,
      lineHeight: '32px'
    }
  })
}

const styles = {
  wrapper: css({
    width: '100%',
    position: 'relative',
    minHeight: 200
  }),
  header: css({
    position: 'sticky',
    padding: '20px 0',
    top: HEADER_HEIGHT - 1,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    background: '#fff',
    zIndex: 10,
    [mediaQueries.onlyS]: {
      flexDirection: 'column-reverse',
      top: HEADER_HEIGHT_MOBILE - 1,
      textAlign: 'center',
      margin: '0 0px'
    }
  }),
  info: css({
    '& strong': {
      fontFamily: fontFamilies.sansSerifMedium,
      fontWeight: 'normal'
    },
    [mediaQueries.onlyS]: {
      marginTop: 5
    }
  }),
  actions: css({

import { css, merge } from 'glamor'
import { colors, mediaQueries, fontFamilies } from '@project-r/styleguide'

const buttonStyle = css({
  [mediaQueries.onlyS]: {
    padding: '7px 15px 7px 15px',
    fontSize: '18px',
    lineHeight: '25px',
    height: 50
  },
  width: '100%',
  outline: 'none',
  verticalAlign: 'bottom',
  minWidth: 160,
  textAlign: 'center',
  textDecoration: 'none',
  fontSize: 22,
  height: 60,
  boxSizing: 'border-box',
  backgroundColor: '#fff',
  fontFamily: fontFamilies.sansSerifRegular,

const { Headline, P } = Interaction

const styles = {
  intro: css({
    marginTop: 35
  }),
  count: css({
    background: '#fff',
    zIndex: 10,
    position: 'sticky',
    padding: '10px 0',
    borderBottom: `0.5px solid ${colors.divider}`,
    display: 'flex',
    minHeight: 55,
    top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  closed: css({
    marginTop: 35,
    background: colors.primaryBg,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',

import {
  VOTING_POLL_INTERVAL_MS
} from '../../constants'

import colors from './colors'
import Result from './Result'

const {H2, H3, P} = Interaction

const endDateFormat = swissTime.format('%d. %B %Y')
const endHourFormat = swissTime.format('%H')

const OPTION_PADDING = 20
export const styles = {
  title: css({
    [mediaQueries.onlyS]: {
      fontSize: 34,
      lineHeight: '39px'
    }
  }),
  options: css({
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center'
  }),
  option: css({
    paddingLeft: OPTION_PADDING,
    paddingRight: OPTION_PADDING,
    paddingTop: OPTION_PADDING / 2,
    paddingBottom: OPTION_PADDING / 2,
    width: 320,
    [mediaQueries.mUp]: {

import { css } from 'glamor'
import IconLink from '../IconLink'
import {
  BASE_URL_FACEBOOK,
  BASE_URL_TWITTER,
  TESTIMONIAL_IMAGE_SIZE
} from '../constants'
import { colors, fontStyles, mediaQueries } from '@project-r/styleguide'

const styles = {
  container: css({
    borderTop: `1px solid ${colors.divider}`,
    paddingTop: '80px',
    position: 'relative',
    paddingLeft: `${TESTIMONIAL_IMAGE_SIZE + 20}px`,
    [mediaQueries.onlyS]: {
      paddingLeft: 0,
      paddingTop: '10px'
    }
  }),
  contact: css({
    ...fontStyles.sansSerifRegular14,
    '& + &': {
      marginTop: '5px'
    }
  })
}

class PointerList extends Component {
  render () {
    const { user } = this.props
    if (!user) {

height: 32
      },
      padding: `${PADDING}px`
    }
  }),
  textContainer: css({
    maxHeight: `calc(50vh - 60px - ${IOS_BOTTOM_HOT_AREA}px)`,
    padding: PADDING,
    overflow: 'auto'
  }),
  actions: css({
    position: 'relative',
    boxShadow: `0 -5px ${PADDING - 5}px ${negativeColors.primaryBg}`,
    paddingLeft: PADDING,
    paddingRight: PADDING,
    [mediaQueries.onlyS]: {
      display: 'flex',
      flexDirection: 'column'
    },
    [mediaQueries.mUp]: {
      paddingBottom: PADDING + 5
    }
  }),
  later: css({
    display: 'none',
    [mediaQueries.onlyS]: {
      padding: 12,
      height: IOS_BOTTOM_HOT_AREA,
      paddingBottom: PADDING,
      display: 'block',
      textAlign: 'center',
      color: negativeColors.text

fontFamilies,
  mediaQueries
} from '@project-r/styleguide'

import { CONTENT_PADDING } from '../constants'

import ActionBar from '../ActionBar'

import { PUBLIC_BASE_URL } from '../../lib/constants'

const BLOCK_PADDING_TOP = 10

const styles = {
  title: css({
    marginBottom: 15,
    [mediaQueries.onlyS]: {
      fontSize: 36,
      lineHeight: '39px'
    }
  }),
  content: css({
    color: colors.text,
    fontFamily: fontFamilies.serifRegular,
    fontSize: 16,
    lineHeight: '25px',
    [mediaQueries.mUp]: {
      fontSize: 21,
      lineHeight: '32px'
    }
  }),
  container: css({
    borderBottom: `1px solid ${colors.divider}`,

import withAuthorization from '../Auth/withAuthorization'
import { errorToString } from '../../lib/utils/errors'
import StatusError from '../StatusError'

const { Headline, P } = Interaction

const styles = {
  count: css({
    background: '#fff',
    zIndex: 10,
    position: 'sticky',
    padding: '10px 0',
    borderBottom: `0.5px solid ${colors.divider}`,
    minHeight: 55,
    top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  reset: css({
    textAlign: 'center',
    marginTop: 10
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  closed: css({
    marginTop: 35,

Center,
  Interaction,
  linkRule
} from '@project-r/styleguide'
import { Link } from '../../lib/routes'
import IconDefault from 'react-icons/lib/md/bookmark-outline'

import { getBookmarkedDocuments } from './queries'

const styles = {
  title: css({
    ...fontStyles.sansSerifMedium58,
    textAlign: 'center',
    marginTop: 40,
    marginBottom: 80,
    [mediaQueries.onlyS]: {
      ...fontStyles.sansSerifMedium40,
      marginBottom: 50
    }
  })
}

const getConnection = data => data.me.collection.items
const mergeConnection = (data, connection) => ({
  ...data,
  me: {
    ...data.me,
    collection: {
      ...data.me.collection,
      items: connection
    }
  }