[6.0] Atum - add nice transition to open/close details (#45794)

* add nice transition to open/close details
* solve jumpy closing by replacing margin-top by padding-top
* solve lint issue. change order

Author: hans2103

build/media_source/templates/administrator/atum/scss/blocks/_global.scss

@@ -230,19 +230,38 @@ a[target="_blank"]::before {
 }
 
 // details
-
 details {
+  --_duration: .2s;
+
   padding: .5rem 1rem;
   margin: 0 0 2rem;
   background: $details-bg;
   border: $details-border;
   border-radius: $border-radius;
 
+  @media (prefers-reduced-motion: no-preference) {
+    interpolate-size: allow-keywords;
+  }
+
+  &::details-content {
+    overflow-y: clip;
+    opacity: 0;
+    block-size: 0;
+    transition: content-visibility var(--_duration) allow-discrete,
+      opacity var(--_duration),
+      block-size var(--_duration);
+  }
+
+  &[open]::details-content {
+    opacity: 1;
+    block-size: auto;
+  }
+
   summary {
     color: var(--template-link-color);
 
     ~ * {
-      margin-top: 1rem;
+      padding-top: 1rem;
     }
   }
 }