'.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.

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;
     }