Display: Legacy collapsible panel styles - refs BT#21588

assets/css/app.scss

@@ -47,15 +47,6 @@
 }
 
 @layer utilities {
-  .custom-collapse {
-    display: none;
-  }
-  .custom-collapse.active {
-    display: block;
-  }
-  .collapse {
-    visibility: inherit !important;
-  }
   .border-gray-300 {
     --tw-border-opacity: 1;
     border-color: rgba(156, 163, 175, var(--tw-border-opacity));

assets/css/scss/index.scss

@@ -40,6 +40,7 @@
 @import "molecules/empty_state";
 @import "molecules/teacher_bar";
 @import "molecules/toolbar";
+@import "molecules/legacy_panel";
 
 @import "organisms/cards";
 @import "organisms/course_card";

assets/css/scss/molecules/_legacy_panel.scss

@@ -0,0 +1,28 @@
+.display-panel-collapse {
+  @apply rounded-lg border-gray-25;
+
+  &__header {
+    @apply relative
+      before:content-[""] before:absolute before:rounded-l-lg before:bg-secondary before:w-1 before:h-full before:-left-1;
+
+    a {
+      @apply cursor-pointer p-2 block bg-support-6 rounded-r-lg;
+
+      &[aria-expanded=true] {
+        @apply rounded-b-none;
+      }
+    }
+
+    ::before {
+      float: right;
+    }
+  }
+
+  &__collapsible {
+    @apply hidden p-3 rounded-b;
+
+    &.active {
+      @apply block shadow-lg;
+    }
+  }
+}

public/main/inc/lib/display.lib.php

@@ -2458,25 +2458,23 @@ class Display
             });
         </script>';
             $html = '
-        <div class="mt-4 rounded-lg bg-gray-15 display-panel-collapse mr-4">
+        <div class="display-panel-collapse">
-            <div class="bg-gray-25 border border-gray-30" id="card_'.$idAccordion.'">
+            <div class="display-panel-collapse__header" id="card_'.$idAccordion.'">
-                <h5>
+                <a role="button"
-                    <a role="button"
+                    class="mdi mdi-chevron-down"
-                        class="cursor-pointer p-2 block mdi mdi-chevron-down"
+                    data-toggle="collapse"
-                        data-toggle="collapse"
+                    data-target="#collapse_'.$idAccordion.'"
-                        data-target="#collapse_'.$idAccordion.'"
+                    aria-expanded="'.(($open) ? 'true' : 'false').'"
-                        aria-expanded="'.(($open) ? 'true' : 'false').'"
+                    aria-controls="collapse_'.$idAccordion.'"
-                        aria-controls="collapse_'.$idAccordion.'"
+                >
-                    >
+                    '.$title.'
-                        '.$title.'
+                </a>
-                    </a>
-                </h5>
             </div>
             <div
                 id="collapse_'.$idAccordion.'"
-                class="px-4 border border-gray-30 bg-white collapse custom-collapse '.(($open) ? 'active' : '').'"
+                class="display-panel-collapse__collapsible '.(($open) ? 'active' : '').'"
             >
-                <div id="collapse_contant_'.$idAccordion.'"  class="card-body ">';
+                <div id="collapse_contant_'.$idAccordion.'">';
 
             $html .= $content;
             $html .= '</div></div></div>';