Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Added notify and drawer default CSS animations #531

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Fix: Added notify and drawer default CSS animations #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0b389bf
Fix: Added notify and drawer default CSS animations
oliverfoster Oct 29, 2024
5bcc989
CSS Defaults
oliverfoster Oct 29, 2024
bcfc501
Drawer shadow animation
oliverfoster Oct 29, 2024
f7c894f
Change classes from open/close to show/hide
oliverfoster Oct 29, 2024
08b58c8
Update durations and easing
swashbuck Oct 30, 2024
48809d9
Rename drawer duration variable
swashbuck Oct 31, 2024
b6baec7
Add --adapt-notify-duration CSS prop
swashbuck Oct 31, 2024
2c27f45
Change drawer show/hide easing to use CSS variables
swashbuck Dec 11, 2024
f0697ec
Remove transform transition as it is not being used
swashbuck Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions less/core/drawer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,37 @@
}
}
}

.drawer:not(.disable-animation) {
opacity: 0;

&.anim-show-before {
.transition(left var(--adapt-drawer-duration) var(--adapt-drawer-show-easing), right var(--adapt-drawer-duration) var(--adapt-drawer-show-easing), opacity var(--adapt-drawer-duration) var(--adapt-drawer-show-easing););
}

&.anim-hide-before {
.transition(left var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing), right var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing), opacity var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing););
}

&.is-position-auto,
&.is-position-right {
&.anim-show-after {
opacity: 1;
}

&.anim-hide-after {
opacity: 0;
}
}

.dir-rtl &:not(.is-position-right),
&.is-position-left {
&.anim-show-after {
opacity: 1;
}

&.anim-hide-after {
opacity: 0;
}
}
}
31 changes: 30 additions & 1 deletion less/core/notify.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
&__popup {
background-color: @notify;
color: @notify-inverted;
.transition(margin-top @duration, top @duration;);
}

&__popup-inner {
Expand Down Expand Up @@ -106,3 +105,33 @@
.transition(background-color @duration ease-in, color @duration ease-in;);
}
}


.notify:not(.disable-animation) > .notify__popup {
.transition(margin-top var(--adapt-notify-duration) @animation-easing, top var(--adapt-notify-duration) @animation-easing, transform var(--adapt-notify-duration) @animation-easing, opacity var(--adapt-notify-duration) @animation-easing, height var(--adapt-notify-duration) @animation-easing;);
opacity: 0;
transform: translateY(0%);

.anim-show-after& {
transform: translateY(-50%);
opacity: 1;
}

.anim-hide-after& {
transform: translateY(0%);
opacity: 0;
}
}

.notify:not(.disable-animation) > .notify__shadow {
.transition(opacity var(--adapt-notify-duration) @animation-easing;);
opacity: 0;

.anim-show-after& {
opacity: 1;
}

.anim-hide-after& {
opacity: 0;
}
}
13 changes: 13 additions & 0 deletions less/core/shadow.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
.shadow {
background-color: fade(@shadow, @shadow-opacity);
}

.shadow:not(.disable-animation) {
.transition(opacity @duration ease-in;);
opacity: 0;

&.anim-show-after {
opacity: 1;
}

&.anim-hide-after {
opacity: 0;
}
}