Cart: make single-select checkbox look like a button

src/pretix/static/pretixpresale/js/ui/main.js

@@ -125,6 +125,12 @@ var form_handlers = function (el) {
         controls.value = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (currentValue || 0) + step));
         controls.dispatchEvent(new Event("change"));
     });
+    el.find(".btn-checkbox input").on("change", function (e) {
+        $(this).closest(".btn-checkbox")
+            .toggleClass("btn-checkbox-checked", this.checked)
+            .find(".fa").toggleClass("fa-shopping-cart", !this.checked).toggleClass("fa-cart-arrow-down", this.checked);
+    });
+    el.find(".btn-checkbox:has([checked]) .fa-shopping-cart").toggleClass("fa-shopping-cart fa-cart-arrow-down")
 
     el.find("script[data-replace-with-qr]").each(function () {
         var $div = $("<div>");

src/pretix/static/pretixpresale/scss/_event.scss

@@ -29,10 +29,6 @@
             color: $alert-warning-text;
         }
     }
-    .item-checkbox-label {
-        display: block;
-        margin-top: .4em;
-    }
 
     .product-description.with-picture {
         margin-left: 70px;

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -7,6 +7,22 @@ a.btn, button.btn {
   white-space: normal;
 }
 
+.btn-checkbox {
+    position: relative;
+    display: block;
+    padding-left: 24px;
+    padding-right: 24px;
+    white-space: normal;
+
+    input {
+        position: absolute;
+        left: 10px;
+    }
+    &.btn-checkbox-checked {
+        background-color: $gray-lighter;
+    }
+}
+
 .panel-title .radio {
   margin-left: 20px;
 }