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

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

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

20
docs/src/global.css
View file

@ -118,7 +118,7 @@ html[theme="g90"] .code-override {
}
.prose .toc {
margin-bottom: var(--bx-layout-01);
margin-bottom: var(--bx-spacing-05);
}
.table {
@ -169,7 +169,7 @@ html[theme="g90"] .code-override {
}
.prose .toc {
margin-bottom: var(--bx-layout-01);
margin-bottom: var(--bx-spacing-05);
}
.code-01 {
@ -191,7 +191,7 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-05-font-weight);
letter-spacing: var(--bx-expressive-heading-05-letter-spacing);
line-height: var(--bx-expressive-heading-05-line-height);
margin-bottom: var(--bx-layout-01);
margin-bottom: var(--bx-spacing-05);
}
.big-paragraph {
@ -199,8 +199,8 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-03-font-weight);
letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
line-height: var(--bx-expressive-heading-03-line-height);
margin-top: var(--bx-layout-03);
margin-bottom: var(--bx-layout-06);
margin-top: var(--bx-spacing-07);
margin-bottom: var(--bx-spacing-12);
}
.big-link,
@ -231,8 +231,8 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-04-font-weight);
letter-spacing: var(--bx-expressive-heading-04-letter-spacing);
line-height: var(--bx-expressive-heading-04-line-height);
padding-top: var(--bx-layout-03);
margin-bottom: var(--bx-layout-01);
padding-top: var(--bx-spacing-07);
margin-bottom: var(--bx-spacing-05);
}
.bx--col > h4 {
@ -240,8 +240,8 @@ html[theme="g90"] .code-override {
font-weight: var(--bx-expressive-heading-02-font-weight);
letter-spacing: var(--bx-expressive-heading-02-letter-spacing);
line-height: var(--bx-expressive-heading-02-line-height);
padding-top: var(--bx-layout-04);
margin-bottom: var(--bx-layout-01);
padding-top: var(--bx-spacing-09);
margin-bottom: var(--bx-spacing-05);
}
.bx--col > h2,
@ -252,5 +252,5 @@ html[theme="g90"] .code-override {
}
.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 {
display: flex;
justify-content: space-between;
margin-bottom: var(--bx-layout-02);
margin-bottom: var(--bx-spacing-06);
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 />
<div style="margin: var(--bx-layout-01) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div>

2
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
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>

2
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
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>

2
docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
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>

2
docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
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>

2
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
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>

2
docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
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>

2
docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
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="{() => {

2
docs/src/pages/framed/Select/SelectReactive.svelte
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>

2
docs/src/pages/framed/Tabs/TabsReactive.svelte
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>

2
docs/src/pages/framed/UIShell/HeaderSearch.svelte
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>

12
docs/src/pages/index.svelte
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>