diff options
29 files changed, 551 insertions, 548 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; + } + } +} diff --git a/styles/Main.module.scss b/styles/Main.module.scss index 6663b15..a1f39ea 100644 --- a/styles/Main.module.scss +++ b/styles/Main.module.scss @@ -1,295 +1,10 @@ -.layout { - color: var(--color-text); - height: 100vh; - background: var(--color-bg); - background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%); - position: relative; -} - -.icon { - text-decoration: none; - display: inline-block; - padding: .5em; - text-align: center; - outline: none; - - img { - width: 3em; - } - - p { - margin-top: .25em; - padding: .25em; - transition: .2s background; - border-radius: .5em; - } - - &:focus p { - background-color: var(--color-selected); - } -} - -.userForm { - padding: 2em; - - label, - & { - display: flex; - flex-flow: column; - } - - label > span { - font-weight: 600; - } - - input[type=email], - input[type=password] { - color: var(--color-text-alt); - background: var(--color-window-content); - padding: .5em; - margin: .5em 0; - border: 1px dashed var(--color-decor); - border-radius: .5px; - } - - - input[type=password]:nth-of-type(2) { - margin-top: 1em; - } - - p { - text-align: center; - color: var(--color-error); - margin: 1rem 0 0; - } - - legend { - font-size: .8em; - padding: 2em 0 1.5em; - } - - & > fieldset:nth-of-type(1) { - fieldset { - display: inline-block; - } - - input { - display: none; - } - - label { - padding: 0 .75em; - transition: .3s color; - display: inline-block; - color: var(--color-decor); - margin-bottom: .5em; - - &:hover { - color: #666; - } - } - - input:checked + label { - font-weight: 600; - color: var(--color-text); - } - } - - & > fieldset:nth-of-type(2) { - fieldset { - display: inline-block; - } - - input { - display: none; - } - - label { - width: 2em; - height: 2em; - display: inline-block; - margin: 0 1em 1em; - outline-offset: 4px; - } - - fieldset:nth-of-type(1) label { - background-color: #53e3a6; - } - - fieldset:nth-of-type(2) label { - background-color: #2986b3; - } - - fieldset:nth-of-type(3) label { - background-color: #000; - } - - input:checked + label { - outline: 3px solid var(--color-window-buttons); - } - } - - input[type=submit] { - margin-top: 1.5em; - } -} - -.header { - height: 2em; - background-color: var(--color-glass); - border-bottom: 1px solid var(--color-window-border-bottom); - - nav { - display: flex; - - & > ul:first-of-type { - flex-grow: 1; - overflow: auto; - } - - & > ul { - display: block; - - & > li { - display: inline-block; - - & > span, - & > a { - display: inline-block; - color: var(--color-text); - text-decoration: none; - align-items: center; - padding: .25em .5em; - margin: .25em; - border-radius: .5em; - transition: .3s background, .3s color; - - &:hover { - background-color: var(--color-selected); - color: var(--color-text-alt); - } - } - } - } - } -} - -.headerOverlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - cursor: auto; -} - -.user { - font-weight: 600; - // cursor: pointer; - position: relative; - padding: .25em .5em; - margin: .25em; - border-radius: .5em; - transition: .3s background, .3s color; - - &:hover { - color: var(--color-text-alt); - background-color: var(--color-selected); - } -} - -.submenu { - position: absolute; - right: 4px; - top: 2.1em; - padding: .75em; - background-color: var(--color-window-content); - border-bottom: 1px solid var(--color-window-border-bottom); - border-radius: .5em; - display: flex; - flex-direction: column; - - & > li > span, - & > li > a { - display: block; - color: var(--color-text); - padding: .5em; - margin: .25em; - white-space: nowrap; - text-decoration: none; - transition: .3s background, .3s color; - border-radius: .5em; - - &:hover { - color: var(--color-text-alt); - background-color: var(--color-selected); - } - } -} - -.verify { - & > form { - padding: .5em 0; - - & > input { - padding: .75em; - border-radius: .5em; - } - } - - p { - line-height: 1.33; - padding: .5em 0; - } - - .email { - color: var(--color-link); - // cursor: pointer; - } - .error { - color: var(--color-error); - } -} - -.fixed { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.loader, -.connection { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - flex-direction: column; - - @keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - svg { - font-size: 600%; - color: #ccc; - } - - p { - padding-top: 1em; - color: #ccc; - font-weight: 600; - } -} - -.loader { - svg { - animation: rotating 1s linear infinite; - } -} +@import "main/layout"; +@import "main/icon"; +@import "main/userForm"; +@import "main/header"; +@import "main/headerOverlay"; +@import "main/user"; +@import "main/submenu"; +@import "main/verify"; +@import "main/fixed"; +@import "main/splash"; diff --git a/styles/global.scss b/styles/global.scss index 11d23d3..0a542a9 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -1,6 +1,6 @@ -@import "reset"; -@import "themes"; -@import "window"; +@import "global/reset"; +@import "global/themes"; +@import "global/window"; main { position: fixed; diff --git a/styles/_reset.scss b/styles/global/_reset.scss index 0dc1326..0dc1326 100755 --- a/styles/_reset.scss +++ b/styles/global/_reset.scss diff --git a/styles/_themes.scss b/styles/global/_themes.scss index 9319fa5..9319fa5 100644 --- a/styles/_themes.scss +++ b/styles/global/_themes.scss diff --git a/styles/_window.scss b/styles/global/_window.scss index 08ddfaf..08ddfaf 100644 --- a/styles/_window.scss +++ b/styles/global/_window.scss diff --git a/styles/main/_fixed.scss b/styles/main/_fixed.scss new file mode 100644 index 0000000..16cfbd8 --- /dev/null +++ b/styles/main/_fixed.scss @@ -0,0 +1,7 @@ +.fixed { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} diff --git a/styles/main/_header.scss b/styles/main/_header.scss new file mode 100644 index 0000000..9fab16b --- /dev/null +++ b/styles/main/_header.scss @@ -0,0 +1,39 @@ +.header { + height: 2em; + background-color: var(--color-glass); + border-bottom: 1px solid var(--color-window-border-bottom); + + nav { + display: flex; + + & > ul:first-of-type { + flex-grow: 1; + overflow: auto; + } + + & > ul { + display: block; + + & > li { + display: inline-block; + + & > span, + & > a { + display: inline-block; + color: var(--color-text); + text-decoration: none; + align-items: center; + padding: .25em .5em; + margin: .25em; + border-radius: .5em; + transition: .3s background, .3s color; + + &:hover { + background-color: var(--color-selected); + color: var(--color-text-alt); + } + } + } + } + } +} diff --git a/styles/main/_headerOverlay.scss b/styles/main/_headerOverlay.scss new file mode 100644 index 0000000..b11897a --- /dev/null +++ b/styles/main/_headerOverlay.scss @@ -0,0 +1,8 @@ +.headerOverlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + cursor: auto; +} diff --git a/styles/main/_icon.scss b/styles/main/_icon.scss new file mode 100644 index 0000000..a7c16ed --- /dev/null +++ b/styles/main/_icon.scss @@ -0,0 +1,22 @@ +.icon { + text-decoration: none; + display: inline-block; + padding: .5em; + text-align: center; + outline: none; + + img { + width: 3em; + } + + p { + margin-top: .25em; + padding: .25em; + transition: .2s background; + border-radius: .5em; + } + + &:focus p { + background-color: var(--color-selected); + } +} diff --git a/styles/main/_layout.scss b/styles/main/_layout.scss new file mode 100644 index 0000000..48374a5 --- /dev/null +++ b/styles/main/_layout.scss @@ -0,0 +1,7 @@ +.layout { + color: var(--color-text); + height: 100vh; + background: var(--color-bg); + background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%); + position: relative; +} diff --git a/styles/main/_splash.scss b/styles/main/_splash.scss new file mode 100644 index 0000000..3db973f --- /dev/null +++ b/styles/main/_splash.scss @@ -0,0 +1,34 @@ +.loader, +.connection { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + flex-direction: column; + + @keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + svg { + font-size: 600%; + color: #ccc; + } + + p { + padding-top: 1em; + color: #ccc; + font-weight: 600; + } +} + +.loader { + svg { + animation: rotating 1s linear infinite; + } +} diff --git a/styles/main/_submenu.scss b/styles/main/_submenu.scss new file mode 100644 index 0000000..92bac7c --- /dev/null +++ b/styles/main/_submenu.scss @@ -0,0 +1,28 @@ +.submenu { + position: absolute; + right: 4px; + top: 2.1em; + padding: .75em; + background-color: var(--color-window-content); + border-bottom: 1px solid var(--color-window-border-bottom); + border-radius: .5em; + display: flex; + flex-direction: column; + + & > li > span, + & > li > a { + display: block; + color: var(--color-text); + padding: .5em; + margin: .25em; + white-space: nowrap; + text-decoration: none; + transition: .3s background, .3s color; + border-radius: .5em; + + &:hover { + color: var(--color-text-alt); + background-color: var(--color-selected); + } + } +} diff --git a/styles/main/_user.scss b/styles/main/_user.scss new file mode 100644 index 0000000..07e5c28 --- /dev/null +++ b/styles/main/_user.scss @@ -0,0 +1,14 @@ +.user { + font-weight: 600; + // cursor: pointer; + position: relative; + padding: .25em .5em; + margin: .25em; + border-radius: .5em; + transition: .3s background, .3s color; + + &:hover { + color: var(--color-text-alt); + background-color: var(--color-selected); + } +} diff --git a/styles/main/_userForm.scss b/styles/main/_userForm.scss new file mode 100644 index 0000000..5cf0653 --- /dev/null +++ b/styles/main/_userForm.scss @@ -0,0 +1,104 @@ +.userForm { + padding: 2em; + + label, + & { + display: flex; + flex-flow: column; + } + + label > span { + font-weight: 600; + } + + input[type=email], + input[type=password] { + color: var(--color-text-alt); + background: var(--color-window-content); + padding: .5em; + margin: .5em 0; + border: 1px dashed var(--color-decor); + border-radius: .5px; + } + + + input[type=password]:nth-of-type(2) { + margin-top: 1em; + } + + p { + text-align: center; + color: var(--color-error); + margin: 1rem 0 0; + } + + legend { + font-size: .8em; + padding: 2em 0 1.5em; + } + + & > fieldset:nth-of-type(1) { + fieldset { + display: inline-block; + } + + input { + display: none; + } + + label { + padding: 0 .75em; + transition: .3s color; + display: inline-block; + color: var(--color-decor); + margin-bottom: .5em; + + &:hover { + color: #666; + } + } + + input:checked + label { + font-weight: 600; + color: var(--color-text); + } + } + + & > fieldset:nth-of-type(2) { + fieldset { + display: inline-block; + } + + input { + display: none; + } + + label { + width: 2em; + height: 2em; + display: inline-block; + margin: 0 1em 1em; + outline-offset: 4px; + } + + fieldset:nth-of-type(1) label { + background-color: #53e3a6; + } + + fieldset:nth-of-type(2) label { + background-color: #2986b3; + } + + fieldset:nth-of-type(3) label { + background-color: #000; + } + + input:checked + label { + outline: 3px solid var(--color-window-buttons); + } + } + + input[type=submit] { + margin-top: 1.5em; + } +} diff --git a/styles/main/_verify.scss b/styles/main/_verify.scss new file mode 100644 index 0000000..d962916 --- /dev/null +++ b/styles/main/_verify.scss @@ -0,0 +1,23 @@ +.verify { + & > form { + padding: .5em 0; + + & > input { + padding: .75em; + border-radius: .5em; + } + } + + p { + line-height: 1.33; + padding: .5em 0; + } + + .email { + color: var(--color-link); + // cursor: pointer; + } + .error { + color: var(--color-error); + } +} |