fix: 🐛 box-sizing css rule scope (#318)

* fix: 🐛 box-sizing scope * chore: 🤖 update changelog
dotlottie · Mar 5, 2024 · 0587998 · 0587998
1 parent 87708de
commit 0587998
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/little-carpets-travel.md b/.changeset/little-carpets-travel.md
@@ -0,0 +1,6 @@
+---
+'@dotlottie/player-component': patch
+'@dotlottie/react-player': patch
+---
+
+fix: 🐛 box-sizing css rule scope
diff --git a/packages/player-component/src/dotlottie-player.styles.ts b/packages/player-component/src/dotlottie-player.styles.ts
@@ -11,10 +11,6 @@ export default css`
     src: url('./fonts/Karla-regular.woff') format('woff');
   }
 
-  * {
-    box-sizing: border-box;
-  }
-
   :host {
     --lottie-player-toolbar-height: 35px;
     --lottie-player-toolbar-background-color: transparent;
@@ -37,6 +33,10 @@ export default css`
     -moz-osx-font-smoothing: grayscale;
   }
 
+  :host * {
+    box-sizing: border-box;
+  }
+
   .active {
     color: var(--lottie-player-toolbar-icon-active-color) !important;
   }

diff --git a/packages/react-player/src/index.css b/packages/react-player/src/index.css
@@ -4,10 +4,6 @@
   src: url('./fonts/Karla-Regular.woff') format('woff');
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .dotlottie-container {
   --lottie-player-theme-color: rgb(0, 221, 179);
   --lottie-player-seeker-thumb-color: #00c1a2;
@@ -29,6 +25,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.dotlottie-container * {
+  box-sizing: border-box;
+}
+
 .main {
   display: flex;
   flex-direction: column;