Issue #3474508: Add a border to file forms

css/components/details.css

@@ -7,17 +7,21 @@
  */
 
 details {
-  border: 1px solid #ccc;
-  margin-top: 1em;
-  margin-bottom: 1em;
+  border: var(--bs-border-style) var(--bs-border-width) var(--bs-border-color);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
-details > .details-wrapper {
-  padding: 0.5em 1.5em;
-}
-/* @todo Regression: The summary of uncollapsible details are no longer
-     vertically aligned with the .details-wrapper in browsers without native
-     details support. */
-summary {
+
+details summary {
   cursor: pointer;
-  padding: 0.2em 0.5em;
+  padding: 1rem;
+  font-weight: bold;
+}
+
+details summary:hover {
+  background-color: var(--bs-secondary-bg);
+}
+
+details>.details-wrapper {
+  margin: 1rem;
 }

scss/components/details.scss

@@ -10,18 +10,15 @@ details {
     border: 1px solid $border-color;
     margin-top: $spacer;
     margin-bottom: $spacer;
-}
-
-details>.details-wrapper {
-    padding: 0.5em 1.5em;
-}
-
-
-/* @todo Regression: The summary of uncollapsible details are no longer
-     vertically aligned with the .details-wrapper in browsers without native
-     details support. */
-
+    font-weight: $font-weight-bold;
     summary {
         cursor: pointer;
-    padding: 0.2em 0.5em;
+        padding: 1rem;
+        &:hover {
+            background-color: var(--bs-secondary-bg);
+        }
+    }
+    &>.details-wrapper {
+        margin: 1rem;
+    }
 }