package.utilities.Spacing.spacing.scss Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

@use '../../sass-utilities' as *;

// Build spacing values
// stylelint-disable
@mixin pf-spacer-builder {

  // Loop through breakpoints
  @each $breakpoint, $breakpoint-value in $pf-v6-global--breakpoint-map {

    // Loop through margin and padding values
    @each $property, $property-value in $pf-v6-global--spacer-properties-map {

      // Loop through spacer values
      @each $spacer, $spacer-value in $pf-v6-global--spacer-map {

        // If breakpoint != null, append responsive value
        .#{$pf-prefix}u-#{$property}-#{$spacer}#{$breakpoint-value} {
          @include pf-v6-media-query($breakpoint) {
            $spacer-value: $spacer-value !important;

            // If margin x property, set left and right margins
            @if $property == "mx" {
              margin-inline: #{$spacer-value};
            }

            // If padding x property, set left and right padding
            @else if $property == "my" {
              margin-block: #{$spacer-value};
            }

            // If margin y property, set top and bottom margins
            @else if $property == "px" {
              padding-inline: #{$spacer-value};
            }

            // If padding y property, set top and bottom padding
            @else if $property == "py" {
              padding-block: #{$spacer-value};
            }

            @else {
              #{$property-value}: #{$spacer-value};
            }
          }
        }
      }
    }
  }
}
// stylelint-enable

// Build spacing values
@include pf-spacer-builder;