mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: migrate layout spacing to v11

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/components/ComponentApi.svelte
View file

@ -39,7 +39,7 @@
); );
</script> </script>
<p style="margin-bottom: var(--bx-layout-02)"> <p style="margin-bottom: var(--bx-spacing-06)">
Source code: Source code:
<OutboundLink size="lg" inline href="{source}"> <OutboundLink size="lg" inline href="{source}">
{component.filePath} {component.filePath}
@ -231,13 +231,13 @@
} }
:global(.my-layout-01-03) { :global(.my-layout-01-03) {
margin-top: var(--bx-layout-01); margin-top: var(--bx-spacing-05);
margin-bottom: var(--bx-layout-03); margin-bottom: var(--bx-spacing-07);
} }
:global(.overflow .bx--structured-list) { :global(.overflow .bx--structured-list) {
margin-top: var(--bx-layout-01); margin-top: var(--bx-spacing-05);
margin-bottom: var(--bx-layout-04); margin-bottom: var(--bx-spacing-09);
} }
code { code {

2
docs/src/components/Preview.svelte
View file

@ -47,7 +47,7 @@
<style> <style>
.preview { .preview {
margin-bottom: var(--bx-layout-04); margin-bottom: var(--bx-spacing-09);
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
max-width: 66rem; max-width: 66rem;

20
docs/src/global.css
View file

@ -118,7 +118,7 @@ html[theme="g90"] .code-override {
} }
.prose .toc { .prose .toc {
margin-bottom: var(--bx-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.table { .table {
@ -169,7 +169,7 @@ html[theme="g90"] .code-override {
} }
.prose .toc { .prose .toc {
margin-bottom: var(--bx-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.code-01 { .code-01 {
@ -191,7 +191,7 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-05-font-weight); font-weight: var(--bx-expressive-heading-05-font-weight);
letter-spacing: var(--bx-expressive-heading-05-letter-spacing); letter-spacing: var(--bx-expressive-heading-05-letter-spacing);
line-height: var(--bx-expressive-heading-05-line-height); line-height: var(--bx-expressive-heading-05-line-height);
margin-bottom: var(--bx-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.big-paragraph { .big-paragraph {
@ -199,8 +199,8 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-03-font-weight); font-weight: var(--bx-expressive-heading-03-font-weight);
letter-spacing: var(--bx-expressive-heading-03-letter-spacing); letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
line-height: var(--bx-expressive-heading-03-line-height); line-height: var(--bx-expressive-heading-03-line-height);
margin-top: var(--bx-layout-03); margin-top: var(--bx-spacing-07);
margin-bottom: var(--bx-layout-06); margin-bottom: var(--bx-spacing-12);
} }
.big-link, .big-link,
@ -231,8 +231,8 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-04-font-weight); font-weight: var(--bx-expressive-heading-04-font-weight);
letter-spacing: var(--bx-expressive-heading-04-letter-spacing); letter-spacing: var(--bx-expressive-heading-04-letter-spacing);
line-height: var(--bx-expressive-heading-04-line-height); line-height: var(--bx-expressive-heading-04-line-height);
padding-top: var(--bx-layout-03); padding-top: var(--bx-spacing-07);
margin-bottom: var(--bx-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.bx--col > h4 { .bx--col > h4 {
@ -240,8 +240,8 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-02-font-weight); font-weight: var(--bx-expressive-heading-02-font-weight);
letter-spacing: var(--bx-expressive-heading-02-letter-spacing); letter-spacing: var(--bx-expressive-heading-02-letter-spacing);
line-height: var(--bx-expressive-heading-02-line-height); line-height: var(--bx-expressive-heading-02-line-height);
padding-top: var(--bx-layout-04); padding-top: var(--bx-spacing-09);
margin-bottom: var(--bx-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.bx--col > h2, .bx--col > h2,
@ -252,5 +252,5 @@ html[theme="g90"] .code-override {
} }
.bx--col > p { .bx--col > p {
margin-bottom: var(--bx-layout-02); margin-bottom: var(--bx-spacing-06);
} }

2
docs/src/layouts/ComponentLayout.svelte
View file

@ -177,7 +177,7 @@
.bar { .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--bx-layout-02); margin-bottom: var(--bx-spacing-06);
border-bottom: 1px solid var(--bx-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }

2
docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
View file

@ -6,7 +6,7 @@
<Checkbox labelText="Label text" bind:checked /> <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> <Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div> </div>

2
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
View file

@ -9,7 +9,7 @@
<Checkbox bind:group labelText="{value}" value="{value}" /> <Checkbox bind:group labelText="{value}" value="{value}" />
{/each} {/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> <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div> </div>

2
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
View file

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

2
docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
View file

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

2
docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
View file

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

2
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
View file

@ -6,7 +6,7 @@
<NumberInput allowEmpty bind:value /> <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 = null)}">Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button> <Button on:click="{() => (value = 0)}">Set to 0</Button>
</div> </div>

2
docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
View file

@ -6,7 +6,7 @@
<PaginationNav bind:page /> <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}"> <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
Set page to 1 Set page to 1
</Button> </Button>

2
docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
View file

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

2
docs/src/pages/framed/Select/SelectReactive.svelte
View file

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

2
docs/src/pages/framed/Tabs/TabsReactive.svelte
View file

@ -15,7 +15,7 @@
</svelte:fragment> </svelte:fragment>
</Tabs> </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> <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
</div> </div>

2
docs/src/pages/framed/UIShell/HeaderSearch.svelte
View file

@ -116,7 +116,7 @@
</p> </p>
<div style="overflow-x: scroll;"> <div style="overflow-x: scroll;">
{#each events as { type, ...rest }} {#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> <div><strong>on:{type}</strong></div>
{#if Object.keys(rest).length > 0} {#if Object.keys(rest).length > 0}
<pre>{JSON.stringify(rest, null, 2)}</pre> <pre>{JSON.stringify(rest, null, 2)}</pre>

12
docs/src/pages/index.svelte
View file

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