How to use the @pluralsight/ps-design-system-core.layout.spacingSmall 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
},

  // __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
  },

  // __code
  '.psds-error-page__code': {
    padding: `4px 0 ${layout.spacingSmall} 0`
  },

  // __search
  '.psds-error-page__search': {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    color: colors.gray02
  },
  [`.psds-error-page__search.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    color: colors.gray03
  },
  '.psds-error-page__search__icon': {
    position: 'absolute',
    left: layout.spacingXSmall,
github pluralsight / design-system / packages / datepicker / src / css / index.js View on Github external
fontWeight: type.fontWeightMedium,
    boxShadow: `0 2px 4px ${transparentize(0.5, colors.black)}`,
    opacity: 0,
    transform: `translateY(calc(-1 * ${layout.spacingXSmall}))`,
    animation: `${slide || 'psds-date-picker__calendar__keyframes__slide'} ${
      motion.speedNormal
    } forwards`
  }),

  // __calendar__week-heading
  '.psds-date-picker__calendar__week-heading': {
    display: 'flex',
    justifyContent: 'flex-start',
    color: colors.gray02,
    textTransform: 'uppercase',
    marginBottom: layout.spacingSmall
  },

  // __calendar__week-heading__day
  '.psds-date-picker__calendar__week-heading__day': {
    width: '32px',
    textAlign: 'center',
    marginRight: '2px'
  },

  // __calendar__days
  '.psds-date-picker__calendar__days': {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    color: colors.gray02,
    textTransform: 'uppercase'
github pluralsight / design-system / packages / layout / src / css / page-heading-layout.js View on Github external
import { layout } from '@pluralsight/ps-design-system-core'

export default {
  '.psds-page-heading-layout': {
    padding: layout.spacingLarge
  },
  '.psds-page-heading-layout__actions': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'left',
    flexWrap: 'wrap',

    '& > *': {
      marginRight: layout.spacingSmall,
      marginBottom: layout.spacingMedium
    }
  },
  '@media (min-width: 769px)': {
    '.psds-page-heading-layout__heading': {
      display: 'flex',
      alignItems: 'center'
    },
    '.psds-page-heading-layout__actions': {
      marginLeft: 'auto',
      paddingLeft: layout.spacingLarge,
      justifyContent: 'flex-end',
      alignItems: 'center',
      flexWrap: 'nowrap',

      '& > *': {
github pluralsight / design-system / packages / layout / src / css / page-heading-layout.js View on Github external
display: 'flex',
      alignItems: 'center'
    },
    '.psds-page-heading-layout__actions': {
      marginLeft: 'auto',
      paddingLeft: layout.spacingLarge,
      justifyContent: 'flex-end',
      alignItems: 'center',
      flexWrap: 'nowrap',

      '& > *': {
        marginRight: 0,
        marginBottom: 0
      },
      '& > * + *': {
        marginLeft: layout.spacingSmall
      }
    }
  }
}