From 4d642e312ed728ad51c454d1e2a0b7bb350fc174 Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Sun, 6 Dec 2020 23:49:13 +0100
Subject: first creator page

---
 client/src/admin/scss/_creator.scss | 81 +++++++++++++++++++++++++++++++++++++
 client/src/admin/scss/_forms.scss   | 38 ++++++++++++++---
 client/src/admin/scss/_globals.scss |  3 --
 client/src/admin/scss/index.scss    |  1 +
 4 files changed, 114 insertions(+), 9 deletions(-)
 create mode 100644 client/src/admin/scss/_creator.scss

(limited to 'client/src/admin/scss')

diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss
new file mode 100644
index 0000000..0bf267e
--- /dev/null
+++ b/client/src/admin/scss/_creator.scss
@@ -0,0 +1,81 @@
+.creator {
+  text-align: center;
+  width: 100%;
+
+  &__header {
+    color: $text;
+    text-align: center;
+    font-size: 1.5em;
+    padding-bottom: 1.5em;
+  }
+
+  &__input-line {
+    max-width: 600px;
+    margin: 0 auto;
+    align-items: center;
+    padding: 1em 0;
+  }
+
+  &__favicon {
+    display: flex;
+
+    &-ico {
+      height: 32px;
+      width: 32px;
+      line-height: 32px;
+      background: $text-inactive;
+      color: $background-menu;
+      border: 1px solid $background-menu;
+      transition: .3s background;
+      cursor: pointer;
+
+      &:hover {
+        background: $text-selected;
+      }
+    }
+
+    &-text {
+      color: $text-inactive;
+      font-size: 1em;
+      line-height: 32px;
+      padding-left: 1em;
+    }
+  }
+
+  &__btns {
+    padding-top: 3em;
+    font-size: 1.5em;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+
+    &-next {
+      color: $text-inactive;
+      display: inline-block;
+      padding: 1em;
+
+      &.active {
+        color: $text;
+        transition: .3s color;
+        cursor: pointer;
+
+        &:hover {
+          color: $text-selected;
+        }
+      }
+    }
+
+    &-cancel {
+      display: inline-block;
+      color: $text;
+      transition: .3s color;
+      cursor: pointer;
+      padding: 1em;
+
+      &:hover {
+        color: $text-selected;
+      }
+    }
+  }
+}
diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss
index e74c343..3e98014 100644
--- a/client/src/admin/scss/_forms.scss
+++ b/client/src/admin/scss/_forms.scss
@@ -1,6 +1,7 @@
 // Text Input
 
-.text-input {
+.text-input,
+.text-area {
   text-align: left;
   margin-bottom: 1.5em;
   transition: all .3s;
@@ -11,12 +12,12 @@
   }
 }
 
-.text-input-label {
+.text-input-label,
+.text-area-label {
   font-size: 1em;
   width: 100%;
   color: #aaa;
   display:block;
-  transform:translateY(-1.75em);
   transform-origin: 0 0;
   transition: all .3s;
   z-index: -1;
@@ -24,17 +25,28 @@
   pointer-events: none;
 }
 
-.text-input-field {
-  font-size: 1.25rem;
+.text-input-label {
+  transform:translateY(-1.75em);
+}
+
+.text-area-label {
+  transform:translateY(-2em);
+}
+
+.text-input-field,
+.text-area textarea {
+  font-size: 1.25em;
   box-shadow: none;
   background: $background;
-  color: $text;
+  color: $text-selected;
   border-radius: 0;
   border-color: #ccc;
   border-style: none none solid none;
   width: 100%;
   transition: all .5s;
   padding: 5px;
+  -webkit-user-select: auto;
+  user-select: auto;
 
   &::placeholder {
     color: transparent;
@@ -46,8 +58,22 @@
     border-color: $text-selected;
   }
 
+}
+
+.text-input-field {
   &:focus + .text-input-label,
   &:not(:placeholder-shown) + .text-input-label {
     transform: translateY(-3em) scale(0.8);
   }
 }
+
+.text-area textarea {
+  height: 6em;
+  resize: none;
+  overflow:hidden;
+
+  &:focus + .text-area-label,
+  &:not(:placeholder-shown) + .text-area-label {
+    transform: translateY(-6.5em) scale(0.8);
+  }
+}
diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss
index d15363f..1039f4b 100644
--- a/client/src/admin/scss/_globals.scss
+++ b/client/src/admin/scss/_globals.scss
@@ -4,9 +4,6 @@ html {
 
 * {
   -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: -moz-none;
-  -o-user-select: none;
   user-select: none;
 }
 
diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss
index ab61dd9..8290be8 100644
--- a/client/src/admin/scss/index.scss
+++ b/client/src/admin/scss/index.scss
@@ -6,3 +6,4 @@
 @import 'info';
 @import 'topBar';
 @import 'mainScreen';
+@import 'creator';
-- 
cgit v1.2.3