forked from matyunya/smelte
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
start app bar, tabs, add github logo, better nav drawer
- Loading branch information
Showing
17 changed files
with
170 additions
and
170 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<header class="fixed w-full top-0 left-0 z-30 flex-wrap flex p-0 h-16 items-center bg-primary-300 elevation-3"> | ||
<slot></slot> | ||
</header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<script> | ||
import Icon from '../Icon.svelte'; | ||
export let icon = ''; | ||
export let name = ''; | ||
export let value = ''; | ||
export let text = ''; | ||
export let navigation = true; | ||
export let to = ''; | ||
$: selected = name && name === value; | ||
</script> | ||
|
||
<style> | ||
.tab-item { | ||
@apply text-white cursor-pointer flex items-center opacity-75 text-sm; | ||
transition: background-color .2s ease-out; | ||
} | ||
.navigation { | ||
&:hover { | ||
@apply bg-local; | ||
} | ||
&.selected { | ||
@apply bg-primary-50 text-white opacity-100; | ||
transition: background-color .2s ease-in; | ||
} | ||
} | ||
</style> | ||
|
||
<li | ||
class="tab-item p-4 ripple-white" | ||
class:selected | ||
on:click={() => { | ||
value = name; | ||
}} | ||
> | ||
{#if icon} | ||
<Icon | ||
c="pr-6" | ||
color={selected && navigation ? 'text-primary-500' : ''} | ||
>{icon}</Icon> | ||
{/if} | ||
|
||
<div class="flex flex-col p-0"> | ||
<div> | ||
<slot>{text}</slot> | ||
</div> | ||
</div> | ||
</li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<div class="flex py-0 h-full"> | ||
<slot></slot> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import Tab from './Tab.svelte'; | ||
import Tabs from './Tabs.svelte'; | ||
|
||
export default { | ||
Wrapper: Tabs, | ||
Tab, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,32 @@ | ||
<script> | ||
import Nav from '../components/Nav.svelte'; | ||
export let segment; | ||
import AppBar from '../components/AppBar.svelte'; | ||
import Tabs from '../components/Tabs'; | ||
import Spacer from '../components/Spacer.svelte'; | ||
</script> | ||
|
||
<style> | ||
:global(body) { | ||
@apply bg-gray-200 text-black; | ||
@apply bg-gray-200; | ||
} | ||
main { | ||
@apply relative p-8 max-w-4xl mx-auto my-10; | ||
@apply relative p-8 max-w-4xl mx-auto mb-10 mt-24; | ||
box-sizing: border-box; | ||
} | ||
</style> | ||
|
||
<Nav {segment} /> | ||
<main class="bg-white rounded-lg p-5 mt-10 elevation-10"> | ||
<AppBar> | ||
<h6 class="text-white tracking-widest px-8 font-thin text-xl">MELTÉ</h6> | ||
<Spacer /> | ||
<Tabs.Wrapper> | ||
<Tabs.Tab to="/">Components</Tabs.Tab> | ||
<Tabs.Tab to="/typography">Typography</Tabs.Tab> | ||
</Tabs.Wrapper> | ||
<a href="https://github.com/matyunya/melte" class="px-4"> | ||
<img src="/github.png" alt="Github Melte" width="24" height="24"> | ||
</a> | ||
</AppBar> | ||
|
||
<main class="bg-white container rounded-lg p-5 elevation-10"> | ||
<slot></slot> | ||
</main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.