From 0b389bfbda060eca8d8af8e26cd41c948b802904 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 29 Oct 2024 12:56:49 +0000 Subject: [PATCH 1/9] Fix: Added notify and drawer default CSS animations --- less/core/drawer.less | 25 +++++++++++++++++++++++++ less/core/notify.less | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/less/core/drawer.less b/less/core/drawer.less index f8db20ef..fbdf3e53 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -20,3 +20,28 @@ } } } + +.drawer:not(.disable-animation) { + .transition(left @duration ease-in, right @duration ease-in, transform @duration ease-in, opacity @duration ease-in;); + opacity: 0; + + &.is-position-auto, + &.is-position-right { + &.anim-open-after { + opacity: 1; + } + &.anim-close-after { + opacity: 0; + } + } + + .dir-rtl &:not(.is-position-right), + &.is-position-left { + &.anim-open-after { + opacity: 1; + } + &.anim-close-after { + opacity: 0; + } + } +} diff --git a/less/core/notify.less b/less/core/notify.less index 1ae95f16..a9ff28e1 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -2,7 +2,6 @@ &__popup { background-color: @notify; color: @notify-inverted; - .transition(margin-top @duration, top @duration;); } &__popup-inner { @@ -106,3 +105,40 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } } + + +.notify:not(.disable-animation) > .notify__popup { + .transition(margin-top @duration, top @duration, transform @duration ease-in, opacity @duration ease-in, height @duration ease-in;); + opacity: 0; + + .anim-open-before& { + opacity: 0; + } + + .anim-open-after& { + transform: translateY(-50%); + opacity: 1; + } + + .anim-close-after& { + transform: translateY(0%); + opacity: 0; + } +} + +.notify:not(.disable-animation) > .notify__shadow { + .transition(opacity @duration ease-in;); + opacity: 0; + + .anim-open-before& { + opacity: 0; + } + + .anim-open-after& { + opacity: 1; + } + + .anim-close-after& { + opacity: 0; + } +} From 5bcc989e0be969867a803eb49474782995ac21ed Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 29 Oct 2024 13:01:00 +0000 Subject: [PATCH 2/9] CSS Defaults --- less/core/notify.less | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/less/core/notify.less b/less/core/notify.less index a9ff28e1..09fe9aa5 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -110,10 +110,7 @@ .notify:not(.disable-animation) > .notify__popup { .transition(margin-top @duration, top @duration, transform @duration ease-in, opacity @duration ease-in, height @duration ease-in;); opacity: 0; - - .anim-open-before& { - opacity: 0; - } + transform: translateY(0%); .anim-open-after& { transform: translateY(-50%); @@ -130,10 +127,6 @@ .transition(opacity @duration ease-in;); opacity: 0; - .anim-open-before& { - opacity: 0; - } - .anim-open-after& { opacity: 1; } From bcfc501166ad3d3512bafcae5463a01c434debc7 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 29 Oct 2024 13:28:29 +0000 Subject: [PATCH 3/9] Drawer shadow animation --- less/core/shadow.less | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/less/core/shadow.less b/less/core/shadow.less index c00e5873..2f9c3108 100644 --- a/less/core/shadow.less +++ b/less/core/shadow.less @@ -1,3 +1,16 @@ .shadow { background-color: fade(@shadow, @shadow-opacity); } + +.shadow:not(.disable-animation) { + .transition(opacity @duration ease-in;); + opacity: 0; + + &.anim-open-after { + opacity: 1; + } + + &.anim-close-after { + opacity: 0; + } +} From f7c894fe6e977e4e69b3d100775523fa73276f56 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 29 Oct 2024 20:59:18 +0000 Subject: [PATCH 4/9] Change classes from open/close to show/hide --- less/core/drawer.less | 8 ++++---- less/core/notify.less | 8 ++++---- less/core/shadow.less | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/less/core/drawer.less b/less/core/drawer.less index fbdf3e53..422b8b83 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -27,20 +27,20 @@ &.is-position-auto, &.is-position-right { - &.anim-open-after { + &.anim-show-after { opacity: 1; } - &.anim-close-after { + &.anim-hide-after { opacity: 0; } } .dir-rtl &:not(.is-position-right), &.is-position-left { - &.anim-open-after { + &.anim-show-after { opacity: 1; } - &.anim-close-after { + &.anim-hide-after { opacity: 0; } } diff --git a/less/core/notify.less b/less/core/notify.less index 09fe9aa5..0b4e8d7d 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -112,12 +112,12 @@ opacity: 0; transform: translateY(0%); - .anim-open-after& { + .anim-show-after& { transform: translateY(-50%); opacity: 1; } - .anim-close-after& { + .anim-hide-after& { transform: translateY(0%); opacity: 0; } @@ -127,11 +127,11 @@ .transition(opacity @duration ease-in;); opacity: 0; - .anim-open-after& { + .anim-show-after& { opacity: 1; } - .anim-close-after& { + .anim-hide-after& { opacity: 0; } } diff --git a/less/core/shadow.less b/less/core/shadow.less index 2f9c3108..b43e56c6 100644 --- a/less/core/shadow.less +++ b/less/core/shadow.less @@ -6,11 +6,11 @@ .transition(opacity @duration ease-in;); opacity: 0; - &.anim-open-after { + &.anim-show-after { opacity: 1; } - &.anim-close-after { + &.anim-hide-after { opacity: 0; } } From 08b58c800455821f82d45ecf872602673941c4f4 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Wed, 30 Oct 2024 14:58:34 -0600 Subject: [PATCH 5/9] Update durations and easing --- less/core/drawer.less | 2 +- less/core/notify.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/less/core/drawer.less b/less/core/drawer.less index 422b8b83..c4ec6eb0 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -22,7 +22,7 @@ } .drawer:not(.disable-animation) { - .transition(left @duration ease-in, right @duration ease-in, transform @duration ease-in, opacity @duration ease-in;); + .transition(left var(--drawerDuration) @animation-easing, right var(--drawerDuration) @animation-easing, transform var(--drawerDuration) @animation-easing, opacity var(--drawerDuration) @animation-easing;); opacity: 0; &.is-position-auto, diff --git a/less/core/notify.less b/less/core/notify.less index 0b4e8d7d..04bb0f70 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -108,7 +108,7 @@ .notify:not(.disable-animation) > .notify__popup { - .transition(margin-top @duration, top @duration, transform @duration ease-in, opacity @duration ease-in, height @duration ease-in;); + .transition(margin-top 0.4s @animation-easing, top 0.4s @animation-easing, transform 0.4s @animation-easing, opacity 0.4s @animation-easing, height 0.4s @animation-easing;); opacity: 0; transform: translateY(0%); @@ -124,7 +124,7 @@ } .notify:not(.disable-animation) > .notify__shadow { - .transition(opacity @duration ease-in;); + .transition(opacity 0.4s @animation-easing;); opacity: 0; .anim-show-after& { From 48809d97f8c12f80b5472ff9295012db3b656f8e Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 31 Oct 2024 09:17:25 -0600 Subject: [PATCH 6/9] Rename drawer duration variable --- less/core/drawer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/core/drawer.less b/less/core/drawer.less index c4ec6eb0..98808bb2 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -22,7 +22,7 @@ } .drawer:not(.disable-animation) { - .transition(left var(--drawerDuration) @animation-easing, right var(--drawerDuration) @animation-easing, transform var(--drawerDuration) @animation-easing, opacity var(--drawerDuration) @animation-easing;); + .transition(left var(--adapt-drawer-duration) @animation-easing, right var(--adapt-drawer-duration) @animation-easing, transform var(--adapt-drawer-duration) @animation-easing, opacity var(--adapt-drawer-duration) @animation-easing;); opacity: 0; &.is-position-auto, From b6baec71ac2689d3581b9380c9724fbd3616c13a Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 31 Oct 2024 09:37:18 -0600 Subject: [PATCH 7/9] Add --adapt-notify-duration CSS prop --- less/core/notify.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/less/core/notify.less b/less/core/notify.less index 04bb0f70..897294eb 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -108,7 +108,7 @@ .notify:not(.disable-animation) > .notify__popup { - .transition(margin-top 0.4s @animation-easing, top 0.4s @animation-easing, transform 0.4s @animation-easing, opacity 0.4s @animation-easing, height 0.4s @animation-easing;); + .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%); @@ -124,7 +124,7 @@ } .notify:not(.disable-animation) > .notify__shadow { - .transition(opacity 0.4s @animation-easing;); + .transition(opacity var(--adapt-notify-duration) @animation-easing;); opacity: 0; .anim-show-after& { From 2c27f45fc125bea591aee3e3099afe9188fe0e96 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Wed, 11 Dec 2024 08:48:46 -0700 Subject: [PATCH 8/9] Change drawer show/hide easing to use CSS variables --- less/core/drawer.less | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/less/core/drawer.less b/less/core/drawer.less index 98808bb2..19e550e1 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -22,14 +22,22 @@ } .drawer:not(.disable-animation) { - .transition(left var(--adapt-drawer-duration) @animation-easing, right var(--adapt-drawer-duration) @animation-easing, transform var(--adapt-drawer-duration) @animation-easing, opacity var(--adapt-drawer-duration) @animation-easing;); 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), transform 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), transform 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; } @@ -40,6 +48,7 @@ &.anim-show-after { opacity: 1; } + &.anim-hide-after { opacity: 0; } From f0697ec64b378b1585d9ca7ea64a71a946c2b73d Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Wed, 11 Dec 2024 09:46:25 -0700 Subject: [PATCH 9/9] Remove transform transition as it is not being used --- less/core/drawer.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/less/core/drawer.less b/less/core/drawer.less index 19e550e1..cc059cdb 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -25,11 +25,11 @@ 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), transform var(--adapt-drawer-duration) var(--adapt-drawer-show-easing), opacity var(--adapt-drawer-duration) var(--adapt-drawer-show-easing);); + .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), transform var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing), opacity var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing);); + .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,