Merge pull request #831 from mrfelton/feature/z-index-vars

style(scss): use function to apply z-index

.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": "stylelint-config-recommended-scss",
   "rules": {
     "no-descending-specificity": null,
     "no-empty-source": null

app/components/Contacts/ChannelForm/ChannelForm.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: 10;
+  z-index: z("contact-form", "modal");
   height: 100vh;
   width: 100%;
   background: var(--darkestBackground);

app/components/Contacts/ConnectManually/ConnectManually.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: 10;
+  z-index: z("connect-form", "modal");
   height: 100vh;
   width: 100%;
   background: red;

app/components/Contacts/Network/Network.scss

@@ -83,7 +83,7 @@
         display: block;
         position: absolute;
         margin-top: 0;
-        z-index: 10;
+        z-index: z("network-filters", "open");
 
         li {
           margin: 10px 0;

app/components/Form/Form.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: 20;
+  z-index: z("form", "container");
   height: 100vh;
   width: 100%;
   background: var(--lightestBackground);

app/components/Form/Pay/Pay.scss

@@ -127,7 +127,7 @@
       visibility: hidden;
       position: absolute;
       top: 30px;
-      z-index: 10;
+      z-index: z("form", "pay");
 
       &.active {
         visibility: visible;

app/components/Form/Request/Request.scss

@@ -106,7 +106,7 @@
       visibility: hidden;
       position: absolute;
       top: 30px;
-      z-index: 10;
+      z-index: z("form", "request");
 
       &.active {
         visibility: visible;

app/components/GlobalError/GlobalError.scss

@@ -2,7 +2,7 @@
 
 .container {
   position: absolute;
-  z-index: 1001;
+  z-index: z("global-error", "container");
   background: $red;
   color: $white;
   width: 100%;

app/components/LoadingBolt/LoadingBolt.scss

@@ -1,7 +1,7 @@
 @import 'styles/variables.scss';
 
 .container {
-  z-index: 1000;
+  z-index: z("loading-bolt", "container");
   position: absolute;
   top: 0;
   left: 0;

app/components/Settings/Settings.scss

@@ -4,7 +4,7 @@
   width: 200px;
   top: 30px;
   left: -100px;
-  z-index: 10;
+  z-index: z("settings-form", "modal");
 
   li {
     padding: 20px;

app/styles/app.global.scss

@@ -34,19 +34,6 @@ input[type=number] {
   }
 }
 
-.ReactModal__Overlay {
-  transition: opacity 500ms ease-in-out;
-  opacity: 0;
-
-  &--after-open {
-    opacity: 1;
-  }
-
-  &--before-close {
-    opacity: 0;
-  }
-}
-
 .load-draw-svg {
   stroke-dasharray: 211;
   stroke-dashoffset: 2110;
@@ -206,7 +193,3 @@ input[type=number] {
   stroke-dasharray: 100;
   animation: dash 2.5s infinite linear;
 }
-
-.ReactModal__Overlay.ReactModal__Overlay--after-open {
-  z-index: 50;
-}

app/styles/tooltip.scss

@@ -11,7 +11,7 @@
   will-change: transform;
   visibility: hidden;
   opacity: 0;
-  z-index: 900005;
+  z-index: z("tooltip", "after");
   pointer-events: none;
   transition: 0.2s ease;
   transition-delay: 0ms;
@@ -22,7 +22,7 @@
   position: absolute;
   background: transparent;
   border: 6px solid transparent;
-  z-index: 900006;
+  z-index: z("tooltip", "before");
 }
 
 [data-hint]::after {

app/styles/variables.scss

@@ -54,3 +54,65 @@ $curve: cubic-bezier(0.65, 0, 0.45, 1);
   --primaryText: #000;
   --gradient: linear-gradient(270deg, #fd9800 0%, #ffbd59 100%);
 }
+
+$z-layers: (
+  // Layer 1
+  "form": (
+    "container": 10,
+    "pay": 10,
+    "request": 10
+  ),
+  "contact-form": (
+    "modal": 10,
+  ),
+  "connect-form": (
+    "modal": 10,
+  ),
+  "settings-form": (
+    "modal": 10
+  ),
+  "network-filters": (
+    "open": 10,
+  ),
+  // Layer 2
+  "loading-bolt":  (
+    "container": 20,
+  ),
+  // Layer 3
+  "global-error": (
+    "container": 30,
+  ),
+  // Layer 4
+  "tooltip": (
+    "after": 40,
+    "before": 40
+  )
+);
+
+// Functions for pulling z-index values from $z-layers map
+@function z($layer...) {
+  @if not map-has-nested-keys($z-layers, $layer) {
+    @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
+  }
+
+  @return map-deep-get($z-layers, $layer);
+}
+
+@function map-has-nested-keys($map, $keys) {
+  @each $key in $keys {
+    @if not map-has-key($map, $key) {
+      @return false;
+    }
+    $map: map-get($map, $key);
+  }
+
+  @return true;
+}
+
+@function map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}

package.json

@@ -269,8 +269,9 @@
     "spectron": "^4.0.0",
     "style-loader": "^0.23.0",
     "stylelint": "^9.6.0",
-    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-formatter-pretty": "^1.0.3",
+    "stylelint-scss": "^3.3.1",
     "url-loader": "^1.1.1",
     "webpack": "^4.20.2",
     "webpack-bundle-analyzer": "^3.0.2",
@@ -304,7 +305,6 @@
     "react-inlinesvg": "^0.8.1",
     "react-intl": "^2.7.0",
     "react-intl-redux": "^2.0.2",
-    "react-modal": "^3.6.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.9",

yarn.lock

@@ -3940,6 +3940,10 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
+cssesc@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-1.0.1.tgz#ef7bd8d0229ed6a3a7051ff7771265fe7330e0a8"
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
@@ -5103,10 +5107,6 @@ execall@^1.0.0:
   dependencies:
     clone-regexp "^1.0.0"
 
-exenv@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
-
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -5375,7 +5375,7 @@ fbjs-scripts@^1.0.1:
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -10099,6 +10099,14 @@ postcss-selector-parser@^3.1.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz#50c6570f40579036d8e63f23e6c0626fe5743527"
+  dependencies:
+    cssesc "^1.0.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-styled@>=0.34.0, postcss-styled@^0.34.0:
   version "0.34.0"
   resolved "https://registry.yarnpkg.com/postcss-styled/-/postcss-styled-0.34.0.tgz#07d47bcb13707289782aa058605fd9feaf84391d"
@@ -10279,13 +10287,6 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.10:
-  version "15.5.10"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-
 prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
@@ -10598,19 +10599,10 @@ react-is@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
-react-modal@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.6.1.tgz#54d27a1ec2b493bbc451c7efaa3557b6af82332d"
-  dependencies:
-    exenv "^1.2.0"
-    prop-types "^15.5.10"
-    react-lifecycles-compat "^3.0.0"
-    warning "^3.0.0"
-
 react-redux@^5.0.7:
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
@@ -12212,16 +12204,16 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-stylelint-config-recommended@^2.1.0:
+stylelint-config-recommended-scss@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-3.2.0.tgz#5761be65e28b58fa6a4a628b71291e83e921d10f"
+  dependencies:
+    stylelint-config-recommended "^2.0.0"
+
+stylelint-config-recommended@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz#f526d5c771c6811186d9eaedbed02195fee30858"
 
-stylelint-config-standard@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-18.2.0.tgz#6283149aba7f64f18731aef8f0abfb35cf619e06"
-  dependencies:
-    stylelint-config-recommended "^2.1.0"
-
 stylelint-formatter-pretty@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/stylelint-formatter-pretty/-/stylelint-formatter-pretty-1.0.3.tgz#a6b43c3f3a13206bdfb777d0da8cefc6c76c36c3"
@@ -12232,6 +12224,16 @@ stylelint-formatter-pretty@^1.0.3:
     plur "^2.1.2"
     string-width "^2.0.0"
 
+stylelint-scss@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.3.1.tgz#5061bca7cc586eb05972caa31b5e627fa3296235"
+  dependencies:
+    lodash "^4.17.10"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^4.0.0"
+    postcss-value-parser "^3.3.0"
+
 stylelint@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.6.0.tgz#f0b366f33b6ccf3e5096d60722ed27b6470b41d8"