move EP css

folk-systems · Dec 3, 2024 · de8e3ac · de8e3ac
1 parent ba41651
commit de8e3ac
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 47 deletions.
diff --git a/demo/audio-beats-with-event-propagators.html b/demo/audio-beats-with-event-propagators.html
@@ -15,13 +15,6 @@
         margin: 0;
       }
 
-      folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
-      }
-
       folk-shape {
         border: 1px solid black;
         border-radius: 4px;

diff --git a/demo/embeddable-llm-with-propagators.html b/demo/embeddable-llm-with-propagators.html
@@ -15,13 +15,6 @@
         margin: 0;
       }
 
-      folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
-      }
-
       folk-shape {
         border: 1px solid black;
         border-radius: 4px;

diff --git a/demo/event-propagators.html b/demo/event-propagators.html
@@ -22,13 +22,6 @@
         padding: 0px 5px;
         z-index: 10;
       }
-
-      folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
-      }
     </style>
   </head>
   <body>

diff --git a/demo/folk-interface-for-qr-codes.html b/demo/folk-interface-for-qr-codes.html
@@ -20,13 +20,6 @@
         field-sizing: content;
       }
 
-      folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
-      }
-
       body:not([rope-mode]) folk-event-propagator {
         display: none;
       }

diff --git a/demo/propagator-toolbar.html b/demo/propagator-toolbar.html
@@ -28,14 +28,6 @@
         position: absolute;
         inset: 0;
       }
-
-      folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
-        z-index: 1000;
-      }
     </style>
   </head>
   <body>

diff --git a/demo/proximity-based-communication-and-event-propagators.html b/demo/proximity-based-communication-and-event-propagators.html
@@ -54,13 +54,6 @@
         border-radius: 5px;
         padding: 1rem;
       }
-
-      folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
-      }
     </style>
   </head>
   <body>

diff --git a/demo/spreadsheet-map-propagator.html b/demo/spreadsheet-map-propagator.html
@@ -22,10 +22,6 @@
       }
 
       folk-event-propagator {
-        display: block;
-        position: absolute;
-        inset: 0 0 0 0;
-        pointer-events: none;
         z-index: calc(infinity);
       }
     </style>

diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts
@@ -5,6 +5,13 @@ import type { Node } from '@babel/types';
 
 const styles = new CSSStyleSheet();
 styles.replaceSync(css`
+  :host {
+    display: block;
+    position: absolute;
+    inset: 0 0 0 0;
+    pointer-events: none;
+  }
+
   textarea {
     position: absolute;
     width: auto;