How to use the @govuk-react/constants.SPACING.SCALE_4 function in @govuk-react/constants

To help you get started, we’ve selected a few @govuk-react/constants examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github govuk-react / govuk-react / components / button / src / index.js View on Github external
':focus': {
      color: WHITE,
      backgroundColor: BUTTON_COLOUR_DARKEN_5,
      outline: `3px solid ${YELLOW}`,
    },
    ':active': {
      position: 'relative',
      top: '2px',
      boxShadow: `0 0 0 ${BUTTON_COLOUR_DARKEN_15}`,
    },
    ':visited': {
      color: BUTTON_COLOUR,
    },
    ' svg': {
      maxWidth: '15px',
      marginLeft: SPACING.SCALE_4,
    },
  },
  ({ isStart, disabled, icon }) => ({
    opacity: disabled ? '.5' : '1',
    pointerEvents: disabled ? 'none' : 'auto',
    fontWeight: isStart ? '700' : undefined,
    fontSize: isStart ? '24px' : undefined,
    lineHeight: isStart ? '1.25' : undefined,
    padding: isStart ? '.36842em .84211em .21053em' : undefined,
    paddingRight: icon ? '.54211em' : '.84211em',
  }),
);

/**
 *
 * ### Usage
github govuk-react / govuk-react / components / related-items / src / index.js View on Github external
import { spacing } from '@govuk-react/lib';

const StyledRelatedItems = styled('div')(
  {
    borderTop: `10px solid ${BLUE}`,
    paddingTop: SPACING.SCALE_1,
    width: '100%',
    [MEDIA_QUERIES.LARGESCREEN]: {
      fontSize: FONT_SIZE.SIZE_16,
      lineHeight: LINE_HEIGHT.SIZE_16,
    },
    '> h3': {
      marginBottom: SPACING.SCALE_2,
    },
    '> ul': {
      marginBottom: SPACING.SCALE_4,
      '> li': {
        marginBottom: `calc(${SPACING.SCALE_2} + 2px)`,
      },
    },
  },
  spacing.withWhiteSpace({ marginBottom: 0 })
);

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 * import { H3 } from '@govuk-react/heading';
 * import UnorderedList from '@govuk-react/unordered-list';