data8/_sass/inuitcss/utilities/_utilities.spacings.scss

/* ==========================================================================
   #SPACINGS
   ========================================================================== */

/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-small {}
 */

$inuit-spacing-directions: (
  null: null,
  "-top": "-top",
  "-right": "-right",
  "-bottom": "-bottom",
  "-left": "-left",
  "-horizontal": "-left" "-right",
  "-vertical": "-top" "-bottom",
) !default;

$inuit-spacing-properties: (
  "padding": "padding",
  "margin": "margin",
) !default;

$inuit-spacing-sizes: (
  null: $inuit-global-spacing-unit,
  "-tiny": $inuit-global-spacing-unit-tiny,
  "-small": $inuit-global-spacing-unit-small,
  "-large": $inuit-global-spacing-unit-large,
  "-huge": $inuit-global-spacing-unit-huge,
  "-none": 0
) !default;

@each $property-namespace, $property in $inuit-spacing-properties {

  @each $direction-namespace, $direction-rules in $inuit-spacing-directions {

    @each $size-namespace, $size in $inuit-spacing-sizes {

      .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {

        @each $direction in $direction-rules {
          #{$property}#{$direction}: $size !important;
        }

      }

    }

  }

}