Cool inputs

From f707d0658013504f71545c2a95d415824f96ac35 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 2 Mar 2021 18:02:33 +0200 Subject: Renamed login-page to cool inputs, cleaned out design, improved compatibility --- cool-inputs/README.md | 1 + cool-inputs/preview.gif | Bin 0 -> 251714 bytes cool-inputs/src/index.html | 21 +++++++ cool-inputs/src/styles.css | 109 ++++++++++++++++++++++++++++++++++++ login-page/README.md | 1 - login-page/preview.gif | Bin 251714 -> 0 bytes login-page/src/index.html | 28 ---------- login-page/src/styles.css | 135 --------------------------------------------- 8 files changed, 131 insertions(+), 164 deletions(-) create mode 100644 cool-inputs/README.md create mode 100644 cool-inputs/preview.gif create mode 100644 cool-inputs/src/index.html create mode 100644 cool-inputs/src/styles.css delete mode 100644 login-page/README.md delete mode 100644 login-page/preview.gif delete mode 100644 login-page/src/index.html delete mode 100644 login-page/src/styles.css diff --git a/cool-inputs/README.md b/cool-inputs/README.md new file mode 100644 index 0000000..ee66bcf --- /dev/null +++ b/cool-inputs/README.md @@ -0,0 +1 @@ +![](./preview.gif) diff --git a/cool-inputs/preview.gif b/cool-inputs/preview.gif new file mode 100644 index 0000000..8907a8c Binary files /dev/null and b/cool-inputs/preview.gif differ diff --git a/cool-inputs/src/index.html b/cool-inputs/src/index.html new file mode 100644 index 0000000..de52cb3 --- /dev/null +++ b/cool-inputs/src/index.html @@ -0,0 +1,21 @@ + + + + + + + Cool inputs + + + + + diff --git a/cool-inputs/src/styles.css b/cool-inputs/src/styles.css new file mode 100644 index 0000000..9258b4a --- /dev/null +++ b/cool-inputs/src/styles.css @@ -0,0 +1,109 @@ +/* Global */ + +:root { + --focus-color: forestgreen; + --input-margin: 0.4em; + --transition-duration: 0.2s; +} + +html, body { + height: 100%; + margin: 0; +} + +body { + font: 21px sans-serif; + background-color: white; +} + +/* Core style */ + +form { + height: 100%; + max-width: 20em; + margin-left: auto; + margin-right: auto; + + /* Align inputs vertically and + * center them vertically and horizontally + */ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +form > section { + width: 100%; +} + +input { + width: 100%; + + border: 0; + border-bottom: 1px solid grey; + padding: 0.4em; + padding-left: 0; + + box-sizing: border-box; + font-size: inherit; + margin-bottom: 0.5em; +} + +input:focus, button:focus { + outline: 0; +} + +/* Where the magic happens */ + +.input-selection { + position: relative; + margin-top: 0.7em; +} + +.input-selection label { + transition: var(--transition-duration); + width: inherit; + height: inherit; + + position: absolute; + margin-top: var(--input-margin); + scale: 1em; + color: grey; + left: 0; +} + +.input-selection input::placeholder { + /* Don't show the placeholder when the label is on top */ + opacity: 0; + color: grey; +} + +.input-selection:hover > input::placeholder, +.input-selection > input:focus::placeholder { + /* When hovering on the input, or when having clicked on it, + * show the placeholder + */ + opacity: 1; +} + +.input-selection:hover > label, +.input-selection > input:not(:placeholder-shown) + label, +.input-selection > input:focus + label { + /* When hovering, typing or having typed something in an input, + * make the label smaller, color it and then move it up + */ + font-size: 0.7em; + color: var(--focus-color); + transform: translate(0, -1.2em); +} + +.input-selection:hover > input, +.input-selection > input:focus { + /* When hovering or clicked on it, make it the focus color */ + border-color: var(--focus-color) !important; + caret-color: var(--focus-color); + /* When hovering or clicked on it, make the bottom border wider (taller) */ + border-width: 2px !important; + padding-bottom: calc(var(--input-margin) - 1px) !important; +} diff --git a/login-page/README.md b/login-page/README.md deleted file mode 100644 index ee66bcf..0000000 --- a/login-page/README.md +++ /dev/null @@ -1 +0,0 @@ -![](./preview.gif) diff --git a/login-page/preview.gif b/login-page/preview.gif deleted file mode 100644 index 8907a8c..0000000 Binary files a/login-page/preview.gif and /dev/null differ diff --git a/login-page/src/index.html b/login-page/src/index.html deleted file mode 100644 index 51e896a..0000000 --- a/login-page/src/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - DevHive - Login - - -

- Login -

- -

- - diff --git a/login-page/src/styles.css b/login-page/src/styles.css deleted file mode 100644 index 6640059..0000000 --- a/login-page/src/styles.css +++ /dev/null @@ -1,135 +0,0 @@ -/* Global */ - -:root { - --focus-color: forestgreen; -} - -html, body { - height: 100%; - margin: 0; -} - -body { - font: 21px sans-serif; -} - -form { - width: 100%; -} - -/* Styling of simple elements */ - -#content { - height: 100%; - max-width: 20em; - margin-left: auto; - margin-right: auto; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -#title { - font-size: 2em; - font-weight: bold; -} - -#content input { - border: 0; - border-bottom: 1px solid grey; - padding: 0.4em; - padding-left: 0; - width: 100%; - box-sizing: border-box; - font-size: inherit; - margin-bottom: 0.5em; -} - -#content #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; -} - -input:focus, button:focus { - outline: 0; -} - -#content hr { - width: 100%; - border: 1px solid black; - box-sizing: border-box; -} - -/* Where the magic happens */ - -#submit-btn { - transition: 0.2s; - background-color: black; - color: white; - text-align: center; -} - -#submit-btn:hover { - cursor: pointer; - border-color: var(--focus-color) !important; - color: var(--focus-color); - background-color: white; -} - -#submit-btn:active { - transition: 0s; - transform: scale(0.9); -} - -.input-selection { - position: relative; - margin-top: 0.7em; -} - -.input-selection label { - transition: 0.2s; - width: inherit; - height: inherit; - position: absolute; - margin-top: 0.4em; - scale: 1em; - color: grey; - left: 0; -} - -.input-selection input::-webkit-input-placeholder { - /* Don't show the placeholder when the label is on top */ - opacity: 0; -} - -.input-selection:hover > label, -.input-selection > input:not(:placeholder-shown) + label, -.input-selection > input:focus + label { - /* When hovering, typing or having typed something in an input, - * make the label smaller, color it and then move it up - */ - font-size: 0.7em; - color: var(--focus-color); - transform: translate(0, -1.2em); -} - -.input-selection:hover > input::-webkit-input-placeholder, -.input-selection > input:focus::-webkit-input-placeholder { - opacity: 1; -} - -.input-selection:hover > input, -.input-selection > input:focus { - border-color: var(--focus-color) !important; - caret-color: var(--focus-color); - border-width: 2px !important; - margin-top: -1px !important; -} - -- cgit v1.2.3