fix(Divider): added top and bottom margin

docs: added typography docs: cleaned up some styling
N00nDay · Oct 21, 2022 · 971b0b2 · 971b0b2
1 parent 834a2b8
commit 971b0b2
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 101 deletions.
diff --git a/src/docs/components/navigation/Navigation.svelte b/src/docs/components/navigation/Navigation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Badge, Menu } from '../../../lib';
+	import { Badge, Menu, Divider } from '../../../lib';
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte/internal';
 
@@ -204,29 +204,30 @@
 		}
 	}
 
+	const menuTitleClass = 'text-xs font-bold text-primary py-2 px-3 h-10';
+
 	onMount(() => {
 		active = $page.url.pathname;
 	});
 </script>
 
-<h3
-	class="text-xs font-bold text-light-content dark:text-dark-content text-opacity-40 dark:text-opacity-40 mb-2"
->
-	GET STARTED
-</h3>
+<h3 class={menuTitleClass}>GET STARTED</h3>
 <Menu {active}>
 	<Menu.Item
 		key="/installation"
 		label="Installation"
 		href="/installation"
 		on:click={() => handleClick('/installation')}
 	/>
+	<Menu.Item
+		key="/typography"
+		label="Typography"
+		href="/typography"
+		on:click={() => handleClick('/typography')}
+	/>
 </Menu>
-<h3
-	class="text-xs font-bold text-light-content dark:text-dark-content text-opacity-40 dark:text-opacity-40 mb-2 mt-4"
->
-	COMPONENTS
-</h3>
+<Divider />
+<h3 class={menuTitleClass}>COMPONENTS</h3>
 <Menu {active}>
 	{#each sidebarItems as item}
 		{#if item.beta}
@@ -257,11 +258,8 @@
 		{/if}
 	{/each}
 </Menu>
-<h3
-	class="text-xs font-bold text-light-content dark:text-dark-content text-opacity-40 dark:text-opacity-40 mb-2 mt-4"
->
-	ACTIONS
-</h3>
+<Divider />
+<h3 class={menuTitleClass}>ACTIONS</h3>
 <Menu {active}>
 	<Menu.Item
 		key="/click-outside"
@@ -282,12 +280,8 @@
 		on:click={() => handleClick('/tooltip')}
 	/>
 </Menu>
-
-<h3
-	class="text-xs font-bold text-light-content dark:text-dark-content text-opacity-40 dark:text-opacity-40 mb-2 mt-4"
->
-	UTILITIES
-</h3>
+<Divider />
+<h3 class={menuTitleClass}>UTILITIES</h3>
 <Menu {active}>
 	<Menu.Item
 		key="/compute-progress"
@@ -332,12 +326,8 @@
 		on:click={() => handleClick('/format-number')}
 	/>
 </Menu>
-
-<h3
-	class="text-xs font-bold text-light-content dark:text-dark-content text-opacity-40 dark:text-opacity-40 mb-2 mt-4"
->
-	TYPES
-</h3>
+<Divider />
+<h3 class={menuTitleClass}>TYPES</h3>
 <Menu {active}>
 	<Menu.Item key="/types" label="Types" href="/types" on:click={() => handleClick('/types')} />
 </Menu>
diff --git a/src/docs/components/search/Search.svelte b/src/docs/components/search/Search.svelte
@@ -68,12 +68,12 @@
 		}
 	}
 
-	onMount(() => {
-		if (navigator.appVersion.indexOf('Win') != -1) os = 'Windows';
-		if (navigator.appVersion.indexOf('Mac') != -1) os = 'MacOS';
-		if (navigator.appVersion.indexOf('X11') != -1) os = 'UNIX';
-		if (navigator.appVersion.indexOf('Linux') != -1) os = 'Linux';
-	});
+	// onMount(() => {
+	// 	if (navigator.appVersion.indexOf('Win') != -1) os = 'Windows';
+	// 	if (navigator.appVersion.indexOf('Mac') != -1) os = 'MacOS';
+	// 	if (navigator.appVersion.indexOf('X11') != -1) os = 'UNIX';
+	// 	if (navigator.appVersion.indexOf('Linux') != -1) os = 'Linux';
+	// });
 
 	$: if (open && browser && input) {
 		input.focus();
@@ -82,7 +82,7 @@
 
 <svelte:window on:keydown={captureEscapeEvent} />
 
-<Button
+<!-- <Button
 	ariaLabel="open search"
 	on:click={handleOpen}
 	class="border-light-border dark:border-dark-border border ml-4 shadow-md dark:shadow-black hidden md:flex !py-1.5"
@@ -100,15 +100,15 @@
 			</div>
 		{/if}
 	</div>
-</Button>
+</Button> -->
 
 <Button
 	ariaLabel="open search"
 	on:click={handleOpen}
 	shape="circle"
-	class="flex md:hidden ml-4 bg-light-icon-background dark:bg-dark-icon-background text-light-icon dark:text-dark-icon"
+	class="flex ml-4 bg-light-icon-background dark:bg-dark-icon-background text-light-icon dark:text-dark-icon"
 >
-	<Button.Icon slot="icon" data={magnify} />
+	<Button.Icon slot="icon" data={magnify} stroke="currentColor" />
 </Button>
 
 {#if open}

diff --git a/src/lib/components/divider/Divider.svelte b/src/lib/components/divider/Divider.svelte
@@ -8,18 +8,18 @@
 
 	export let position: 'left' | 'center' | 'right' = 'center';
 
-	const defaultClass = 'w-full border-t light-border-base dark:dark-border-base';
+	const defaultClass = 'relative my-4';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class="relative">
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<div class="absolute inset-0 flex items-center" aria-hidden="true">
-		<div
-			class={finalClass}
-			use:useActions={use}
-			use:forwardEvents
-			{...exclude($$props, ['use', 'class'])}
-		/>
+		<div class="w-full border-t light-border-base dark:dark-border-base" />
 	</div>
 	{#if $$slots.label || $$slots.icon || $$slots.default}
 		<div

diff --git a/src/lib/plugin/index.js b/src/lib/plugin/index.js
@@ -626,9 +626,6 @@ module.exports = plugin(
 				top: '50%',
 				transform: 'translateY(-50%)',
 				cursor: 'pointer'
-				// 'transition-property': 'all',
-				// 'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
-				// 'transition-duration': '150ms'
 			},
 			".dark input[type='range']::-webkit-slider-thumb": {
 				'background-color': 'rgb(36, 37, 38)'

diff --git a/src/routes/button/+page.svelte b/src/routes/button/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Card, Col, Icon, Swap } from '../../lib';
+	import { Button, Card, Col, Swap } from '../../lib';
 	import {
 		exampleDefault,
 		exampleLoading,
@@ -154,15 +154,15 @@
 		<Card.Content slot="content" class="p-4">
 			<Button shape="circle" on:click={toggleLoading}>
 				<Swap slot="icon" {loading}>
-					<Button.Icon data={menu} slot="on" />
-					<Button.Icon data={close} slot="off" />
+					<Button.Icon data={menu} slot="on" stroke="currentColor" />
+					<Button.Icon data={close} slot="off" stroke="currentColor" />
 				</Swap>
 			</Button>
 
 			<Button type="primary">
 				<Swap {loading} slot="leading">
-					<Button.Icon data={menu} slot="on" />
-					<Button.Icon data={close} slot="off" />
+					<Button.Icon data={menu} slot="on" stroke="currentColor" />
+					<Button.Icon data={close} slot="off" stroke="currentColor" />
 				</Swap>
 				I am primary
 			</Button>

diff --git a/src/routes/grid/+page.svelte b/src/routes/grid/+page.svelte
@@ -72,8 +72,6 @@
 				<Divider.Label slot="label">Horizontal</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row gutter={['0', '4']}>
 				<Col class="col-6">
 					<div class={lightBlock}>col-6</div>
@@ -102,14 +100,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">Vertical</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row gutter={['4', '0']}>
 				<Col class="col-6">
 					<div class={lightBlock}>col-6</div>
@@ -138,14 +132,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">Horizontal & Vertical</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row gutter="4">
 				<Col class="col-6">
 					<div class={lightBlock}>col-6</div>
@@ -189,8 +179,6 @@
 				<Divider.Label slot="label">Start</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row justify="start" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock}>col-4</div>
@@ -206,14 +194,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">Center</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row justify="center" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock}>col-4</div>
@@ -229,14 +213,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">End</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row justify="end" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock}>col-4</div>
@@ -252,14 +232,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">Between</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row justify="between" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock}>col-4</div>
@@ -275,14 +251,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">Around</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row justify="around" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock}>col-4</div>
@@ -313,8 +285,6 @@
 				<Divider.Label slot="label">Start</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row align="start" justify="center" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock} style="height: 5rem;">col-4</div>
@@ -330,14 +300,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">Center</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row align="center" justify="between" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock} style="height: 4rem;">col-4</div>
@@ -353,14 +319,10 @@
 				</Col>
 			</Row>
 
-			<br />
-
 			<Divider position="left">
 				<Divider.Label slot="label">End</Divider.Label>
 			</Divider>
 
-			<br />
-
 			<Row align="end" justify="center" class="bg-light-background dark:bg-dark-background p-2">
 				<Col class="col-4">
 					<div class={lightBlock} style="height: 4rem;">col-4</div>

diff --git a/src/routes/installation/+page.svelte b/src/routes/installation/+page.svelte
@@ -30,10 +30,10 @@ module.exports = {
 </script>
 
 <Col class="col-24">
-	<h2 class="text-light-content dark:text-dark-content mb-0 mt-12">Create SvelteKit project</h2>
-	<Divider />
+	<h2 class="text-light-content dark:text-dark-content mb-0">Create SvelteKit project</h2>
+	<!-- <Divider /> -->
 
-	<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+	<p class="mb-5 mt-1 text-light-content dark:text-dark-content">
 		Create a svelte-kit project with the commands below. Visit <a
 			href="https://kit.svelte.dev/docs/introduction#getting-started"
 			class="link">kit.svelte</a
@@ -43,27 +43,27 @@ module.exports = {
 	<CodeBlock language="bash" code={svelteKitSetUp} />
 
 	<h2 class="text-light-content dark:text-dark-content mb-0 mt-12">Install STWUI</h2>
-	<Divider />
+	<!-- <Divider /> -->
 
-	<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+	<p class="mb-5 mt-1 text-light-content dark:text-dark-content">
 		Run the following command to add STWUI to your project:
 	</p>
 
 	<CodeBlock language="bash" code={installCode} />
 
 	<h2 class="text-light-content dark:text-dark-content mb-0 mt-12">Install TailwindCSS</h2>
-	<Divider />
+	<!-- <Divider /> -->
 
-	<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+	<p class="mb-5 mt-1 text-light-content dark:text-dark-content">
 		Run the following command to add STWUI to your project:
 	</p>
 
 	<CodeBlock language="bash" code={tailwindInstall} />
 
 	<h2 class="text-light-content dark:text-dark-content mb-0 mt-12">Configure TailwindCSS</h2>
-	<Divider />
+	<!-- <Divider /> -->
 
-	<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+	<p class="mb-5 mt-1 text-light-content dark:text-dark-content">
 		Modify your <InlineCode>tailwind.config.cjs</InlineCode> file with the following:
 	</p>