chore: migrate layout spacing to v11

See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:

    $layout-01 	Removed, use $spacing-05 instead
    $layout-02 	Removed, use $spacing-06 instead
    $layout-03 	Removed, use $spacing-07 instead
    $layout-04 	Removed, use $spacing-09 instead
    $layout-05 	Removed, use $spacing-10 instead
    $layout-06 	Removed, use $spacing-12 instead
    $layout-07 	Removed, use $spacing-13 instead
This commit is contained in:
Gregor Wassmann 2022-11-03 16:24:03 +01:00 committed by Enrico Sacchetti
commit f70c7d5139
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
16 changed files with 34 additions and 34 deletions

View file

@ -6,7 +6,7 @@
<Checkbox labelText="Label text" bind:checked />
<div style="margin: var(--bx-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div>

View file

@ -9,7 +9,7 @@
<Checkbox bind:group labelText="{value}" value="{value}" />
{/each}
<div style="margin: var(--bx-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div>

View file

@ -37,6 +37,6 @@
<style>
div {
margin: var(--bx-layout-01) 0 var(--bx-layout-03);
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
}
</style>

View file

@ -37,6 +37,6 @@
<style>
div {
margin: var(--bx-layout-01) 0 var(--bx-layout-03);
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
}
</style>

View file

@ -39,6 +39,6 @@
<style>
div {
margin: var(--bx-layout-01) 0 var(--bx-layout-03);
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
}
</style>

View file

@ -6,7 +6,7 @@
<NumberInput allowEmpty bind:value />
<div style="margin: var(--bx-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (value = null)}">Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button>
</div>

View file

@ -6,7 +6,7 @@
<PaginationNav bind:page />
<div style="margin: var(--cds-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (page = 1)}" disabled="{page === 0}">
Set page to 1
</Button>

View file

@ -32,7 +32,7 @@
/>
</ProgressIndicator>
<div style="margin: var(--bx-layout-02) 0">
<div style="margin: var(--bx-spacing-06) 0">
<Button
kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
on:click="{() => {

View file

@ -12,7 +12,7 @@
<SelectItem value="g100" text="Gray 100" />
</Select>
<div style="margin: var(--bx-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
Selected: <strong>{selected}</strong>
</div>

View file

@ -15,7 +15,7 @@
</svelte:fragment>
</Tabs>
<div style="margin: var(--bx-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (selected = 1)}">Set index to 1</Button>
</div>

View file

@ -116,7 +116,7 @@
</p>
<div style="overflow-x: scroll;">
{#each events as { type, ...rest }}
<div style="display: block; margin-bottom: var(--bx-layout-01)">
<div style="display: block; margin-bottom: var(--bx-spacing-05)">
<div><strong>on:{type}</strong></div>
{#if Object.keys(rest).length > 0}
<pre>{JSON.stringify(rest, null, 2)}</pre>

View file

@ -92,12 +92,12 @@
</p>
</Column>
</Row>
<Row style="margin-bottom: var(--bx-layout-02)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
<h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
</Column>
</Row>
<Row style="margin-bottom: var(--bx-layout-02)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column noGutter>
<Tabs>
<Tab label="Yarn" />
@ -117,7 +117,7 @@
</Tabs>
</Column>
</Row>
<Row style="margin-bottom: var(--bx-layout-04)">
<Row style="margin-bottom: var(--bx-spacing-09)">
<Column>
<h2>Styling</h2>
<p>
@ -216,7 +216,7 @@
</Column>
</Row>
<Row style="margin-bottom: var(--bx-layout-02)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column>
<h2>Dynamic theming</h2>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@ -248,7 +248,7 @@
</Column>
</Row>
<Row style="margin-bottom: var(--bx-layout-02)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column>
<h2>Portfolio</h2>
<p>