merge develop, add mobile nav component

1 files changed, 60 insertions, 13 deletions

diff --git a/src/App.scss b/src/App.scss
index 775bc1c8..8f727cf8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -628,6 +628,16 @@ nav {
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
 }
+
+.faint-link {
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 @media all and (min-width: 800px) {
   .logo {
     opacity: 1 !important;
@@ -665,17 +675,35 @@ nav {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  top: 50px;
+  top: calc(50px - 28px - 1.2em);
   left: 0;
-  z-index: 9;
+  z-index: 999;
   overflow-x: hidden;
   overflow-y: scroll;
   transition-property: transform;
-  transition-duration: 0.35s;
+  transition-duration: 0.25s;
   transform: translate(0);
 
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
   .notifications {
+    margin: 0;
     padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    .panel {
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+    .panel:after {
+      border-radius: 0;
+    }
+    .panel .panel-heading {
+      border-radius: 0;
+      box-shadow: none;
+    }
   }
 
   &.closed {
@@ -683,6 +711,35 @@ nav {
   }
 }
 
+@keyframes modal-background-fadein {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.modal-view {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  animation-duration: 0.2s;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-name: modal-background-fadein;
+}
+
+.button-icon {
+  font-size: 1.2em;
+}
+
 @keyframes shakeError {
   0% {
     transform: translateX(0);
@@ -727,16 +784,6 @@ nav {
     margin: 0.5em 0 0.5em 0;
   }
 
-  .button-icon {
-    font-size: 1.2em;
-  }
-
-  .status .status-actions {
-    div {
-      max-width: 4em;
-    }
-  }
-
   .menu-button {
     display: block;
     margin-right: 0.8em;