split scss into partials

1 files changed, 104 insertions, 0 deletions

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;
+  }
+}