mirror of
https://github.com/acid-info/Kurate.git
synced 2025-01-26 23:58:51 +00:00
style: divider component (#255)
This commit is contained in:
parent
0394752b21
commit
311f7e5423
29
packages/ui/src/lib/components/divider.svelte
Normal file
29
packages/ui/src/lib/components/divider.svelte
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let visible: 'always' | 'desktop' | 'mobile' = 'always'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<hr class={visible} />
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--grey-200);
|
||||||
|
|
||||||
|
&.desktop {
|
||||||
|
@media (max-width: 687.98px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mobile {
|
||||||
|
@media (min-width: 688px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// @media (prefers-color-scheme: dark) {
|
||||||
|
// background-color: var(--grey-500);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,4 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import Divider from '$lib/components/divider.svelte'
|
||||||
let cls: string | undefined = undefined
|
let cls: string | undefined = undefined
|
||||||
export { cls as class }
|
export { cls as class }
|
||||||
</script>
|
</script>
|
||||||
@ -8,7 +9,7 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<Divider visible="mobile" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@ -20,12 +21,6 @@
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
hr {
|
|
||||||
@media (min-width: 688px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--grey-150);
|
background-color: var(--grey-150);
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let title: string
|
export let title: string
|
||||||
|
import Divider from '$lib/components/divider.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<hr />
|
<Divider visible="desktop" />
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="title">{title}</div>
|
<div class="title">{title}</div>
|
||||||
@ -14,16 +15,10 @@
|
|||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<Divider visible="mobile" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
hr:last-child {
|
|
||||||
@media (min-width: 688px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding: var(--spacing-24);
|
padding: var(--spacing-24);
|
||||||
transition: padding 0.2s;
|
transition: padding 0.2s;
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import HeaderTop from '$lib/components/header-top.svelte'
|
import HeaderTop from '$lib/components/header-top.svelte'
|
||||||
|
import Divider from '$lib/components/divider.svelte'
|
||||||
|
|
||||||
import { profile } from '$lib/stores/profile'
|
import { profile } from '$lib/stores/profile'
|
||||||
import { chats } from '$lib/stores/chat'
|
import { chats } from '$lib/stores/chat'
|
||||||
@ -13,7 +14,6 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<HeaderTop address={$profile.address} />
|
<HeaderTop address={$profile.address} />
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
{#if $profile.signer !== undefined}
|
{#if $profile.signer !== undefined}
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
@ -29,6 +29,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
<Divider visible="mobile" />
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
import Grid from '$lib/components/grid.svelte'
|
import Grid from '$lib/components/grid.svelte'
|
||||||
import Container from '$lib/components/container.svelte'
|
import Container from '$lib/components/container.svelte'
|
||||||
import InfoBox from '$lib/components/info-box.svelte'
|
import InfoBox from '$lib/components/info-box.svelte'
|
||||||
|
import Divider from '$lib/components/divider.svelte'
|
||||||
|
|
||||||
import { personas } from '$lib/stores/persona'
|
import { personas } from '$lib/stores/persona'
|
||||||
import { tokens } from '$lib/stores/tokens'
|
import { tokens } from '$lib/stores/tokens'
|
||||||
@ -106,7 +107,7 @@
|
|||||||
icon={EditPersona}
|
icon={EditPersona}
|
||||||
on:click={() => (state = 'text')}
|
on:click={() => (state = 'text')}
|
||||||
/>
|
/>
|
||||||
<hr />
|
<Divider />
|
||||||
<Container>
|
<Container>
|
||||||
<InfoBox>
|
<InfoBox>
|
||||||
{#if persona.posts.length < PERSONA_LIMIT}
|
{#if persona.posts.length < PERSONA_LIMIT}
|
||||||
|
@ -129,13 +129,6 @@ video {
|
|||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
|
||||||
border: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background-color: var(--grey-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--color-black);
|
color: var(--color-black);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@ -166,8 +159,4 @@ a {
|
|||||||
background-color: var(--color-body-bg);
|
background-color: var(--color-body-bg);
|
||||||
color: var(--color-body-text);
|
color: var(--color-body-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
|
||||||
background-color: var(--grey-500);
|
|
||||||
}
|
|
||||||
} */
|
} */
|
||||||
|
Loading…
x
Reference in New Issue
Block a user