How to use the @pluralsight/ps-design-system-core.layout.spacingXLarge function in @pluralsight/ps-design-system-core

To help you get started, we’ve selected a few @pluralsight/ps-design-system-core 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 pluralsight / design-system / packages / errors / src / css / index.js View on Github external
import {colors, layout, type} from '@pluralsight/ps-design-system-core'
import { names as themeNames } from '@pluralsight/ps-design-system-theme'
import { widths as iconWidths } from '@pluralsight/ps-design-system-icon'

export default {
  '.psds-error-page': {
    maxWidth: '500px',
    margin: '0 auto',
    padding: `${layout.spacingXLarge} ${layout.spacingLarge}`,
    textAlign: 'center',
    color: colors.white
  },
  [`.psds-error-page.psds-theme--${themeNames.light}`]: {
    color: colors.gray06
  },

  // __icon
  '.psds-error-page__icon': {
    margin: '0 auto',
    fill: 'currentColor',
    height: '128px',
    width: '128px'
  },
  [`.psds-error-page__icon.psds-theme--${themeNames.light}`]: {
    color: colors.gray04
github pluralsight / design-system / packages / layout / src / css / page-width-layout.js View on Github external
import { layout } from '@pluralsight/ps-design-system-core'

export default {
  '.psds-page-width-layout': {
    marginLeft: 'auto',
    marginRight: 'auto',
    maxWidth: '1600px',
    paddingLeft: layout.spacingLarge,
    paddingRight: layout.spacingLarge
  },
  '@media (min-width: 769px)': {
    '.psds-page-width-layout': {
      paddingLeft: layout.spacingXLarge,
      paddingRight: layout.spacingXLarge
    }
  }
}
github pluralsight / design-system / packages / layout / src / css / page-width-layout.js View on Github external
import { layout } from '@pluralsight/ps-design-system-core'

export default {
  '.psds-page-width-layout': {
    marginLeft: 'auto',
    marginRight: 'auto',
    maxWidth: '1600px',
    paddingLeft: layout.spacingLarge,
    paddingRight: layout.spacingLarge
  },
  '@media (min-width: 769px)': {
    '.psds-page-width-layout': {
      paddingLeft: layout.spacingXLarge,
      paddingRight: layout.spacingXLarge
    }
  }
}