Clean up z-indexes

next-book · Jun 14, 2022 · b7a30f3 · b7a30f3
1 parent 5f5e6b8
commit b7a30f3
Show file tree

Hide file tree

Showing 8 changed files with 1,841 additions and 2,286 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next-book/interface",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Next-book’s browser interface",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "@types/react-redux": "^7.1.24",
     "eslint": "^8.14.0",
     "eslint-plugin-react": "^7.29.4",
-    "jest": "^27.5.1",
+    "jest": "^28.1.1",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "sass": "^1.50.1",

diff --git a/src/scss/_conf.scss b/src/scss/_conf.scss
@@ -25,24 +25,27 @@ $ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Aria
   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
 $ui-font-size: calc(16px * var(--font-size-ratio)) !default;
 
-@use "functions";
+@use 'functions';
 
 $z-indexes: (
   'pagination': 900,
-  'breaks': 950,
   'navigation': 1000,
-  'peeks': 1050,
-  'toc': 1100,
-  'footnotes': 1200,
-  'annotations': 1300,
-  'controls': 3000,
-  'research': 3500,
-  'onboarding': 4000,
+  'peeks': 1200,
+  'toc': 1300,
+  'footnotes': 1400,
+  'annotations': 1500,
+
+  'controls-launcher': 2000,
+  'breaks': 3000,
+  'modals': 4000,
+
+  'controls': 5000,
+  'controls-modal': 6000
 );
 
 $breakpoints: (
   'max-big-tabs': 400px,
   'min-side-annotation-ui': functions.remToPx(24rem),
   'max-full-screen-controls': 990px,
-  'min-double-col-notes': 600px,
+  'min-double-col-notes': 600px
 );
diff --git a/src/scss/ui/_controls.scss b/src/scss/ui/_controls.scss
@@ -1,4 +1,4 @@
-@use "../conf";
+@use '../conf';
 
 .nb-controls {
   font-family: var(--ui-font);
@@ -53,7 +53,7 @@
     position: fixed;
     top: 0;
     right: 0;
-    z-index: map-get(conf.$z-indexes, 'controls') - 1;
+    z-index: map-get(conf.$z-indexes, 'controls-launcher');
 
     cursor: pointer;
 

diff --git a/src/scss/ui/_onboarding.scss b/src/scss/ui/_onboarding.scss
@@ -1,4 +1,4 @@
-@use "../conf";
+@use '../conf';
 
 $nb-yellow: #fff6de;
 $nb-red: #9a4663;
@@ -106,13 +106,13 @@ $nb-red: #9a4663;
     opacity: 0.75;
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
-    z-index: map-get(conf.$z-indexes, 'onboarding');
+    z-index: map-get(conf.$z-indexes, 'controls-modal');
   }
 
   .onboarding {
     font-family: var(--ui-font);
     font-size: var(--ui-font-size);
-    z-index: map-get(conf.$z-indexes, 'onboarding');
+    z-index: map-get(conf.$z-indexes, 'controls-modal');
 
     position: fixed;
     top: var(--base-padding);

diff --git a/src/scss/ui/_research.scss b/src/scss/ui/_research.scss
@@ -1,4 +1,4 @@
-@use "../conf";
+@use '../conf';
 
 ._nb-research {
   position: fixed;
@@ -19,7 +19,7 @@
   box-shadow: var(--ui-box-shadow);
   overflow: hidden;
 
-  z-index: map-get(conf.$z-indexes, 'research');
+  z-index: map-get(conf.$z-indexes, 'modals');
 
   p {
     line-height: 1.4;

diff --git a/src/scss/ui/_seq-return.scss b/src/scss/ui/_seq-return.scss
@@ -8,7 +8,7 @@
   right: var(--base-padding);
   max-width: calc(100vw - 2 * var(--base-padding));
   animation: slide-up 0.2s ease-out;
-  z-index: map-get(conf.$z-indexes, 'navigation') + 30;
+  z-index: map-get(conf.$z-indexes, 'modals');
   min-height: 1.5rem;
 
   .seq-text {

diff --git a/src/scss/ui/_toc.scss b/src/scss/ui/_toc.scss
@@ -36,11 +36,15 @@
 
       li {
         padding-left: 0;
+
+        &:last-child {
+          padding-bottom: 0;
+        }
       }
     }
   }
 
-  ul.plain {
+  ul {
     padding-left: 0;
 
     & > li {