64 lines
1.5 KiB
Svelte
64 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
export let brightColor = true
|
|
export let edges = true,
|
|
bigVersion = false,
|
|
icon: string
|
|
console.log("ICON WTFDOFJSIKDJ?", icon)
|
|
//
|
|
</script>
|
|
|
|
<div
|
|
id="crinkle"
|
|
class:bigVersion
|
|
>
|
|
<div
|
|
class="crinkle-background"
|
|
class:brightColor
|
|
>
|
|
{#if $$slots.icon}
|
|
<slot name="icon" />
|
|
{:else}
|
|
<img
|
|
src="../../../media/{icon
|
|
? icon
|
|
: edges
|
|
? brightColor
|
|
? 'topRightCrinkledBrightAndEdged'
|
|
: 'topRightCrinkledDarkAndEdged'
|
|
: brightColor
|
|
? 'topRightCrinkleBrightAndUnedged'
|
|
: 'topRightCrinkledDarkAndUnedged'}.svg"
|
|
alt="crinkle"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
<div class="action-container">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
#crinkle {
|
|
height: calc(3rem - 2px);
|
|
width: 3rem;
|
|
margin-left: -3px;
|
|
&.bigVersion {
|
|
height: 72px;
|
|
width: 72px;
|
|
}
|
|
.crinkle-background {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: visible;
|
|
img {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
&.brightColor {
|
|
}
|
|
}
|
|
}
|
|
</style>
|