Restructuring the Project

Updating dependencies

FrontendLegacy/shared/inputs.scss

@@ -0,0 +1,113 @@
+@import "style";
+.group {
+   position: relative;
+   margin-bottom: 24px;
+   min-height: 45px;
+}
+
+.floating > input {
+   font-size: 18px;
+   padding: 10px 10px 10px 5px;
+   appearance: none;
+   -webkit-appearance: none;
+   display: block;
+   background: #fafafa;
+   color: #636363;
+   width: 100%;
+   border: none;
+   border-radius: 0;
+   border-bottom: 1px solid #757575;
+}
+
+.floating > input:focus {
+   outline: none;
+}
+
+/* Label */
+
+.floating > label {
+   color: #999;
+   font-size: 18px;
+   font-weight: normal;
+   position: absolute;
+   pointer-events: none;
+   left: 5px;
+   top: 10px;
+   transition: all 0.2s ease;
+}
+
+/* active */
+
+.floating > input:focus ~ label,
+.floating > input.used ~ label {
+   top: -0.75em;
+   transform: scale(0.75);
+   left: -2px;
+   /* font-size: 14px; */
+   color: $primary;
+   transform-origin: left;
+}
+
+/* Underline */
+
+.bar {
+   position: relative;
+   display: block;
+   width: 100%;
+}
+
+.bar:before,
+.bar:after {
+   content: "";
+   height: 2px;
+   width: 0;
+   bottom: 1px;
+   position: absolute;
+   background: $primary;
+   transition: all 0.2s ease;
+}
+
+.bar:before {
+   left: 50%;
+}
+
+.bar:after {
+   right: 50%;
+}
+
+/* active */
+
+.floating > input:focus ~ .bar:before,
+.floating > input:focus ~ .bar:after {
+   width: 50%;
+}
+
+/* Highlight */
+
+.highlight {
+   position: absolute;
+   height: 60%;
+   width: 100px;
+   top: 25%;
+   left: 0;
+   pointer-events: none;
+   opacity: 0.5;
+}
+
+/* active */
+
+.floating > input:focus ~ .highlight {
+   animation: inputHighlighter 0.3s ease;
+}
+
+/* Animations */
+
+@keyframes inputHighlighter {
+   from {
+      background: $primary;
+   }
+   to {
+      width: 0;
+      background: transparent;
+   }
+}