// Foundation for Sites // https://get.foundation // Licensed under MIT Open Source //// /// @group prototype-position //// /// Responsive breakpoints for position helpers /// @type Boolean $prototype-position-breakpoints: $global-prototype-breakpoints !default; /// Map containing all the `position` classes /// @type Map $prototype-position: ( static, relative, absolute, fixed ) !default; /// z-index for fixed positioning /// @type Number $prototype-position-z-index: 975 !default; /// Position classes, by default coming through a map `$prototype-position`, whereas all the offset values are multiplied by `$global-position` which by default is equal to `1rem`. /// @param {String} $position [] Position classes, Either `static`, `relative`, `absolute` or `fixed` /// @param {Number} $top [null] - Top offset /// @param {Number} $right [null] - Right offset /// @param {Number} $bottom [null] - Bottom offset /// @param {Number} $left [null] - Left offset @mixin position( $position, $top: null, $right: null, $bottom: null, $left: null ) { position: $position !important; @if $top != null { top: $top * $global-position !important; } @if $right != null { right: $right * $global-position !important; } @if $bottom != null { bottom: $bottom * $global-position !important; } @if $left != null { left: $left * $global-position !important; } } /// Position Fixed on top corners /// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-top` @mixin position-fixed-top( $z-index: $prototype-position-z-index ) { @include position(fixed, 0, 0, null, 0); z-index: $z-index; } /// Position Fixed on bottom corners /// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-bottom` @mixin position-fixed-bottom( $z-index: $prototype-position-z-index ) { @include position(fixed, null, 0, 0, 0); z-index: $z-index; } @mixin foundation-prototype-position { // Position: Static, Relative, Fixed, Absolute @each $position in $prototype-position { .position-#{$position} { @include position($position); } } // Position: Fixed Top, Fixed Bottom .position-fixed-top { @include position-fixed-top; } .position-fixed-bottom { @include position-fixed-bottom; } @if ($prototype-position-breakpoints) { // Loop through Responsive Breakpoints @each $size in $breakpoint-classes { @include breakpoint($size) { // Position: Static, Relative, Fixed, Absolute @each $position in $prototype-position { @if $size != $-zf-zero-breakpoint { .#{$size}-position-#{$position} { @include position($position); } } } // Position: Fixed Top, Fixed Bottom @if $size != $-zf-zero-breakpoint { .#{$size}-position-fixed-top { @include position-fixed-top; } .#{$size}-position-fixed-bottom { @include position-fixed-bottom; } } } } } }