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

docs: use all.css for prefixed styles (#1221)

Browse source 
* docs: remove .bx--content override

* docs(ui-shell): add note on UI Shell theming

* docs(grid): touch up grid examples

* docs(theme): wrap localStorage in try catch

So that the site still works in Safari with all cookies blocked.

* docs: use prefixed all.css

Without vendor prefixes, some styles are lost in Safari.

* docs: remove svelte-preprocess from svelte.config.js
This commit is contained in:
metonym 2022-04-02 11:45:29 -07:00 • committed by GitHub
commit d34f571150
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 601 additions and 1714 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/framed/Grid/AspectRatioColumns.svelte
View file

@ -4,17 +4,7 @@
<Grid>
<Row>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
<Column aspectRatio="2x1">2x1</Column>
<Column aspectRatio="2x1">2x1</Column>
</Row>
</Grid>

8
docs/src/pages/framed/Grid/CondensedGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid condensed>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>

8
docs/src/pages/framed/Grid/FullWidthGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid fullWidth>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>

8
docs/src/pages/framed/Grid/Grid.svelte
View file

@ -4,9 +4,9 @@
<Grid>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>

8
docs/src/pages/framed/Grid/NarrowGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid narrow>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>

28
docs/src/pages/framed/Grid/OffsetColumns.svelte
View file

@ -4,29 +4,9 @@
<Grid>
<Row>
<Column
sm="{{ span: 1, offset: 3 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 3
</Column>
<Column
sm="{{ span: 2, offset: 2 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 2
</Column>
<Column
sm="{{ span: 3, offset: 1 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 1
</Column>
<Column
sm="{{ span: 4, offset: 0 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 0
</Column>
<Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
<Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
<Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
<Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
</Row>
</Grid>

52
docs/src/pages/framed/Grid/PaddedGrid.svelte
View file

@ -2,28 +2,48 @@
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid narrow padding>
<div>Adding padding to Grid applies it to all child columns:</div>
<Grid padding>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>
<Grid narrow>
<div>Adding padding to a Row only applies its child columns:</div>
<Grid>
<Row padding>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
<Row>
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
Column
</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>
<div>Adding padding to a specific column only applies it to the column:</div>
<Grid>
<Row>
<Column padding>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>
<style>
div {
margin-top: var(--cds-spacing-05);
padding: var(--cds-spacing-05);
}
</style>

36
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
View file

@ -4,37 +4,9 @@
<Grid>
<Row>
<Column
sm="{1}"
md="{4}"
lg="{8}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 4, lg: 8
</Column>
<Column
sm="{1}"
md="{2}"
lg="{2}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 2, lg: 2
</Column>
<Column
sm="{1}"
md="{1}"
lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 1, lg: 1
</Column>
<Column
sm="{1}"
md="{1}"
lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 1, lg: 1
</Column>
<Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
<Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
<Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
<Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
</Row>
</Grid>

4
docs/src/pages/framed/_reset.svelte
View file

@ -21,4 +21,8 @@
width: 100%;
padding: var(--cds-spacing-06) var(--cds-spacing-05);
}
:global(.framed [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04);
}
</style>