Update style vars + Add examples to docs + Add Avatar, NavRow, Pagination, & Link

2022-03-20 00:19:51 -07:00
parent de9c62617b
commit 15b7c241ff
34 changed files with 787 additions and 1727 deletions
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { classCombine } from '$lib/utils/classCombine'
+
+    export let src: string | null
+    export let size: 'xs' | 'sm' | 'md' | 'lg'
+    export let circle = false
+    export let floatUp = false
+
+    let className: string;
+    $: className = classCombine(['avatar', circle && 'avatar--circle', `avatar--size-${size}`, floatUp && 'avatar--float-up'])
+
+    let img
+
+    onMount(() => {
+        if (img && img.naturalWidth) {
+            const isPixelated = () => {
+                if (img.naturalWidth < 96 && img.naturalWidth > 0) {
+                    img.style = 'image-rendering: pixelated;'
+                }
+            }
+
+            if (img.naturalWidth) {
+                isPixelated()
+            } else {
+                img.onload = isPixelated
+            }
+        }
+    })
+</script>
+
+{#if src}
+    <img {src} bind:this={img} class={className} alt=""/>
+{:else}
+    <svg
+            class={className}
+            xml:space="preserve"
+            fill-rule="evenodd"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="1.5"
+            clip-rule="evenodd"
+            viewBox="0 0 104 104"
+    >
+		<path fill="none" d="M0 0h103.4v103.4H0z"/>
+        <path
+                fill="none"
+                stroke="#9a9a9a"
+                stroke-width="5"
+                d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
+        />
+	</svg>
+{/if}
+
+<style lang="postcss">
+    .avatar {
+        border-radius: var(--rounded);
+        box-shadow: var(--shadow-inset-lg), var(--shadow-raised-lg);
+        height: var(--size);
+        width: var(--size);
+        background-color: var(--color-button-bg);
+
+        &--size {
+            &-xs {
+                --size: 2.25rem;
+                box-shadow: var(--shadow-inset), var(--shadow-raised);
+                border-radius: var(--rounded-sm);
+            }
+
+            &-sm {
+                --size: 3rem;
+                box-shadow: var(--shadow-inset), var(--shadow-raised);
+                border-radius: var(--rounded-sm);
+            }
+
+            &-md {
+                --size: 6rem;
+            }
+
+            &-lg {
+                --size: 9rem;
+                background-color: var(--color-brand-contrast);
+            }
+        }
+
+        &--float-up {
+            margin-top: calc(var(--size) * (-2 / 3));
+        }
+
+        &--circle {
+            border-radius: 50%;
+        }
+    }
+</style>