Make heading respect white space and reduce default margin

This commit is contained in:
Andrew Kingston 2021-02-23 10:02:21 +00:00
parent 175d34841b
commit 6185126ddb
1 changed files with 18 additions and 7 deletions

View File

@ -4,21 +4,32 @@
const { styleable } = getContext("sdk") const { styleable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
export let className = ""
export let type export let type
export let text = "" export let text = ""
</script> </script>
{#if type === 'h1'} {#if type === 'h1'}
<h1 class={className} use:styleable={$component.styles}>{text}</h1> <h1 use:styleable={$component.styles}>{text}</h1>
{:else if type === 'h2'} {:else if type === 'h2'}
<h2 class={className} use:styleable={$component.styles}>{text}</h2> <h2 use:styleable={$component.styles}>{text}</h2>
{:else if type === 'h3'} {:else if type === 'h3'}
<h3 class={className} use:styleable={$component.styles}>{text}</h3> <h3 use:styleable={$component.styles}>{text}</h3>
{:else if type === 'h4'} {:else if type === 'h4'}
<h4 class={className} use:styleable={$component.styles}>{text}</h4> <h4 use:styleable={$component.styles}>{text}</h4>
{:else if type === 'h5'} {:else if type === 'h5'}
<h5 class={className} use:styleable={$component.styles}>{text}</h5> <h5 use:styleable={$component.styles}>{text}</h5>
{:else if type === 'h6'} {:else if type === 'h6'}
<h6 class={className} use:styleable={$component.styles}>{text}</h6> <h6 use:styleable={$component.styles}>{text}</h6>
{/if} {/if}
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0.5em 0;
white-space: pre-wrap;
}
</style>