ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add z-index function

Browse Source
This commit is contained in:
Lucas Vallenet
2022-05-20 11:44:42 +02:00
parent c2db2e1922
commit e875495928
2 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/styles/settings/_config.scss
View File

@@ -89,3 +89,16 @@ $from-gigantic: 2000px !default;
$to-gigantic: $from-gigantic - 1 !default;
$from-colossal: 2400px !default;
$to-colossal: $from-colossal - 1 !default;
// Z-indexes
// =============================================================================
$layers: (
"goku" : 9000,
"loader" : 500,
"modal" : 300,
"header" : 200,
"dropdown" : 100,
"default" : 1,
"limbo" : -999
);

16
assets/styles/tools/_functions.scss
View File

@@ -54,6 +54,22 @@
@return ($size / $base) * 1rem;
}
// A function helper to avoid having to type `map-get($layers, ...)`
//
// @link on http://css-tricks.com/handling-z-index/
// @param {string} $layer The name of the z-index
// @param {number} $var The modifier if needed
// @return {number} The corresponding z-index based on the $layers var
@function z($layer, $var: 0) {
@if not map-has-key($layers, $layer) {
@error "No z-index found in $layers map for `#{$layer}`. Property omitted.";
}
$value: map-get($layers, $layer);
@return $value + $var;
}
// Converts a number to a percentage.
//
// @alias percentage()