diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 698ab75d7..cc918f7af 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/themes/default/modules/modal.overrides b/src/themes/default/modules/modal.overrides index 14fb0da12..cc7b427e2 100644 --- a/src/themes/default/modules/modal.overrides +++ b/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%; + } +}