docs: fix/remove website and docs examples modal modal.showing animations

Author: maiieul

apps/website/src/components/header/header.tsx

@@ -35,11 +35,11 @@ export default component$(({ showVersion = false }: HeaderProps) => {
       background: rgba(0,0,0,0.02);
     }
   
-    .sidebar-mobile.modal-showing {
+    .sidebar-mobile {
       animation: sidebarOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
   
-    .sidebar-mobile.modal-showing::backdrop {
+    .sidebar-mobile::backdrop {
       animation: sidebarFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
   

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -11,14 +11,13 @@ export default component$(() => {
   useStyles$(`
     .make-it-yours::backdrop {
       background: rgba(0,0,0,0.02);
-
     }
   
-    .make-it-yours.modal-showing {
+    .make-it-yours {
       animation: sheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
   
-    .make-it-yours.modal-showing::backdrop {
+    .make-it-yours::backdrop {
       animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
   

apps/website/src/routes/docs/headless/modal/examples/bottom-sheet.tsx

@@ -8,11 +8,11 @@ export default component$(() => {
       background: hsla(0, 0%, 0%, 0.5);
     }
 
-    .bottom-sheet.modal-showing {
+    .bottom-sheet {
       animation: bottomSheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
 
-    .bottom-sheet.modal-showing::backdrop {
+    .bottom-sheet::backdrop {
       animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
 

apps/website/src/routes/docs/headless/modal/examples/sheet.tsx

@@ -8,11 +8,11 @@ export default component$(() => {
     background: hsla(0, 0%, 0%, 0.5);
   }
 
-  .sheet.modal-showing {
+  .sheet {
     animation: sheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
 
-  .sheet.modal-showing::backdrop {
+  .sheet::backdrop {
     animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
 

apps/website/src/routes/docs/headless/modal/examples/transition.tsx

@@ -14,7 +14,7 @@ export default component$(() => {
         transition: opacity 300ms ease;
     }
 
-    .my-transition.modal-showing, .my-transition.modal-showing::backdrop {
+    .my-transition, .my-transition::backdrop {
         opacity: 1;
     }
 

apps/website/src/routes/docs/headless/modal/snippets/animation.css

@@ -2,11 +2,11 @@
   background: hsla(0, 0%, 0%, 0.5);
 }
 
-.my-animation.modal-showing {
+.my-animation {
   animation: modalOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
 }
 
-.my-animation.modal-showing::backdrop {
+.my-animation::backdrop {
   animation: modalFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
 }