aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/Notes/Notes.module.scss244
-rw-r--r--apps/Notes/components/Export.js2
-rw-r--r--apps/Notes/components/Import.js2
-rw-r--r--apps/Notes/components/List.js2
-rw-r--r--apps/Notes/components/ListItem.js2
-rw-r--r--apps/Notes/components/NoteEdit.js2
-rw-r--r--apps/Notes/components/NoteView.js2
-rw-r--r--apps/Notes/styles/Notes.module.scss6
-rw-r--r--apps/Notes/styles/_export.scss19
-rw-r--r--apps/Notes/styles/_import.scss39
-rw-r--r--apps/Notes/styles/_listItem.scss46
-rw-r--r--apps/Notes/styles/_noteEdit.scss64
-rw-r--r--apps/Notes/styles/_noteView.scss29
-rw-r--r--apps/Notes/styles/_notesList.scss43
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;
+ }
+ }
+}