biofriction-wp-theme/node_modules/foundation-sites/scss/prototype/_spacing.scss

178 lines
4.9 KiB
SCSS

// 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;
}
}
/// Margin classes for specific direction properties
/// @param {String} $dir [] Direction
/// @param {Number} $spacer [] Spacer
@mixin margin-direction($dir, $spacer) {
@if ($dir == top) {
@include margin($top: $spacer);
}
@else if ($dir == right) {
@include margin($right: $spacer);
}
@else if ($dir == bottom) {
@include margin($bottom: $spacer);
}
@else if ($dir == left) {
@include margin($left: $spacer);
}
@else if ($dir == horizontal) {
@include margin($right: $spacer, $left: $spacer);
}
@else if ($dir == vertical) {
@include margin($top: $spacer, $bottom: $spacer);
}
}
/// Padding classes for specific direction properties
/// @param {String} $dir [] Direction
/// @param {Number} $spacer [] Spacer
@mixin padding-direction($dir, $spacer) {
@if ($dir == top) {
@include padding($top: $spacer);
}
@else if ($dir == right) {
@include padding($right: $spacer);
}
@else if ($dir == bottom) {
@include padding($bottom: $spacer);
}
@else if ($dir == left) {
@include padding($left: $spacer);
}
@else if ($dir == horizontal) {
@include padding($right: $spacer, $left: $spacer);
}
@else if ($dir == vertical) {
@include padding($top: $spacer, $bottom: $spacer);
}
}
@mixin foundation-prototype-spacing {
@for $spacer from 0 through $prototype-spacers-count {
@each $prop in (margin, padding) {
// All Sides
.#{$prop}-#{$spacer} {
@if ($prop == margin) {
margin: $spacer * $global-margin;
}
@else if ($prop == padding) {
padding: $spacer * $global-padding;
}
}
@each $dir in (top, right, bottom, left, horizontal, vertical) {
// Top Side
.#{$prop}-#{$dir}-#{$spacer} {
@if ($prop == margin) {
@include margin-direction($dir, $spacer);
}
@else if ($prop == padding) {
@include padding-direction($dir, $spacer);
}
}
}
}
@if ($prototype-spacing-breakpoints) {
// Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@if $size != $-zf-zero-breakpoint {
.#{$size} {
@each $prop in (margin, padding) {
// All Sides
&-#{$prop}-#{$spacer} {
@if ($prop == margin) {
margin: $spacer * $global-margin;
}
@else if ($prop == padding) {
padding: $spacer * $global-padding;
}
}
@each $dir in (top, right, bottom, left, horizontal, vertical) {
// Top Side
&-#{$prop}-#{$dir}-#{$spacer} {
@if ($prop == margin) {
@include margin-direction($dir, $spacer);
}
@else if ($prop == padding) {
@include padding-direction($dir, $spacer);
}
}
}
}
}
}
}
}
}
}
}