split scss into partials

1 files changed, 10 insertions, 295 deletions

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";