From 7f0a8f7dd15494ec6fc3b2bb8c4447407c114c19 Mon Sep 17 00:00:00 2001
From: Ben Leggiero <BenLeggiero@Gmail.com>
Date: Tue, 26 Nov 2019 23:53:32 -0700
Subject: [PATCH] #15: New `z-indices.scss` file

This will help organize and track the important `z-index` variables
---
 assets/v2/material/material-app-bar.scss      |  4 +++-
 .../material/material-sidebar-renderer.scss   |  3 ++-
 .../v2/material/material-structure-vars.scss  | 16 ++-----------
 assets/v2/structure/z-indices.scss            | 23 +++++++++++++++++++
 4 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 assets/v2/structure/z-indices.scss

diff --git a/assets/v2/material/material-app-bar.scss b/assets/v2/material/material-app-bar.scss
index 5695271..e2554ca 100644
--- a/assets/v2/material/material-app-bar.scss
+++ b/assets/v2/material/material-app-bar.scss
@@ -4,6 +4,8 @@
 // Renders the Material app bar
 // See also: https://material.io/design/components/app-bar.html
 
+@import "z-indices";
+
 
 
 .app-bar,
@@ -13,7 +15,7 @@
     @include flex-justify-space-between();
     @include flex-align-stretch();
 
-    z-index: var(--app-bar-z-index);
+    z-index: var(--z-index-app-bar);
 
     height: var(--app-bar-height-auto);
 
diff --git a/assets/v2/material/material-sidebar-renderer.scss b/assets/v2/material/material-sidebar-renderer.scss
index 9bff714..a0ae43a 100644
--- a/assets/v2/material/material-sidebar-renderer.scss
+++ b/assets/v2/material/material-sidebar-renderer.scss
@@ -8,13 +8,14 @@
 @import "material-sidebar-vars";
 @import "material-structure-vars";
 @import "css-vars";
+@import "z-indices";
 
 
 
 .sidebar {
 
     position: fixed;
-    z-index: var(--sidebar-z-index);
+    z-index: var(--z-index-sidebar);
 
     top: var(--app-bar-height-auto);
     left: calc(-46px - var(--sidebar-default-width));
diff --git a/assets/v2/material/material-structure-vars.scss b/assets/v2/material/material-structure-vars.scss
index 8d79d86..34350b9 100644
--- a/assets/v2/material/material-structure-vars.scss
+++ b/assets/v2/material/material-structure-vars.scss
@@ -4,7 +4,8 @@
 // Variables defining the structure of a page that uses Material design
 
 
-@import 'material-shadows-vars';
+@import "material-shadows-vars";
+@import "z-indices";
 
 
 // MARK: - Breakpoints
@@ -311,17 +312,6 @@ $app-bar-horizontal-padding: $app-bar-padding-left + $app-bar-padding-right !def
 $app-bar-padding: $app-bar-padding-top $app-bar-padding-right $app-bar-padding-bottom $app-bar-padding-left !default;
 
 
-// MARK: Z Indices
-
-$app-bar-z-index: 4 !default;
-$sidebar-z-index: 16 !default;
-
-@include css-vars((
-    --app-bar-z-index: $app-bar-z-index,
-    --sidebar-z-index: $sidebar-z-index,
-));
-
-
 // MARK: Content
 
 $content-margin-horiz-phone-portrait: 16px !default;
@@ -355,8 +345,6 @@ $content-margin-right-tablet-and-desktop: $content-margin-horiz-tablet-and-deskt
     --app-bar-horizontal-padding: $app-bar-horizontal-padding,
     --app-bar-padding:            $app-bar-padding,
 
-    --app-bar-z-index: $app-bar-z-index,
-
 
     --content-margin-horiz-phone-portrait: $content-margin-horiz-phone-portrait,
     --content-margin-horiz-phone-landscape: $content-margin-horiz-phone-landscape,
diff --git a/assets/v2/structure/z-indices.scss b/assets/v2/structure/z-indices.scss
new file mode 100644
index 0000000..cce827d
--- /dev/null
+++ b/assets/v2/structure/z-indices.scss
@@ -0,0 +1,23 @@
+
+// z-indices
+//
+// Keeps track of the important `z-index` variables
+
+
+
+$z-index-base: 0 !default;
+$z-index-tier-offset: 1000 !default;
+$z-index-app-bar-tier-multiplier: 4 !default;
+$z-index-sidebar-tier-multiplier: 16 !default;
+
+
+:root {
+    --z-index-base: $z-index-base;
+    --z-index-tier-offset: $z-index-tier-offset;
+
+    --z-index-app-bar-tier-multiplier: $z-index-app-bar-tier-multiplier;
+    --z-index-app-bar: calc(var(--z-index-base) + (var(--z-index-tier-offset) * var(--z-index-app-bar-tier-multiplier)));
+
+    --z-index-sidebar-tier-multiplier: $z-index-sidebar-tier-multiplier;
+    --z-index-sidebar: calc(var(--z-index-base) + (var(--z-index-tier-offset) * var(--z-index-sidebar-tier-multiplier)));
+}