178 lines
4.9 KiB
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);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|