add mobile styles

1 files changed, 71 insertions, 0 deletions

diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss
index f55757f..4580d62 100644
--- a/apps/Notes/styles/_notesList.scss
+++ b/apps/Notes/styles/_notesList.scss
@@ -40,4 +40,75 @@
       animation: fade-in .3s;
     }
   }
+
+  @media(max-width: 40em) {
+    thead {
+      display: flex;
+
+      tr:first-of-type {
+        flex-shrink: 1;
+      }
+    }
+
+    tr {
+      flex-direction: column;
+    }
+
+    tbody {
+      tr {
+        padding-bottom: 1em;
+      }
+
+      td:first-of-type {
+        font-weight: 600;
+      }
+
+      td:nth-of-type(n+2) {
+        font-size: .8em;
+        padding-top: .5em;
+        color: var(--color-decor);
+      }
+    }
+  }
+}
+
+.mobileSort {
+  @media(max-width: 40em) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-window-popup);
+    border-radius: .5em;
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    padding: 1.5em;
+    width: 15em;
+
+    tr:nth-of-type(1) > th {
+      font-weight: normal;
+    }
+
+    tr:nth-of-type(2) {
+      padding-left: 1.5em;
+
+      th {
+        padding: .75em;
+
+        svg {
+          margin-left: .5em;
+        }
+      }
+    }
+
+    tr:nth-of-type(3) {
+      text-align: center;
+
+      & > td {
+        display: inline-block;
+      }
+    }
+  }
 }