///
/// Functions and mix-ins to assist in keeping track of z-index values
///
/// Example `z-index` values from Bootstrap 3 SCSS
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
/// Example Bootstrap z-index values wrapped up in a map
$zindex: (
navbar: 1000,
dropdown: 1000,
navbar-fixed: 1030,
modal-background: 1040,
modal: 1050,
popover: 1060,
tooltip: 1070
);
/// Get the lowest z-index value from a list of known values
/// @param {List} $zidx A list of z-index values to include in comparision
/// @return {Number} Lowest z-index value in list
@function lowestIndex($zidx...) {
@return min(
$zindex-navbar,
$zindex-dropdown,
$zindex-popover,
$zindex-tooltip,
$zindex-navbar-fixed,
$zindex-modal-background,
$zindex-modal,
min($zidx...)
);
}
/// Get the highest z-index value from a list of known values
/// @param {List} $zidx A list of z-index values to include in comparison
/// @return {Number} Highest z-index value in list
@function greatestIndex($zidx...) {
@return max(
$zindex-navbar,
$zindex-dropdown,
$zindex-popover,
$zindex-tooltip,
$zindex-navbar-fixed,
$zindex-modal-background,
$zindex-modal,
max($zidx...)
);
}
/// Simple map getter
/// @param {String} Unquoted z-index key from `$zindex` map
/// @return {Number} Returns the value corresponding to the key, or **-1** if the key is not found
@function zindex($key) {
@if (map-has-key($zindex, $key)) {
@return map-get($zindex, $key);
}
@warn 'Unknown z-index key: #{$key}';
@return -1;
}
/// Find the lowest z-index in the map
/// @param {Map} z-index map
/// @param {List} Additional z-indexes to include in comparison
/// @return {Number} Returns the lowest number in the map and list. Defaults to **1**.
@function mapLowestIndex($indexMap, $zidx...) {
$initial: 999999;
$lowest: $initial;
@each $key, $zindex in $indexMap {
@if ($zindex < $lowest) {
$lowest: $zindex;
}
}
@if ($lowest == $initial) {
@return 1;
}
@return $lowest;
}
/// Find the highest z-index in the map
/// @param {Map} z-index map
/// @param {List} Additional z-indexes to include in comparison
/// @return {Number} Returns the greatest number in the map and list. Defaults to **1**.
@function mapGreatestIndex($indexMap, $zidx...) {
$initial: -999999;
$greatest: $initial;
@each $key, $zindex in $indexMap {
@if ($zindex > $greatest) {
$greatest: $zindex;
}
}
@if ($greatest == $initial) {
@return 1;
}
@return $greatest;
}
/// Places an element at the bottom of the z-index stack
/// Outputs a z-index value less than all other known z-index values
/// @param {List} A list of z-index values to include in comparison
/// @requires {function} lowestIndex
/// @requires {function} greatestIndex
@mixin getLow($zidx...) {
$seed: 0;
@if (length($zidx) > 0) {
$seed: min($zidx...)
}
/// Find the greatest index to build a more inclusive list in `lowestIndex()`
z-index: max(-1, lowestIndex(greatestIndex($seed)) - 1);
}
/// Places an element at the top of the z-index stack
/// Outputs a z-index value higher than all other known z-index values
/// @param {List} A list of z-index values to include in comparison
/// @requires {function} lowestIndex
/// @requires {function} greatestIndex
@mixin getHigh($zidx...) {
$seed: 0;
@if (length($zidx) > 0) {
$seed: max($zidx...)
}
z-index: greatestIndex($seed) + 1;
}
/// Usage:
/**
* Element at the top of the stack.
* Its z-index value is one or more levels higher than the greatest known z-index.
*/
.highest {
@include getHigh();
}
/**
* Element at the bottom of the stack.
* Its z-index value is one less than the lowest known z-index.
*/
.lowest {
@include getLow();
}
/**
* Reference the z-index map to ensure elements are stacked correctly.
*/
.above-modal {
z-index: zindex(modal) + 1;
}
Functions and mix-ins to assist in stacking stuff.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.