styles moved to scss

1 files changed, 231 insertions, 0 deletions

diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
new file mode 100644
index 0000000..e91dab9
--- /dev/null
+++ b/apps/Notes/Notes.module.scss
@@ -0,0 +1,231 @@
+.notesList {
+  @keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+
+  display: block;
+  overflow: auto;
+  width: 100%;
+  table-layout: fixed;
+  word-wrap: break-word;
+  height: 100%;
+  margin-top: -1em;
+  padding-top: 1em;
+
+  & > tbody,
+  & > thead {
+    display: block;
+  }
+
+  & tr {
+    display: flex;
+    padding: .5em;
+  }
+
+  & th {
+    font-weight: 600;
+    text-align: left;
+    min-width: 10em;
+    white-space: nowrap;
+    padding-bottom: .5em;
+    cursor: pointer;
+    line-height: 1.1em;
+
+    &:first-of-type {
+      width: 99%;
+    }
+
+    svg {
+      animation: fade-in .3s;
+    }
+  }
+}
+
+.listItem {
+  td {
+    min-width: 10em;
+    white-space: nowrap;
+
+    &:first-of-type {
+      width: 99%;
+      display: flex;
+      padding-right: 1em;
+
+      & > span:nth-child(1) {
+        text-overflow: ellipsis;
+        flex-grow: 1;
+      }
+
+      & > span:nth-child(2),
+      & > span:nth-child(3) {
+        margin-left: .5em;
+        padding: .15em .5em;
+        line-height: 1em;
+        border-radius: 50%;
+        visibility: hidden;
+        opacity: 0;
+        font-size: 80%;
+        transition: .3s opacity linear .3s;
+      }
+    }
+  }
+
+  &:hover {
+    background: #eee;
+    border-radius: .5em;
+    cursor: pointer;
+
+    & > td:first-of-type > span:nth-child(2),
+    & > td:first-of-type > span:nth-child(3) {
+      color: #666;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+
+  & > td:first-of-type > span:nth-child(2):hover {
+    color: #333;
+    background-color: #deffde;
+  }
+
+  & > td:first-of-type > span:nth-child(3):hover {
+    background-color: #ffdede;
+    color: #333;
+  }
+}
+
+.noteView {
+  @keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+
+  background: white;
+  padding: 1rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  animation: fade-in .3s;
+
+  h2 {
+    font-size: 1.25em;
+    font-weight: 600;
+    padding: 1rem;
+    user-select: text;
+  }
+
+  p {
+    padding: 0 1rem 1rem;
+    white-space: pre-line;
+    user-select: text;
+  }
+}
+
+.noteEdit {
+  @keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: white;
+  padding: 1em 1em 2em;
+  animation: fade-in .3s;
+
+  h2 {
+    font-size: 1.2em;
+    margin-bottom: .5em;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-grow: 1;
+
+    & > div {
+      text-align: right;
+    }
+  }
+
+  input[type=text] {
+    margin-bottom: .5rem;
+    height: 3rem;
+    border: none;
+    padding: 0.5rem;
+    font-size: 1rem;
+    // font-weight: 600;
+    border: 1px dashed #666;
+
+    &:placeholder {
+      font: inherit;
+    }
+  }
+
+  textarea {
+    font-size: 1rem;
+    flex-grow: 1;
+    resize: none;
+    height: 100%;
+    width: 100%;
+    border: none;
+    border: 1px dashed #666;
+    padding: 0.5rem;
+
+    &:placeholder {
+      font: inherit;
+    }
+  }
+}
+
+.import {
+  @keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+
+  background: white;
+  padding: 1rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  animation: fade-in .3s;
+
+  form {
+    padding: 1em;
+  }
+
+  input[type=file] {
+    display: none;
+  }
+
+  label {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  li {
+    padding: .25em;
+  }
+
+  p {
+    padding: 1em 0;
+  }
+
+  .fa-check ~ span {
+    color: green;
+  }
+}
+