fix(collapse): replace unicode triangle indicator with pure CSS

hugomods · Mar 22, 2024 · f11183b · f11183b
1 parent 8627eb0
commit f11183b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/assets/mods/bootstrap/scss/_collapse.scss b/assets/mods/bootstrap/scss/_collapse.scss
@@ -1,15 +1,21 @@
 .collapse-toggle {
-  padding-left: 0.25rem !important;
-
   &::before {
-    content: "\2BC8";
     margin-right: 0.25rem;
+    border-left: 10px solid;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    width: 0;
+    height: 0;
+    content: "";
+    display: inline-block;
   }
 
   &[aria-expanded=true] {
     &::before {
-      transform: rotate(90deg);
-      display: inline-block;
+      border-top: 10px solid;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: unset;
     }
   }
 }
diff --git a/assets/mods/bootstrap/scss/index.scss b/assets/mods/bootstrap/scss/index.scss
@@ -1,2 +1,6 @@
+/*! purgecss start ignore */
+
 @import 'alert';
 @import 'collapse';
+
+/*! purgecss end ignore */
diff --git a/layouts/partials/bootstrap/collapse.html b/layouts/partials/bootstrap/collapse.html
@@ -19,7 +19,7 @@
   class="collapse-wrapper mb-1">
   <a
     type="button"
-    class="collapse-toggle text-decoration-none text-bg-{{ $style }} px-2"
+    class="collapse-toggle text-decoration-none text-bg-{{ $style }} py-1 px-2"
     data-bs-toggle="collapse"
     href="#{{ $id }}"
     aria-expanded="{{ cond $expand `true` `false` }}"