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 /login-page/src | |
| 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
Diffstat (limited to 'login-page/src')
| -rw-r--r-- | login-page/src/index.html | 28 | ||||
| -rw-r--r-- | login-page/src/styles.css | 135 |
2 files changed, 0 insertions, 163 deletions
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> 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; -} - |