mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 10:44:14 +08:00
23ff7de8a4
## 🔍 Overview
We recently updated the animation for modals in core:
5263c16327.
Although this looks great for all modals, the summary modal in Discourse
AI is unique in that it is positioned at the top right of the page
without a backdrop. As such, the typical scaling and rising up modal
isn't suitable here.
To improve this, this PR updates the animation for the AI summary modal
(on desktop) to float in from the right. Rather than contain the
animation styles in Discourse AI, this update contains the changes in
core's stylesheet in `/base/discourse.scss` (along with some additional
animations in the opposite directions) since these could be useful for
other parts of core later on.
## 📹 Preview
### ← Before
https://github.com/user-attachments/assets/ce5fa7d5-55e1-4a87-95e4-1d21d56e94ee
### → After
https://github.com/user-attachments/assets/e836a834-f8de-413b-95f1-09d415908f77
35 lines
894 B
SCSS
Vendored
35 lines
894 B
SCSS
Vendored
html.scrollable-modal {
|
|
overflow: auto; // overrides core .modal-open class scroll lock
|
|
}
|
|
|
|
.ai-summary-modal {
|
|
.d-modal__container {
|
|
position: fixed;
|
|
top: var(--header-offset);
|
|
margin-top: 1em;
|
|
right: 1em;
|
|
width: 100vw;
|
|
max-width: 30em;
|
|
max-height: calc(
|
|
100vh - var(--header-offset) - 3rem - var(--composer-height, 0px)
|
|
);
|
|
box-shadow: var(--shadow-menu-panel);
|
|
}
|
|
|
|
// Override default modal animations to float in from left
|
|
.d-modal__container.is-entering {
|
|
@include d-animation(float-left, 250ms, cubic-bezier(0.4, 0, 0.2, 1));
|
|
}
|
|
|
|
.d-modal__container.is-exiting {
|
|
@include d-animation(float-out-right, 250ms, cubic-bezier(0.4, 0, 0.2, 1));
|
|
}
|
|
|
|
.fullscreen-composer & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ai-summary-modal + .d-modal__backdrop {
|
|
background: transparent; // allows for reading, but still triggers clickoutside event
|
|
}
|
