diff options
Diffstat (limited to 'apps/kit/src/routes')
| -rw-r--r-- | apps/kit/src/routes/book/+layout.svelte | 27 | ||||
| -rw-r--r-- | apps/kit/src/routes/book/alerts/+page.svelte | 1 | ||||
| -rw-r--r-- | apps/kit/src/routes/book/buttons/+page.svelte | 13 |
3 files changed, 28 insertions, 13 deletions
diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte index 02d03b6..aeed0d4 100644 --- a/apps/kit/src/routes/book/+layout.svelte +++ b/apps/kit/src/routes/book/+layout.svelte @@ -4,7 +4,7 @@ </script> <div id="wrapper"> - <nav class="flex flex-col"> + <nav> <a href="/book/alerts" class="link" @@ -23,23 +23,42 @@ class:active={$page.url.pathname.startsWith("/book/toggles")} >Toggles</a > + <a + href="/book/inputs" + class="link" + class:active={$page.url.pathname.startsWith("/book/inputs")} + >Inputs</a + > </nav> <main> <slot /> </main> </div> -<style> +<style global lang="postcss"> #wrapper { display: flex; flex-direction: row; } nav { - min-width: 280px; + min-width: 120px; padding: 10px; + display: flex; + flex-direction: column; + position: sticky; + position: -webkit-sticky; + top: 0; + height: fit-content; } main { width: 100%; - padding: 5px; + padding: 10px; + } + section { + margin-bottom: 25px; + + h2 { + margin-bottom: 5px; + } } </style> diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte index 15084ca..d008d85 100644 --- a/apps/kit/src/routes/book/alerts/+page.svelte +++ b/apps/kit/src/routes/book/alerts/+page.svelte @@ -2,7 +2,6 @@ import Alert from "$lib/components/alert.svelte"; </script> -<h1>Alerts</h1> <section> <h2>Info</h2> <Alert type="info" message="This is message" title="This is title" /> diff --git a/apps/kit/src/routes/book/buttons/+page.svelte b/apps/kit/src/routes/book/buttons/+page.svelte index 0a54930..19ba163 100644 --- a/apps/kit/src/routes/book/buttons/+page.svelte +++ b/apps/kit/src/routes/book/buttons/+page.svelte @@ -2,15 +2,12 @@ import Button from "$lib/components/button.svelte"; </script> -<h1>Buttons</h1> <section> <h2>Primary</h2> - <div class=""> - <Button kind="primary" text="Medium/Default" /> - <Button kind="primary" text="Large" size="lg" /> - <Button kind="primary" text="Small" size="sm" /> - <Button kind="primary" text="Extra large" size="xl" /> - </div> + <Button kind="primary" text="Small" size="sm" /> + <Button kind="primary" text="Medium/Default" /> + <Button kind="primary" text="Large" size="lg" /> + <Button kind="primary" text="Extra large" size="xl" /> </section> <section> <h2>Secondary</h2> @@ -22,5 +19,5 @@ </section> <section> <h2>Loading</h2> - <Button kind="primary" loading={true} text="Wait" size="sm" /> + <Button kind="primary" loading={true} text="Wait" /> </section> |