rahmanda/ayu

View on GitHub
src/utilities/_spacing.scss

Summary

Maintainability
Test Coverage
// =====================================================
// Spacing Utilities
// =====================================================

// -----------------------------------------------------
// Margin Utilities
// -----------------------------------------------------

$u-margin-prefix: "u-mg" !default;
$u-margin-variants: $theme-margin-variants;

@each $variant, $scale in $u-margin-variants {

    .#{$u-margin-prefix}--#{$variant} {
        margin: margin($scale);
    }

}

@each $variant, $scale in $u-margin-variants {

    .#{$u-margin-prefix}-top--#{$variant} {
        margin-top: margin($scale);
    }

}

@each $variant, $scale in $u-margin-variants {

    .#{$u-margin-prefix}-right--#{$variant} {
        margin-right: margin($scale);
    }

}

@each $variant, $scale in $u-margin-variants {

    .#{$u-margin-prefix}-bottom--#{$variant} {
        margin-bottom: margin($scale);
    }

}

@each $variant, $scale in $u-margin-variants {

    .#{$u-margin-prefix}-left--#{$variant} {
        margin-left: margin($scale);
    }

}

// -----------------------------------------------------
// Padding Utilities
// -----------------------------------------------------

$u-padding-prefix: "u-pd" !default;
$u-padding-variants: $theme-padding-variants;

@each $variant, $scale in $u-padding-variants {

    .#{$u-padding-prefix}--#{$variant} {
        padding: margin($scale);
    }

}

@each $variant, $scale in $u-padding-variants {

    .#{$u-padding-prefix}-top--#{$variant} {
        padding-top: margin($scale);
    }

}

@each $variant, $scale in $u-padding-variants {

    .#{$u-padding-prefix}-right--#{$variant} {
        padding-right: margin($scale);
    }

}

@each $variant, $scale in $u-padding-variants {

    .#{$u-padding-prefix}-bottom--#{$variant} {
        padding-bottom: margin($scale);
    }

}

@each $variant, $scale in $u-padding-variants {

    .#{$u-padding-prefix}-left--#{$variant} {
        padding-left: margin($scale);
    }

}