remove tailwind classes from components

flo-bit · Oct 16, 2024 · 30b7e85 · 30b7e85
1 parent b74e5d0
commit 30b7e85
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 10 deletions.
diff --git a/src/lib/visualizations/core/BarVisualizer.svelte b/src/lib/visualizations/core/BarVisualizer.svelte
@@ -50,4 +50,4 @@
 	}
 </script>
 
-<canvas bind:this={canvas} bind:contentRect class="w-full h-full"></canvas>
+<canvas bind:this={canvas} bind:contentRect style="height: 100%; width: 100%;"></canvas>
diff --git a/src/lib/visualizations/core/CircleBarVisualizer.svelte b/src/lib/visualizations/core/CircleBarVisualizer.svelte
@@ -66,4 +66,4 @@
 	}
 </script>
 
-<canvas bind:this={canvas} bind:contentRect class="w-full h-full"></canvas>
+<canvas bind:this={canvas} bind:contentRect style="height: 100%; width: 100%;"></canvas>
diff --git a/src/lib/visualizations/core/CircleCirclesVisualizer.svelte b/src/lib/visualizations/core/CircleCirclesVisualizer.svelte
@@ -72,4 +72,4 @@
 	}
 </script>
 
-<canvas bind:this={canvas} bind:contentRect class="w-full h-full"></canvas>
+<canvas bind:this={canvas} bind:contentRect style="height: 100%; width: 100%;"></canvas>
diff --git a/src/lib/visualizations/core/DeformedCircleVisualizer.svelte b/src/lib/visualizations/core/DeformedCircleVisualizer.svelte
@@ -7,6 +7,8 @@
 	export let minRadius: number = 0.1;
 	export let maxRadius: number = 0.4;
 
+	export let blur: number = 24;
+
 	let canvas: HTMLCanvasElement;
 	let contentRect: DOMRectReadOnly;
 
@@ -63,5 +65,4 @@
 	}
 </script>
 
-<canvas bind:this={canvas} bind:contentRect style="filter: blur(24px);" class="w-full h-full"
-></canvas>
+<canvas bind:this={canvas} bind:contentRect style="filter: blur({blur}px); height: 100%; width: 100%;"></canvas>
diff --git a/src/lib/visualizations/core/Glow.svelte b/src/lib/visualizations/core/Glow.svelte
@@ -9,6 +9,6 @@
 		<feComposite in="SourceGraphic" operator="over" />
 	</filter>
 </svg>
-<div class="w-full h-full" style="filter: url(#blur);">
+<div style="filter: url(#blur); height: 100%; width: 100%;">
 	<slot />
 </div>
diff --git a/src/lib/visualizations/core/InnerGlowVisualizer.svelte b/src/lib/visualizations/core/InnerGlowVisualizer.svelte
@@ -11,6 +11,8 @@
 	export let sideVisible = 5;
 	export let deformation = 10;
 
+	export let blur: number = 12;
+
 	let canvas: HTMLCanvasElement;
 	let contentRect: DOMRectReadOnly;
 
@@ -129,5 +131,4 @@
 	}
 </script>
 
-<canvas bind:this={canvas} bind:contentRect style="filter: blur(12px)" class="w-full h-full"
-></canvas>
+<canvas bind:this={canvas} bind:contentRect style="filter: blur({blur}px); width: 100%; height: 100%;"></canvas>
diff --git a/src/lib/visualizations/core/MicrophoneVisualizer.svelte b/src/lib/visualizations/core/MicrophoneVisualizer.svelte
@@ -6,7 +6,7 @@
 	export let accentColor: string | undefined = color;
 </script>
 
-<svg viewBox="0 0 24 24" class="w-full h-full">
+<svg viewBox="0 0 24 24" style="height: 100%; width: 100%;">
 	<mask id="microphone-mask-vertical">
 		<rect x="0" y="0" width="24" height="24" fill="white" />
 		<rect x="0" y="0" width="24" height={(1 - value) * 24} fill="black" />

diff --git a/src/lib/visualizations/core/SpeakerVisualizer.svelte b/src/lib/visualizations/core/SpeakerVisualizer.svelte
@@ -6,7 +6,7 @@
 	export let accentColor: string | undefined = color;
 </script>
 
-<svg width="24" height="24" viewBox="0 0 24 24" class="w-full h-full">
+<svg width="24" height="24" viewBox="0 0 24 24" style="height: 100%; width: 100%;">
 	<mask id="speaker-mask-horizontal">
 		<rect x="0" y="0" width="24" height="24" fill="white" />
 		<rect x={12 + value * 12} y="0" width={12} height={24} fill="black" />