From 29a78aeb3a86299011bb81a0f66ce109dccfe0a6 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Mon, 3 May 2021 14:33:25 +0300
Subject: [PATCH] created label and input elements

---
 src/App.scss                       |  1 +
 src/sass/abstracts/_variables.scss |  5 ++++
 src/sass/components/_form.scss     | 47 ++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 src/sass/components/_form.scss

diff --git a/src/App.scss b/src/App.scss
index fb97904..b77f987 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -13,6 +13,7 @@
 @import "./sass/components/card";
 @import "./sass/components/story";
 @import "./sass/components/bg-video";
+@import "./sass/components/form";
 
 @import "./sass/layout/header";
 @import "./sass/layout/grid";
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
index 391f2f1..495b8b7 100644
--- a/src/sass/abstracts/_variables.scss
+++ b/src/sass/abstracts/_variables.scss
@@ -13,6 +13,8 @@ $color-grey-light-1: #f7f7f7;
 $color-grey-light-2: #eee;
 
 $color-grey-dark: #777;
+$color-grey-dark-2: #999;
+
 $color-white: #fff;
 $color-black: #000;
 
@@ -29,4 +31,7 @@ $gutter-horizontal: 6rem;
 $shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
 $shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
 
+$border-radius-small: 0.2rem;
 $border-radius-default: 0.3rem;
+$bottom-border-green: 3px solid $color-primary;
+$bottom-border-orange: 3px solid $color-secondary-dark;
diff --git a/src/sass/components/_form.scss b/src/sass/components/_form.scss
new file mode 100644
index 0000000..89b8345
--- /dev/null
+++ b/src/sass/components/_form.scss
@@ -0,0 +1,47 @@
+.form {
+  &__group:not(:last-child) {
+    margin-bottom: 2rem;
+  }
+
+  &__input {
+    font-size: 1.5rem;
+    font-family: inherit;
+    padding: 1.5rem 2rem;
+    color: inherit;
+    border-radius: $border-radius-small;
+    background-color: rgba($color-white, 0.5);
+    border: none;
+    border-bottom: 3px solid transparent;
+    width: 90%;
+    display: block;
+
+    &:focus {
+      outline: none;
+      box-shadow: $shadow-light;
+      border-bottom: $bottom-border-green;
+    }
+
+    &:focus:invalid {
+      border-bottom: $bottom-border-orange;
+    }
+
+    &::-webkit-input-placeholder {
+      color: $color-grey-dark-2;
+    }
+  }
+
+  &__label {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-left: 2rem;
+    margin-top: 0.7rem;
+    display: block;
+    transition: all 0.3s;
+  }
+
+  &__input:placeholder-shown + &__label {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4rem);
+  }
+}