Add accordions to the layer selection panel.

1 files changed, 40 insertions, 0 deletions

diff --git a/style.css b/style.css
index cce906c..5838586 100644
--- a/style.css
+++ b/style.css
@@ -255,3 +255,43 @@ html, body {
 .ol-overlaycontainer-stopevent .modal-backdrop.show {
   pointer-events: auto;
 }
+
+#layer-selection-panel .accordion {
+  --bs-accordion-active-bg: var(--bs-accordion-bg);
+  --bs-accordion-active-color: var(--bs-body-color);
+  --bs-accordion-btn-padding-x: 0;
+  --bs-accordion-btn-padding-y: 0;
+  --bs-accordion-btn-focus-box-shadow: none;
+  --bs-accordion-body-padding-x: 0;
+  --bs-accordion-body-padding-y: 0;
+}
+#layer-selection-panel .accordion-item {
+  border: none;
+}
+#layer-selection-panel .accordion-body {
+  padding-left: 1em;
+}
+#layer-selection-panel .accordion .list-group.list-group-flush > .list-group-item {
+  padding: 0;
+  border: none;
+}
+#layer-selection-panel .accordion-item .form-check {
+  padding-left: 0;
+  margin: 0.125rem 0 0 0;
+}
+#layer-selection-panel .accordion-item:first-child .form-check {
+  margin-top: 0;
+}
+#layer-selection-panel .accordion-header > .accordion-button[aria-expanded="true"] {
+  padding-bottom: 0.125rem;
+  margin-bottom: 0.125rem;
+}
+#layer-selection-panel .accordion-header > .accordion-button > .form-check > .form-check-input,
+#layer-selection-panel .accordion > .accordion-item > .form-check > .form-check-input {
+  margin-left: 0;
+  float: none;
+}
+#layer-selection-panel .accordion-item .form-check > .form-check-input,
+#layer-selection-panel .accordion-item .list-group-item > .form-check-input {
+  margin-right: .5em !important;
+}