Merge pull request #353 from EthanThatOneKid/play/style-directive-1

Implemented Svelte style directive where applicable
EthanThatOneKid · Mar 26, 2022 · b783503 · b783503 · vercel · Mar 26, 2022
2 parents 42d54a7 + e2820b6
commit b783503
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/lib/components/events/event-item.svelte b/src/lib/components/events/event-item.svelte
@@ -36,7 +36,7 @@
   });
 </script>
 
-<div class="event-box" style={`--highlights: var(--acm-${info.acmPath.slug}-rgb)`}>
+<div class="event-box" style:--highlights={`var(--acm-${info.acmPath.slug}-rgb)`}>
   <!-- Workaround for the top panel covering the event card's anchor. -->
   <div class="anchor" id={info.slug} bind:this={anchor} />
   <details class="event-card" bind:this={details}>

diff --git a/src/lib/components/index/acm-paths.svelte b/src/lib/components/index/acm-paths.svelte
@@ -17,8 +17,8 @@
     {#each pinnedPaths as { title, slug, picture, color } (slug)}
       <a class="path-item" target="_self" href={`/paths#${slug}`}>
         <img src={picture} alt={`${slug}-logo`} />
-        <p class="size-md brand-dark headers">
-          acm<span class="brand-em" style={`--brand-color: ${color}`}>
+        <p class="size-md headers">
+          acm<span class="brand-em" style:--brand-color={color}>
             {title}
           </span>
         </p>

diff --git a/src/lib/components/paths/path-section.svelte b/src/lib/components/paths/path-section.svelte
@@ -13,7 +13,7 @@
       <div>
         <h2>
           <span class="headers size-lg">
-            acm<span style={`--font-color: ${info.color}`}>
+            acm<span style:--font-color={info.color}>
               <span class="brand-em">{info.title}</span>
             </span>
           </span>

diff --git a/src/lib/components/utils/acm-toaster.svelte b/src/lib/components/utils/acm-toaster.svelte
@@ -12,7 +12,7 @@
       class:info={toastItem.type === ToastType.Info}
       in:fly={{ y: 20 }}
       out:fly={{ y: -20 }}
-      style={`--highlights: var(--acm-${toastItem.path}-rgb)`}
+      style:--highlights={`var(--acm-${toastItem.path}-rgb)`}
     >
       <img src="/assets/png/acm-shark.png" alt="acmCSUF Mascot: Frank the Shark" />
       <p>{@html toastItem.content}</p>