From 7f1cf8ac34b7dc68631440ac12957934c769feee Mon Sep 17 00:00:00 2001 From: ifdjhxh Date: Thu, 7 Nov 2024 21:09:47 +0300 Subject: [PATCH] add input element --- main/_front/src/html/input.html | 29 ++++++++++++ main/_front/src/scss/elems/_input.scss | 61 ++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 main/_front/src/html/input.html create mode 100644 main/_front/src/scss/elems/_input.scss diff --git a/main/_front/src/html/input.html b/main/_front/src/html/input.html new file mode 100644 index 0000000..f58d514 --- /dev/null +++ b/main/_front/src/html/input.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + + +
+
+
+
+ + Почта +
+
+
+ + Пароль +
+
+
+
+ + \ No newline at end of file diff --git a/main/_front/src/scss/elems/_input.scss b/main/_front/src/scss/elems/_input.scss new file mode 100644 index 0000000..88705b0 --- /dev/null +++ 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; +} \ No newline at end of file