fix: fix pencil button location with bottom nav (#2222)

nolanlawson · Nov 22, 2022 · 347dab4 · 347dab4
1 parent fdec7b2
commit 347dab4
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 1 deletion.
diff --git a/src/build/template.html b/src/build/template.html
@@ -39,6 +39,7 @@
       --main-content-pad-top: 0px;
       --main-content-pad-bottom: var(--main-content-pad-vertical);
       --toast-gap-bottom: var(--nav-total-height);
+      --fab-gap-top: 0px;
     }
   </style>
 

diff --git a/src/routes/_components/compose/ComposeStickyButton.html b/src/routes/_components/compose/ComposeStickyButton.html
@@ -25,7 +25,7 @@
 
   :global(.compose-box-button-sticky, .compose-box-button-fixed) {
     z-index: 5000;
-    top: calc(var(--nav-total-height));
+    top: calc(var(--fab-gap-top));
   }
 </style>
 <script>

diff --git a/src/scss/variables.scss b/src/scss/variables.scss
@@ -66,6 +66,7 @@
   --nav-top: 0px;
   --nav-bottom: initial;
   --toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
+  --fab-gap-top: var(--nav-total-height); // used to position the FAB (floating action button) below the top nav
 
   //
   // focus outline