fix: spinner should resize correctly

tablecheck · Sep 21, 2023 · 17362c0 · 17362c0
1 parent 59b6fb3
commit 17362c0
Showing 1 changed file with 2 additions and 0 deletions.
diff --git a/system/core/src/components/Spinner.ts b/system/core/src/components/Spinner.ts
@@ -32,6 +32,8 @@ export const beforeStyles = css`
   ${positioningStyles}
   -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53682 17.3559C7.08196 17.0665 5.74559 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.0709 7.12987C3.63856 5.75943 4.59985 4.58809 5.83322 3.76398C7.06659 2.93987 8.51664 2.5 10 2.5V4.375C8.88748 4.375 7.79994 4.7049 6.87492 5.32298C5.94989 5.94107 5.22892 6.81957 4.80318 7.84741C4.37743 8.87524 4.26604 10.0062 4.48308 11.0974C4.70012 12.1885 5.23585 13.1908 6.02252 13.9775C6.80919 14.7641 7.81147 15.2999 8.90262 15.5169C9.99376 15.734 11.1248 15.6226 12.1526 15.1968C13.1804 14.7711 14.0589 14.0501 14.677 13.1251C15.2951 12.2001 15.625 11.1125 15.625 10H17.5Z" fill="currentColor"/></svg>');
   mask-image: url('data:image/svg+xml; utf8, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53682 17.3559C7.08196 17.0665 5.74559 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.0709 7.12987C3.63856 5.75943 4.59985 4.58809 5.83322 3.76398C7.06659 2.93987 8.51664 2.5 10 2.5V4.375C8.88748 4.375 7.79994 4.7049 6.87492 5.32298C5.94989 5.94107 5.22892 6.81957 4.80318 7.84741C4.37743 8.87524 4.26604 10.0062 4.48308 11.0974C4.70012 12.1885 5.23585 13.1908 6.02252 13.9775C6.80919 14.7641 7.81147 15.2999 8.90262 15.5169C9.99376 15.734 11.1248 15.6226 12.1526 15.1968C13.1804 14.7711 14.0589 14.0501 14.677 13.1251C15.2951 12.2001 15.625 11.1125 15.625 10H17.5Z" fill="currentColor"/></svg>');
+  -webkit-mask-size: cover;
+  mask-size: cover;
   animation: ${rotateAnimation} 800ms infinite linear;
   background-color: currentColor;
 `;