From 43874293486392870201da932621e0e6efca6e26 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Sun, 19 Dec 2021 00:16:56 +0100
Subject: [PATCH] Fix multicheckbox layout

---
 Project.toml             |  2 +-
 assets/multicheckbox.css | 12 ++++++------
 assets/multicheckbox.js  |  6 ------
 src/MultiCheckBox.jl     |  2 +-
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/Project.toml b/Project.toml
index e30f92ba..0cd6d6b9 100644
--- a/Project.toml
+++ b/Project.toml
@@ -1,7 +1,7 @@
 name = "PlutoUI"
 uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
 authors = ["Fons van der Plas <fons@plutojl.org>"]
-version = "0.7.24"
+version = "0.7.25"
 
 [deps]
 AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150"
diff --git a/assets/multicheckbox.css b/assets/multicheckbox.css
index 36b95227..aa4d99ab 100644
--- a/assets/multicheckbox.css
+++ b/assets/multicheckbox.css
@@ -1,24 +1,24 @@
-.multicheckbox-container {
+plj-multi-checkbox {
   display: flex;
   flex-wrap: wrap;
   /* max-height: 8em; */
 }
 
-.multicheckbox {
+plj-multi-checkbox * {
   display: flex;
 }
 
-div.multicheckbox {
+plj-multi-checkbox > div {
   margin: 0.1em 0.3em;
   align-items: center;
 }
 
-label.multicheckbox,
-input.multicheckbox {
+plj-multi-checkbox label,
+plj-multi-checkbox input {
   cursor: pointer;
 }
 
-.select-all {
+plj-multi-checkbox .select-all {
   font-style: italic;
   color: hsl(0, 0%, 25%, 0.7);
 }
diff --git a/assets/multicheckbox.js b/assets/multicheckbox.js
index 9dfa5c67..a43b9ac5 100644
--- a/assets/multicheckbox.js
+++ b/assets/multicheckbox.js
@@ -9,10 +9,8 @@ for (let i = 0; i < labels.length; i++) {
   const boxId = `${my_id}-box-${i}`;
 
   const item = document.createElement("div");
-  item.classList.add("multicheckbox");
 
   const checkbox = document.createElement("input");
-  checkbox.classList.add("multicheckbox");
   checkbox.type = "checkbox";
   checkbox.id = boxId;
   checkbox.name = labels[i];
@@ -22,7 +20,6 @@ for (let i = 0; i < labels.length; i++) {
   item.appendChild(checkbox);
 
   const label = document.createElement("label");
-  label.classList.add("multicheckbox");
   label.htmlFor = boxId;
   label.innerText = labels[i];
   item.appendChild(label);
@@ -44,19 +41,16 @@ function updateSelectAll() {}
 if (includeSelectAll) {
   // Add select-all checkbox.
   const selectAllItem = document.createElement("div");
-  selectAllItem.classList.add("multicheckbox");
   selectAllItem.classList.add(`select-all`);
 
   const selectID = `${my_id}-select-all`
   
   const selectAllInput = document.createElement("input");
-  selectAllInput.classList.add("multicheckbox");
   selectAllInput.type = "checkbox";
   selectAllInput.id = selectID;
   selectAllItem.appendChild(selectAllInput);
 
   const selectAllLabel = document.createElement("label");
-  selectAllLabel.classList.add("multicheckbox");
   selectAllLabel.htmlFor = selectID;
   selectAllLabel.innerText = "Select All";
   selectAllItem.appendChild(selectAllLabel);
diff --git a/src/MultiCheckBox.jl b/src/MultiCheckBox.jl
index 12c73f8a..cb43891d 100644
--- a/src/MultiCheckBox.jl
+++ b/src/MultiCheckBox.jl
@@ -134,7 +134,7 @@ begin
 		for (k,v) in mc.options]
 		
         show(io, m, @htl("""
-        <multi-checkbox class="mc-container" style="flex-direction: $(mc.orientation);"></multi-checkbox>
+        <plj-multi-checkbox style="flex-direction: $(mc.orientation);"></plj-multi-checkbox>
         <script type="text/javascript">
             const labels = $([string(v) for (k,v) in mc.options]);
             const values = $(1:length(mc.options));