From 9e063a71c7c50cb9aa2833d8defd4a9b33e2da82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Fri, 10 Dec 2021 16:06:51 +0100
Subject: '.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.
---
 static/style.scss | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

(limited to 'static/style.scss')

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;
     }
-- 
cgit v1.2.3