Merge pull request #6 from moevm/manucharova_input

UI element: input
moevm · Nov 8, 2024 · dd2b7bc · dd2b7bc
2 parents 179087e + 7f1cf8a
commit dd2b7bc
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 0 deletions.
diff --git a/main/_front/src/html/input.html b/main/_front/src/html/input.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="../scss/style.scss">
+    <script src="../js/main.js" defer></script>
+</head>
+<body>
+<div class="section">
+    <div class="container">
+        <div style="width: 360px">
+            <div class="input">
+                <input class="input__text" type="email" placeholder="">
+                <span>Почта</span>
+            </div>
+            <div style="margin-top: 20px;"></div>
+            <div class="input">
+                <input class="input__text" type="password" placeholder="">
+                <span>Пароль</span>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/main/_front/src/scss/elems/_input.scss b/main/_front/src/scss/elems/_input.scss
@@ -0,0 +1,61 @@
+@import "../vars";
+
+.input{
+  position: relative;
+}
+
+.input__text{
+  width: 100%;
+  padding: 16px 15px;
+  border: 2px solid #D0D0D0;
+  background: transparent;
+  border-radius: 10px;
+  outline: none;
+  line-height: 24px;
+  color: #000;
+  transition: border .3s ease;
+  font-size: 18px;
+}
+
+.input span{
+  position: absolute;
+  left: 0;
+  top: 0;
+  line-height: 24px;
+  margin: 17px 3px;
+  padding: 0 12px;
+  pointer-events: none;
+  font-size: 18px;
+  color: #555555;
+  font-weight: 400;
+  border-radius: 6px;
+  transition: .2s ease;
+}
+
+.input__text:not(:placeholder-shown) ~ span,
+.input__text:focus ~ span
+{
+  transform: translate(19px, -7px);
+  font-size: 14px;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  margin: 0;
+  color: #fff;
+}
+
+.input__text:not(:placeholder-shown) ~ span{
+  background: #878787;
+}
+.input__text:focus ~ span{
+  background: $primary;
+}
+
+.input__text:not(:placeholder-shown){
+  border: 2px solid #878787;
+}
+.input__text:focus{
+  border: 2px solid $primary;
+}