split scss into partials

14 files changed, 252 insertions, 250 deletions

diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
deleted file mode 100644
index a8ad168..0000000
--- a/apps/Notes/Notes.module.scss
+++ /dev/null
@@ -1,244 +0,0 @@
-.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;
-      margin-right: 1em;
-
-      & > span:nth-child(1) {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        flex-grow: 1;
-      }
-
-      & > span:nth-child(n+2){
-        margin-left: .25em;
-        padding: .15em .5em;
-        line-height: 1em;
-        border-radius: 50%;
-        visibility: hidden;
-        opacity: 0;
-        font-size: 80%;
-        transition: .3s opacity linear .3s;
-      }
-    }
-  }
-
-  &:hover {
-    background: var(--color-window-menu-alt);
-    border-radius: .5em;
-    // cursor: pointer;
-
-    & > td:first-of-type > span:nth-child(n+2){
-      color: var(--color-window-buttons);
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  & > td:first-of-type > span:nth-child(n+2):hover {
-    color: var(--color-text-alt);
-    background-color: var(--color-glass);
-  }
-}
-
-.noteView {
-  @keyframes fade-in {
-    from {opacity: 0;}
-    to {opacity: 1;}
-  }
-
-  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 {
-    line-height: 1.33;
-    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;
-  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] {
-    background-color: var(--color-window-content);
-    color: var(--color-text-alt);
-    margin-bottom: .5rem;
-    height: 3rem;
-    border: none;
-    padding: 0.5rem;
-    font-size: 1rem;
-    border: 1px dashed var(--color-window-buttons);
-
-    &:placeholder {
-      font: inherit;
-    }
-  }
-
-  textarea {
-    background-color: var(--color-window-content);
-    color: var(--color-text-alt);
-    font-size: 1rem;
-    flex-grow: 1;
-    resize: none;
-    height: 100%;
-    width: 100%;
-    border: none;
-    border: 1px dashed var(--color-window-buttons);
-    padding: 0.5rem;
-
-    &:placeholder {
-      font: inherit;
-    }
-  }
-}
-
-.import {
-  @keyframes fade-in {
-    from {opacity: 0;}
-    to {opacity: 1;}
-  }
-
-  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: var(--color-success);
-  }
-}
-
-.export {
-  padding: 1em;
-
-  p {
-    padding-top: 2em;
-    padding-bottom: 1em;
-  }
-
-  &__select {
-    display: inline-block;
-    border-bottom: 1px dashed var(--color-decor);
-    padding-bottom: .5em;
-    margin-bottom: .25em;
-  }
-
-  input[type=checkbox] {
-    margin: .5em .5em 0 0;
-  }
-}
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 0838cea..11aed5b 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -1,4 +1,4 @@
-import styles from '../Notes.module.scss'
+import styles from '../styles/Notes.module.scss'
 import React, {useState} from 'react'
 import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index ad2b831..1c90008 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -1,4 +1,4 @@
-import styles from '../Notes.module.scss'
+import styles from '../styles/Notes.module.scss'
 import React, {useState} from 'react'
 import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 9655d74..5039061 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,4 +1,4 @@
-import styles from '../Notes.module.scss'
+import styles from '../styles/Notes.module.scss'
 import React, {useState, useEffect} from 'react'
 import useUser from 'hooks/useUser'
 import useSettings from 'hooks/useSettings'
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 4a2d6f6..4abefd3 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -1,4 +1,4 @@
-import styles from '../Notes.module.scss'
+import styles from '../styles/Notes.module.scss'
 import React from 'react'
 import {getNote, exportNote, removeNote} from '../helpers/noteActions.js'
 import useSettings from 'hooks/useSettings'
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index f9cc3f2..45d226f 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -1,4 +1,4 @@
-import styles from '../Notes.module.scss'
+import styles from '../styles/Notes.module.scss'
 import React from 'react'
 import usePopup from 'hooks/usePopup'
 import useSettings from 'hooks/useSettings'
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index 02937f8..ccaf343 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -1,4 +1,4 @@
-import styles from '../Notes.module.scss'
+import styles from '../styles/Notes.module.scss'
 import React from 'react';
 import useSettings from 'hooks/useSettings'
 import usePopup from 'hooks/usePopup'
diff --git a/apps/Notes/styles/Notes.module.scss b/apps/Notes/styles/Notes.module.scss
new file mode 100644
index 0000000..3208b80
--- /dev/null
+++ b/apps/Notes/styles/Notes.module.scss
@@ -0,0 +1,6 @@
+@import "listItem";
+@import "noteView";
+@import "notesList";
+@import "noteEdit";
+@import "import";
+@import "export";
diff --git a/apps/Notes/styles/_export.scss b/apps/Notes/styles/_export.scss
new file mode 100644
index 0000000..d5951f3
--- /dev/null
+++ b/apps/Notes/styles/_export.scss
@@ -0,0 +1,19 @@
+.export {
+  padding: 1em;
+
+  p {
+    padding-top: 2em;
+    padding-bottom: 1em;
+  }
+
+  &__select {
+    display: inline-block;
+    border-bottom: 1px dashed var(--color-decor);
+    padding-bottom: .5em;
+    margin-bottom: .25em;
+  }
+
+  input[type=checkbox] {
+    margin: .5em .5em 0 0;
+  }
+}
diff --git a/apps/Notes/styles/_import.scss b/apps/Notes/styles/_import.scss
new file mode 100644
index 0000000..5d167a8
--- /dev/null
+++ b/apps/Notes/styles/_import.scss
@@ -0,0 +1,39 @@
+.import {
+  @keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+
+  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: var(--color-success);
+  }
+}
diff --git a/apps/Notes/styles/_listItem.scss b/apps/Notes/styles/_listItem.scss
new file mode 100644
index 0000000..5e7376f
--- /dev/null
+++ b/apps/Notes/styles/_listItem.scss
@@ -0,0 +1,46 @@
+.listItem {
+  td {
+    min-width: 10em;
+    white-space: nowrap;
+
+    &:first-of-type {
+      width: 99%;
+      display: flex;
+      margin-right: 1em;
+
+      & > span:nth-child(1) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex-grow: 1;
+      }
+
+      & > span:nth-child(n+2){
+        margin-left: .25em;
+        padding: .15em .5em;
+        line-height: 1em;
+        border-radius: 50%;
+        visibility: hidden;
+        opacity: 0;
+        font-size: 80%;
+        transition: .3s opacity linear .3s;
+      }
+    }
+  }
+
+  &:hover {
+    background: var(--color-window-menu-alt);
+    border-radius: .5em;
+    // cursor: pointer;
+
+    & > td:first-of-type > span:nth-child(n+2){
+      color: var(--color-window-buttons);
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  & > td:first-of-type > span:nth-child(n+2):hover {
+    color: var(--color-text-alt);
+    background-color: var(--color-glass);
+  }
+}
diff --git a/apps/Notes/styles/_noteEdit.scss b/apps/Notes/styles/_noteEdit.scss
new file mode 100644
index 0000000..43191fe
--- /dev/null
+++ b/apps/Notes/styles/_noteEdit.scss
@@ -0,0 +1,64 @@
+.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;
+  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] {
+    background-color: var(--color-window-content);
+    color: var(--color-text-alt);
+    margin-bottom: .5rem;
+    height: 3rem;
+    border: none;
+    padding: 0.5rem;
+    font-size: 1rem;
+    border: 1px dashed var(--color-window-buttons);
+
+    &:placeholder {
+      font: inherit;
+    }
+  }
+
+  textarea {
+    background-color: var(--color-window-content);
+    color: var(--color-text-alt);
+    font-size: 1rem;
+    flex-grow: 1;
+    resize: none;
+    height: 100%;
+    width: 100%;
+    border: none;
+    border: 1px dashed var(--color-window-buttons);
+    padding: 0.5rem;
+
+    &:placeholder {
+      font: inherit;
+    }
+  }
+}
diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss
new file mode 100644
index 0000000..cf6a080
--- /dev/null
+++ b/apps/Notes/styles/_noteView.scss
@@ -0,0 +1,29 @@
+.noteView {
+  @keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+
+  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 {
+    line-height: 1.33;
+    padding: 0 1rem 1rem;
+    white-space: pre-line;
+    user-select: text;
+  }
+}
+
diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss
new file mode 100644
index 0000000..f55757f
--- /dev/null
+++ b/apps/Notes/styles/_notesList.scss
@@ -0,0 +1,43 @@
+.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;
+    }
+  }
+}