_spacing.scss

/* VUE DESIGN SYSTEM SPACING HELPERS
--------------------------------------------- */

$spacing-ratio: 1.7;

/*
  INSET-SPACE: For interface containers.
  INSET-SQUISH-SPACE: For buttons, form elements, cells.
  STACK-SPACE: For vertically stacked content.
  INLINE-SPACE: For things displayed inline.
*/

// Create inset-space
//
// @param  {Number} inset-space to set
@mixin inset-space($value) {
  padding: $value;
}

// Create inset-squish-space
//
// @param  {Number} inset-squish-space to set
@mixin inset-squish-space($value) {
  padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
}

// Create stack-space
//
// @param  {Number} stack-space to set
@mixin stack-space($value) {
  margin-bottom: $value;
  &:last-child {
    margin-bottom: 0;
  }
}

// Create inline-space
//
// @param  {Number} inline-space to set
@mixin inline-space($value) {
  margin-right: $value;
  &:last-child {
    margin-right: 0;
  }
}