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

Rename z-index layers var and update function

Browse Source
This commit is contained in:
Lucas Vallenet
2022-05-25 13:54:03 +02:00
parent e875495928
commit 34bca7d68a
2 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,12 +93,16 @@ $to-colossal: $from-colossal - 1 !default;
// Z-indexes
// =============================================================================
$layers: (
"goku" : 9000,
"loader" : 500,
"modal" : 300,
"header" : 200,
"dropdown" : 100,
"default" : 1,
"limbo" : -999
$z-indexes: (
"goku": 9000,
"transition": 500,
"toast": 400,
"popover": 300,
"modal": 250,
"sheet": 200,
"fixed": 150,
"sticky": 100,
"dropdown": 50,
"default": 1,
"limbo": -999
);

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

@@ -54,20 +54,29 @@
@return ($size / $base) * 1rem;
}
// A function helper to avoid having to type `map-get($layers, ...)`
// Retrieves the z-index from the {@see $layers master list}.
//
// @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
//
// @param {string} $layer The name of the z-index.
// @param {number} $modifier A positive or negative modifier to apply
// to the returned z-index value.
// @throw Error if the $layer does not exist.
// @throw Warning if the $modifier might overlap another master z-index.
// @return {number} The computed z-index of $layer and $modifier.
@function z($layer, $var: 0) {
@function z($layer, $modifier: 0) {
@if not map-has-key($layers, $layer) {
@error "No z-index found in $layers map for `#{$layer}`. Property omitted.";
@error "Unknown master z-index layer: #{$layer}";
}
$value: map-get($layers, $layer);
@return $value + $var;
@if ($modifier >= 50 or $modifier <= -50) {
@warn "Modifier may overlap the another master z-index layer: #{$modifier}";
}
$index: map-get($z-indexes, $layer);
@return $index + $modifier;
}
// Converts a number to a percentage.
@@ -110,7 +119,7 @@
@function important($flag: false) {
@if ($flag == true) {
@return !important;
} @elseif ($important == false) {
} @else if ($important == false) {
@return null;
} @else {
@error "`#{$flag}` needs to be `true` or `false`.";