Adjust modal scale in animation to be more subtle

RELEASE-NOTES.md

@@ -98,6 +98,7 @@
 - **Menu** - Menus items are now slightly more padded
 - **Menu** - The hover/active state of `dropdown item` have been adjusted to match `item`. Dropdown styles can be themed specifically inside `menu`.
 - **Menu** - Vertical dropdown menus are no longer 100% `min-width`
+- **Modal** - Modal now uses an adjusted `scale in` transition in the default theme, that should be more subtle and work better with long modal content.
 - **Modal** - Modal `onApprove` and `onDeny` now receive the activating element as the first parameter. Added documentation about using `return false` to avoid hiding element on click.
 - **Modal** - Modal content now uses flex, image content now requires `image content` class on parent to allow for flex stylings.
 - **Popup** - `onShow` and `onHide` callback can now cancel popup from showing or hiding by returning false

src/themes/default/modules/modal.overrides

@@ -1,3 +1,38 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+.ui.modal.scale.transition.in {
+  animation-name: modalScaleIn;
+}
+.ui.modal.scale.transition.out {
+  animation-name: modalScaleOut;
+}
+
+/* In */
+@keyframes modalScaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+    transform-origin: 50% 25%;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: 50% 25%;
+  }
+}
+
+/* Out */
+@keyframes modalScaleOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: 50% 25%;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+    transform-origin: 50% 25%;
+  }
+}