Moved waveline animation to shared file

computas · Jan 13, 2025 · 2a19e1d · 2a19e1d
1 parent fe8580f
commit 2a19e1d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css
@@ -1,9 +1,3 @@
-@keyframes waveline {
-  to {
-    background-position: 16px;
-  }
-}
-
 .cx-link {
   --line-height: 1.5rem;
   --underline-height: 2px;
@@ -37,7 +31,7 @@
 
   &::after {
     opacity: 0;
-    animation: waveline 0.5s linear infinite;
+    animation: cx-waveline 0.5s linear infinite;
     background-image: url('data:image/svg+xml,<svg width="18" height="7" viewBox="0 0 18 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.57715 4.17283C4.4006 5.46648 2.86064 7 0 7V5C1.96863 5 3.00041 4.03352 4.09755 2.82717C4.18247 2.7338 4.26911 2.63679 4.3579 2.53738C5.35523 1.42077 6.62422 0 8.78049 0C10.9089 0 12.2699 1.38741 13.3632 2.50189C13.4613 2.6018 13.5571 2.69953 13.6512 2.79386C14.8672 4.01314 16.0118 5 18 5V7C15.1589 7 13.5123 5.48686 12.2351 4.20614C12.1748 4.14575 12.1157 4.08635 12.0576 4.02798C10.814 2.77827 10.0395 2 8.78049 2C7.54894 2 6.87361 2.74423 5.73842 3.99523C5.68569 4.05335 5.63196 4.11255 5.57715 4.17283Z" fill="%2329CFF5"/></svg>');
     background-repeat: repeat-x;
     height: var(--underline-squiggle-height);

diff --git a/packages/lib/components/tabs/tab-group.ts b/packages/lib/components/tabs/tab-group.ts
@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import { provide } from '@lit/context';
 import a11yStyles from '../../global-css/a11y.css?inline';
+import animationStyles from '../../global-css/animations.css?inline';
 import type { Tab } from './tab';
 import { activeIndexContext } from './tab-context';
 import tabStyles from './tab.css?inline';
@@ -13,6 +14,7 @@ export class TabGroup extends LitElement {
   static styles = [
     unsafeCSS(tabStyles),
     unsafeCSS(a11yStyles),
+    unsafeCSS(animationStyles),
     css`
       :host {
         display: flex;

diff --git a/packages/lib/components/tabs/tab.css b/packages/lib/components/tabs/tab.css
@@ -1,9 +1,3 @@
-@keyframes waveline {
-  to {
-    background-position: 16px;
-  }
-}
-
 .cx-tab {
   --line-height: 1.5rem;
   --underline-squiggle-height: 7px;
@@ -49,7 +43,7 @@
     height: var(--underline-squiggle-height);
     background-size: 1rem;
     background-position: 0;
-    animation: waveline 0.5s linear infinite;
+    animation: cx-waveline 0.5s linear infinite;
     transition: all ease 0.5s;
     background-image: url('data:image/svg+xml,<svg width="18" height="7" viewBox="0 0 18 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.57715 4.17283C4.4006 5.46648 2.86064 7 0 7V5C1.96863 5 3.00041 4.03352 4.09755 2.82717C4.18247 2.7338 4.26911 2.63679 4.3579 2.53738C5.35523 1.42077 6.62422 0 8.78049 0C10.9089 0 12.2699 1.38741 13.3632 2.50189C13.4613 2.6018 13.5571 2.69953 13.6512 2.79386C14.8672 4.01314 16.0118 5 18 5V7C15.1589 7 13.5123 5.48686 12.2351 4.20614C12.1748 4.14575 12.1157 4.08635 12.0576 4.02798C10.814 2.77827 10.0395 2 8.78049 2C7.54894 2 6.87361 2.74423 5.73842 3.99523C5.68569 4.05335 5.63196 4.11255 5.57715 4.17283Z" fill="%2329CFF5"/></svg>');
     background-repeat: repeat-x;

diff --git a/packages/lib/global-css/animations.css b/packages/lib/global-css/animations.css
@@ -80,3 +80,9 @@
     background-position: 76% 38%;
   }
 }
+
+@keyframes cx-waveline {
+  to {
+    background-position: 16px;
+  }
+}