mirror of
https://github.com/mue/mue.git
synced 2026-07-18 14:34:12 +02:00
feat: Enhance ItemSettingsModal with smoother opening and closing transitions
This commit is contained in:
@@ -184,7 +184,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
closeTimeoutMS={100}
|
||||
closeTimeoutMS={300}
|
||||
onRequestClose={onClose}
|
||||
isOpen={isOpen}
|
||||
className="Modal itemSettingsModal"
|
||||
|
||||
@@ -8,10 +8,34 @@
|
||||
background: var(--modal-background, #1a1a1a);
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
&.ReactModal__Content--after-open {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&.ReactModal__Content--before-close {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.itemSettingsOverlay {
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
background-color: rgb(0 0 0 / 70%);
|
||||
|
||||
&.ReactModal__Overlay--after-open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.itemSettings-header {
|
||||
|
||||
Reference in New Issue
Block a user