// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source
//// /// @group prototype-spacing ////
/// Responsive breakpoints for spacing classes (margin and padding) /// @type Boolean $prototype-spacing-breakpoints: $global-prototype-breakpoints !default;
/// Default number of spacers count (margin and padding) /// @type Number $prototype-spacers-count: 3 !default;
/// Margin helper mixin, all the values are multiplied by `$global-margin` which by default is equal to `1rem` /// @param {Number} $top [null] - Margin Top /// @param {Number} $right [null] - Margin Right /// @param {Number} $bottom [null] - Margin Bottom /// @param {Number} $left [null] - Margin Left @mixin margin(
$top: null, $right: null, $bottom: null, $left: null
) {
@if $top != null { margin-top: $top * $global-margin !important; } @if $right != null { margin-right: $right * $global-margin !important; } @if $bottom != null { margin-bottom: $bottom * $global-margin !important; } @if $left != null { margin-left: $left * $global-margin !important; }
}
/// Padding helper mixin, all the values are multiplied by `$global-padding` which by default is equal to `1rem` /// @param {Number} $top [null] - Padding Top /// @param {Number} $right [null] - Padding Right /// @param {Number} $bottom [null] - Padding Bottom /// @param {Number} $left [null] - Padding Left @mixin padding(
$top: null, $right: null, $bottom: null, $left: null
) {
@if $top != null { padding-top: $top * $global-padding !important; } @if $right != null { padding-right: $right * $global-padding !important; } @if $bottom != null { padding-bottom: $bottom * $global-padding !important; } @if $left != null { padding-left: $left * $global-padding !important; }
}
@mixin foundation-prototype-spacing {
@for $spacer from 0 through $prototype-spacers-count { // All Sides .margin-#{$spacer} { @include margin($spacer, $spacer, $spacer, $spacer); } .padding-#{$spacer} { @include padding($spacer, $spacer, $spacer, $spacer); } // Top Side .margin-top-#{$spacer} { @include margin($spacer, null, null, null); } .padding-top-#{$spacer} { @include padding($spacer, null, null, null); } // Right Side .margin-right-#{$spacer} { @include margin(null, $spacer, null, null); } .padding-right-#{$spacer} { @include padding(null, $spacer, null, null); } // Bottom Side .margin-bottom-#{$spacer} { @include margin(null, null, $spacer, null); } .padding-bottom-#{$spacer} { @include padding(null, null, $spacer, null); } // Left Side .margin-left-#{$spacer} { @include margin(null, null, null, $spacer); } .padding-left-#{$spacer} { @include padding(null, null, null, $spacer); } // Horizontal Axes .margin-horizontal-#{$spacer} { @include margin(null, $spacer, null, $spacer); } .padding-horizontal-#{$spacer} { @include padding(null, $spacer, null, $spacer); } // Vertical Axes .margin-vertical-#{$spacer} { @include margin($spacer, null, $spacer, null) } .padding-vertical-#{$spacer} { @include padding($spacer, null, $spacer, null) } @if ($prototype-spacing-breakpoints) { // Loop through Responsive Breakpoints @each $size in $breakpoint-classes { @include breakpoint($size) { @if $size != $-zf-zero-breakpoint { // All Sides .#{$size}-margin-#{$spacer} { @include margin($spacer, $spacer, $spacer, $spacer); } .#{$size}-padding-#{$spacer} { @include padding($spacer, $spacer, $spacer, $spacer); } // Top Side .#{$size}-margin-top-#{$spacer} { @include margin($spacer, null, null, null); } .#{$size}-padding-top-#{$spacer} { @include padding($spacer, null, null, null); } // Right Side .#{$size}-margin-right-#{$spacer} { @include margin(null, $spacer, null, null); } .#{$size}-padding-right-#{$spacer} { @include padding(null, $spacer, null, null); } // Bottom Side .#{$size}-margin-bottom-#{$spacer} { @include margin(null, null, $spacer, null); } .#{$size}-padding-bottom-#{$spacer} { @include padding(null, null, $spacer, null); } // Left Side .#{$size}-margin-left-#{$spacer} { @include margin(null, null, null, $spacer); } .#{$size}-padding-left-#{$spacer} { @include padding(null, null, null, $spacer); } // Horizontal Axes .#{$size}-margin-horizontal-#{$spacer} { @include margin(null, $spacer, null, $spacer); } .#{$size}-padding-horizontal-#{$spacer} { @include padding(null, $spacer, null, $spacer); } // Vertical Axes .#{$size}-margin-vertical-#{$spacer} { @include margin($spacer, null, $spacer, null) } .#{$size}-padding-vertical-#{$spacer} { @include padding($spacer, null, $spacer, null) } } } } } }
}