diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-12-10 16:06:51 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-12-10 16:20:03 +0100 |
commit | 9e063a71c7c50cb9aa2833d8defd4a9b33e2da82 (patch) | |
tree | 1b7fb0e885bb8bf38f789b6a03fec51f076349c2 /static/style.scss | |
parent | Remove commented out script includes. (diff) | |
download | calp-9e063a71c7c50cb9aa2833d8defd4a9b33e2da82.tar.gz calp-9e063a71c7c50cb9aa2833d8defd4a9b33e2da82.tar.xz |
'.btn' no longer contains div.
Previously I generated buttons on the form
<a><div/></a> & <button><div/></button>, which was invalid for button
tags. This removes the inner div, with the only cost being that the
hitbox for the button is slightly wonky if pressed at the top left where
the button isn't when it's depressed, since I move it.
Diffstat (limited to '')
-rw-r--r-- | static/style.scss | 32 |
1 files changed, 11 insertions, 21 deletions
diff --git a/static/style.scss b/static/style.scss index e4aa527f..4e9936a2 100644 --- a/static/style.scss +++ b/static/style.scss @@ -131,8 +131,6 @@ html, body { */ .btn { - padding: 0; - /* if a */ text-decoration: none; @@ -140,29 +138,21 @@ html, body { border: none; background-color: inherit; - > div { - padding: 0.5em; - background-color: $blue; - color: white; - - box-sizing: border-box; - width: 100%; - height: 100%; + /* --- */ - display: flex; - justify-content: center; - align-items: center; + box-sizing: border-box; + padding: 0.5em; - /* shouldn't be needed, but otherwise wont align with a text input - inside a shared flex-container. - It however seems to make <a> and <button> tag refuse to be the same height? - */ - height: 2.5em; + background-color: $blue; + color: white; - box-shadow: $btn-height $btn-height gray; - } + display: flex; + justify-content: center; + align-items: center; - &:active > div { + /* move button slightly, to give illusion of 3D */ + box-shadow: $btn-height $btn-height gray; + &:active { transform: translate($btn-height, $btn-height); box-shadow: none; } |