Merge pull request #881 from fritzSF/develop

[STT-77] Provide the HTML css for the embedded forms based on the moc…
superdesk · Oct 3, 2024 · 3976a0e · 3976a0e
2 parents 3dc5535 + 1d45a55
commit 3976a0e
Show file tree

Hide file tree

Showing 6 changed files with 564 additions and 6 deletions.
diff --git a/app/styles/_animations.scss b/app/styles/_animations.scss
@@ -50,3 +50,24 @@
 	opacity: 0;
 	height: 0.1rem !important;
 }
+
+@keyframes appear {
+	from {
+		display: none;
+		opacity: 0;
+	}
+	to {
+		display: flex;
+		opacity: 1;
+	}
+}
+@keyframes vanish {
+	from {
+		display: flex;
+		opacity: 1;
+	}
+	to {
+		display: none;
+		opacity: 0;
+	}
+}
diff --git a/app/styles/components/_sd-collapse-box.scss b/app/styles/components/_sd-collapse-box.scss
@@ -159,6 +159,10 @@
     padding: 0;
     overflow: hidden;
     transition: all 0.2s ease;
+    min
+    .hide-on-open {
+        display: none;
+    }
 }
 .new-collapse-box__content {
     grid-row: 2 / 3;
@@ -253,3 +257,31 @@
         }           
     }
 }
+
+.new-collapse-box {
+    > .new-collapse-box__header  {
+        .new-collapse-box__header-inner {
+           transition: all .2s ease;
+           min-height: auto;
+           .hide-on-open {
+                animation: appear .2s;
+                display: flex;
+                opacity: 1;
+           }
+       }
+   }
+    &.new-collapse-box--open {
+        > .new-collapse-box__header  {
+             .new-collapse-box__header-inner {
+                min-height: var(--space--4);
+                background-color: var(--sd-item__main-Bg);
+                .hide-on-open {
+                    display: none;
+                    opacity: 0;
+                    animation: vanish .2s;
+                }
+            }
+        }
+    }
+}
+
diff --git a/app/styles/primereact/_pr-datepicker.scss b/app/styles/primereact/_pr-datepicker.scss
@@ -220,3 +220,13 @@
 .p-datepicker-today > span {
     background-color: var(--sd-colour-interactive--alpha-20);
 }
+
+.sd-input__input-container {
+    .p-calendar {
+        display: flex;
+        &.p-calendar-w-btn {
+            min-width: 116px;
+            width: auto;
+        }
+    }
+}