diff options
| author | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-03-02 18:02:33 +0200 |
|---|---|---|
| committer | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-03-02 18:02:33 +0200 |
| commit | f707d0658013504f71545c2a95d415824f96ac35 (patch) | |
| tree | 06812cde4a44afab53397ae9bc57f36cd4cf7855 | |
| parent | 5b22c550dbcb203d685b02f4f4a4b6e63556ba60 (diff) | |
| download | css-snippets-f707d0658013504f71545c2a95d415824f96ac35.tar css-snippets-f707d0658013504f71545c2a95d415824f96ac35.tar.gz css-snippets-f707d0658013504f71545c2a95d415824f96ac35.zip | |
Renamed login-page to cool inputs, cleaned out design, improved compatibility
| -rw-r--r-- | cool-inputs/README.md (renamed from login-page/README.md) | 0 | ||||
| -rw-r--r-- | cool-inputs/preview.gif (renamed from login-page/preview.gif) | bin | 251714 -> 251714 bytes | |||
| -rw-r--r-- | cool-inputs/src/index.html | 21 | ||||
| -rw-r--r-- | cool-inputs/src/styles.css (renamed from login-page/src/styles.css) | 106 | ||||
| -rw-r--r-- | login-page/src/index.html | 28 |
5 files changed, 61 insertions, 94 deletions
diff --git a/login-page/README.md b/cool-inputs/README.md index ee66bcf..ee66bcf 100644 --- a/login-page/README.md +++ b/cool-inputs/README.md diff --git a/login-page/preview.gif b/cool-inputs/preview.gif Binary files differindex 8907a8c..8907a8c 100644 --- a/login-page/preview.gif +++ b/cool-inputs/preview.gif 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 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <link rel="stylesheet" href="styles.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Cool inputs</title> + </head> + <body> + <form> + <section class="input-selection"> + <input type="text" placeholder="Username"> + <label>Username</label> + </section> + <section class="input-selection"> + <input type="password" placeholder="Password"> + <label>Password</label> + </section> + </form> + </body> +</html> diff --git a/login-page/src/styles.css b/cool-inputs/src/styles.css index 6640059..9258b4a 100644 --- a/login-page/src/styles.css +++ b/cool-inputs/src/styles.css @@ -2,111 +2,89 @@ :root { --focus-color: forestgreen; + --input-margin: 0.4em; + --transition-duration: 0.2s; } html, body { - height: 100%; - margin: 0; + height: 100%; + margin: 0; } body { font: 21px sans-serif; + background-color: white; } -form { - width: 100%; -} - -/* Styling of simple elements */ +/* Core style */ -#content { - height: 100%; +form { + height: 100%; max-width: 20em; - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; + /* Align inputs vertically and + * center them vertically and horizontally + */ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } -#title { - font-size: 2em; - font-weight: bold; +form > section { + width: 100%; } -#content input { +input { + width: 100%; + 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; + transition: var(--transition-duration); width: inherit; height: inherit; + position: absolute; - margin-top: 0.4em; + margin-top: var(--input-margin); scale: 1em; color: grey; left: 0; } -.input-selection input::-webkit-input-placeholder { +.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, @@ -120,16 +98,12 @@ input:focus, button:focus { 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: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; - margin-top: -1px !important; + padding-bottom: calc(var(--input-margin) - 1px) !important; } - 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 @@ -<!DOCTYPE html> -<html> - <head> - <link rel="stylesheet" href="styles.css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>DevHive - Login</title> - </head> - <body> - <div id="content"> - <div id="title"> - Login - </div> - <hr> - <form> - <div class="input-selection"> - <input type="text" placeholder="Username" required> - <label>Username</label> - </div> - <div class="input-selection"> - <input type="password" placeholder="Password" required> - <label>Password</label> - </div> - <hr> - <button type="submit" value="Submit" id="submit-btn">Submit</button> - </form> - </div> - </body> -</html> |
