rework Divider to use new API
This commit is contained in:
parent
b55a653ab2
commit
b635aad8ae
|
@ -1,23 +1,19 @@
|
|||
<script>
|
||||
import "@spectrum-css/divider/dist/index-vars.css"
|
||||
export let l = false
|
||||
export let m = false
|
||||
export let s = false
|
||||
export let size = "M"
|
||||
|
||||
export let vertical = false
|
||||
export let noMargin = false
|
||||
export let noGrid = false
|
||||
|
||||
$: useDefault = ![l, m, s].includes(true)
|
||||
</script>
|
||||
|
||||
<hr
|
||||
class:noMargin
|
||||
class:noGrid
|
||||
class:spectrum-Divider--sizeL={l}
|
||||
class:spectrum-Divider--sizeM={m || useDefault}
|
||||
class:spectrum-Divider--sizeS={s}
|
||||
class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
|
||||
class="spectrum-Divider spectrum-Divider--{vertical
|
||||
? 'vertical'
|
||||
: 'horizontal'} spectrum-Dialog-divider spectrum-Divider--size{size}"
|
||||
/>
|
||||
|
||||
<style>
|
||||
hr.noMargin {
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
{title}
|
||||
</h1>
|
||||
|
||||
<Divider m />
|
||||
<Divider size="M" />
|
||||
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
||||
<section class="spectrum-Dialog-content content-grid">
|
||||
<slot />
|
||||
|
|
|
@ -149,7 +149,7 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<Divider s />
|
||||
<Divider size="S" />
|
||||
<div class="title">
|
||||
<Heading xs h3>Views</Heading>
|
||||
</div>
|
||||
|
@ -162,7 +162,7 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<Divider s />
|
||||
<Divider size="S" />
|
||||
<div class="title">
|
||||
<Heading xs h3>Relationships</Heading>
|
||||
</div>
|
||||
|
@ -175,7 +175,7 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<Divider s />
|
||||
<Divider size="S" />
|
||||
<div class="title">
|
||||
<Heading xs h3>Queries</Heading>
|
||||
</div>
|
||||
|
@ -190,7 +190,7 @@
|
|||
</ul>
|
||||
|
||||
{#if otherSources?.length}
|
||||
<Divider s />
|
||||
<Divider size="S" />
|
||||
<div class="title">
|
||||
<Heading extraSmall>Other</Heading>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue