From 6c54c9d57d5fa4c52aa454ed3ca09060b0674ad3 Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 4 Sep 2021 11:20:34 +0200
Subject: split scss into partials

---
 styles/main/_userForm.scss | 104 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 styles/main/_userForm.scss

(limited to 'styles/main/_userForm.scss')

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;
+  }
+}
-- 
cgit v1.2.3