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

3 files changed, 13 insertions, 23 deletions

diff --git a/module/calp/html/components.scm b/module/calp/html/components.scm
index 816975e7..1d677c0d 100644
--- a/module/calp/html/components.scm
+++ b/module/calp/html/components.scm
@@ -79,7 +79,7 @@
               [else
                (set! body (car rem))
                (loop (cdr rem))])))
-      (div ,body))))
+      ,body)))
 
 
 ;; Creates a group of tabs from a given specification. The specification
diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index e487ce3c..e50bcfe5 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -171,7 +171,7 @@ window.default_calendar='~a';"
                                               [(month) "view=month"]
                                               [(week) "view=week"]
                                               [else ""]))))
-                       (div "idag"))))
+                       "idag")))
 
               (div (@ (id "jump-to"))
                    ;; Firefox's accessability complain about each date
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;
     }