add shadow props to frame.

metastellar-io · Jul 18, 2024 · edb32f3 · edb32f3
1 parent 376ec7f
commit edb32f3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/lib/frame/frame.svelte b/src/lib/frame/frame.svelte
@@ -168,7 +168,7 @@
 	
 	let divClass;
 	// $:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg', hoverTransform && "hover", $$props.class, imgHoverTransform && ("img-hover"))
-	$:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg',  $$props.class)
+	$:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg',  $$props.class, $$props.shadow && 'shadow')
 
 </script>
 

diff --git a/src/lib/frame/style.css b/src/lib/frame/style.css
@@ -1,5 +1,7 @@
 .ms-frame {
   cursor: pointer;
+}
+.ms-frame.shadow {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }
 .ms-frame.hover:hover {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -44,6 +44,8 @@
         dataURL="http://localhost/api"
         intervalData={intervalData}
         hoverTransform
+        shadow
+        rounded
         >
           <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card</h5> 
           <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
@@ -57,6 +59,8 @@
         hoverTransform
         imgHoverTransform
         reverse
+        shadow
+        rounded
         >
           <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card(reverse)</h5> 
           <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
@@ -69,6 +73,8 @@
         dataURL="http://localhost/api" 
         intervalData={intervalData}
         hoverTransform
+        shadow
+        rounded
         >
           <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card(no image)</h5> 
           <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
@@ -81,7 +87,9 @@
             intervalData={intervalData} 
             hoverTransform
             class="rounded-lg"
-            imgClass="rounded-lg">
+            imgClass="rounded-lg"
+            shadow
+            rounded>
           </ImagePoster>
           <h3 class="mt-4">
             Image poster card
@@ -92,6 +100,8 @@
       yutubeURL="/video/1.mp4"
       thumnailURL="/images/1.jpg"
       type="video/mp4"
+      shadow
+      rounded
     >
       <div class="">
         <a href="/video/1.mp4" class="mt-2">
@@ -112,6 +122,8 @@
           imgHoverTransform
           assetAccount={nftInfo}
           getNFTAssetInfo={getNFTAssetInfo}
+          shadow
+          rounded
         >
       </NftPoster>
 
@@ -130,6 +142,8 @@
           imgHoverTransform
           assetAccount={tokenInfo}
           getTokenAssetInfo={getTokenAssetInfo}
+          shadow
+          rounded
         >
       </TokenPoster>
       <h3 class="mt-4">