🐛 fix(lists.scss): Fix bug where list dropdown menu flashes briefly d…

…uring page load #207
Spiderpig86 · Dec 18, 2023 · 2cbc17a · 2cbc17a
1 parent 856461d
commit 2cbc17a
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 7 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -13521,6 +13521,7 @@ ul .divider::after {
   top: 75%;
   left: 0;
   animation: slide-down var(--animation-duration) ease 1;
+  animation-play-state: paused;
   background-color: var(--cirrus-bg);
   border-radius: 0.2rem;
   box-shadow: 0 1rem 3rem rgba(149, 157, 165, 0.3);
@@ -13551,13 +13552,13 @@ ul .divider::after {
 .list-dropdown.shown .menu,
 .list-dropdown .btn-dropdown:focus + .menu,
 .list-dropdown .menu:hover {
+  animation-play-state: running; /* Resume animation on focus */
   display: block;
   opacity: 1;
   top: 100%;
   z-index: 100;
   pointer-events: auto; /* Restore pointer events */
   height: auto;
-  transition: all var(--animation-duration);
 }
 
 .list-dropdown .btn-group .btn-dropdown:nth-last-child(2) {

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -12100,6 +12100,7 @@ ul .divider::after {
   top: 75%;
   left: 0;
   animation: slide-down var(--animation-duration) ease 1;
+  animation-play-state: paused;
   background-color: var(--cirrus-bg);
   border-radius: 0.2rem;
   box-shadow: 0 1rem 3rem rgba(149, 157, 165, 0.3);
@@ -12130,13 +12131,13 @@ ul .divider::after {
 .list-dropdown.shown .menu,
 .list-dropdown .btn-dropdown:focus + .menu,
 .list-dropdown .menu:hover {
+  animation-play-state: running; /* Resume animation on focus */
   display: block;
   opacity: 1;
   top: 100%;
   z-index: 100;
   pointer-events: auto; /* Restore pointer events */
   height: auto;
-  transition: all var(--animation-duration);
 }
 
 .list-dropdown .btn-group .btn-dropdown:nth-last-child(2) {

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -12101,6 +12101,7 @@ ul .divider::after {
   top: 75%;
   left: 0;
   animation: slide-down var(--animation-duration) ease 1;
+  animation-play-state: paused;
   background-color: var(--cirrus-bg);
   border-radius: 0.2rem;
   box-shadow: 0 1rem 3rem rgba(149, 157, 165, 0.3);
@@ -12131,13 +12132,13 @@ ul .divider::after {
 .list-dropdown.shown .menu,
 .list-dropdown .btn-dropdown:focus + .menu,
 .list-dropdown .menu:hover {
+  animation-play-state: running; /* Resume animation on focus */
   display: block;
   opacity: 1;
   top: 100%;
   z-index: 100;
   pointer-events: auto; /* Restore pointer events */
   height: auto;
-  transition: all var(--animation-duration);
 }
 
 .list-dropdown .btn-group .btn-dropdown:nth-last-child(2) {

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/components/lists.scss b/src/components/lists.scss
@@ -164,6 +164,7 @@
             top: 75%;
             left: 0;
             animation: slide-down var(--animation-duration) ease 1;
+            animation-play-state: paused;
             background-color: var(--cirrus-bg);
             border-radius: 0.2rem;
             box-shadow: 0 1rem 3rem rgba(149, 157, 165, 0.3);
@@ -194,13 +195,13 @@
         &.shown .menu,
         .btn-dropdown:focus + .menu,
         .menu:hover {
+            animation-play-state: running; /* Resume animation on focus */
             display: block;
             opacity: 1;
             top: 100%;
             z-index: 100;
             pointer-events: auto; /* Restore pointer events */
             height: auto;
-            transition: all var(--animation-duration);
         }
 
         .btn-group .btn-dropdown:nth-last-child(2) {