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

111
docs/src/pages/_layout.svelte
View file

@ -146,106 +146,7 @@
<slot />
</Theme>
<style global>
.bx--side-nav__overlay-active {
z-index: calc(10 + 1); /** supersede the z-index of code snippets */
}
.body-short-01 {
font-size: var(--cds-body-short-01-font-size);
font-weight: var(--cds-body-short-01-font-weight);
letter-spacing: var(--cds-body-short-01-letter-spacing);
line-height: var(--cds-body-short-01-line-height);
}
.bx--col > h1 {
font-size: var(--cds-display-01-font-size);
font-weight: var(--cds-display-01-font-weight);
letter-spacing: var(--cds-display-01-letter-spacing);
line-height: var(--cds-display-01-line-height);
margin-bottom: var(--cds-layout-01);
}
.big-paragraph {
font-size: var(--cds-expressive-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height);
margin-top: var(--cds-layout-03);
margin-bottom: var(--cds-layout-06);
}
.big-link,
.bx--col > .big-paragraph > code {
font-size: var(--cds-expressive-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height);
}
.bx--col > p {
max-width: 44rem;
}
.bx--col > p > code {
font-size: var(--cds-code-02-font-size);
font-weight: var(--cds-code-02-font-weight);
line-height: var(--cds-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing);
background-color: var(--cds-ui-03);
border-radius: 0.25rem;
padding: 0 var(--cds-spacing-02);
}
.bx--col > h2 {
font-size: var(--cds-expressive-heading-05-font-size);
font-weight: var(--cds-expressive-heading-05-font-weight);
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
line-height: var(--cds-expressive-heading-05-line-height);
padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-01);
}
.bx--col > h3 {
font-size: var(--cds-expressive-heading-04-font-size);
font-weight: var(--cds-expressive-heading-04-font-weight);
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
line-height: var(--cds-expressive-heading-04-line-height);
padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-01);
}
.bx--col > h4 {
font-size: var(--cds-expressive-heading-02-font-size);
font-weight: var(--cds-expressive-heading-02-font-weight);
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
line-height: var(--cds-expressive-heading-02-line-height);
padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-01);
}
.bx--col > p {
margin-bottom: var(--cds-layout-02);
}
main.bx--content {
background: none;
min-height: calc(100vh - 3rem - 3rem);
}
@media (max-width: 1056px) {
.bx--side-nav ~ .bx--content {
margin-left: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.bx--side-nav--expanded ~ .bx--content {
white-space: nowrap;
min-width: 28rem;
}
}
<style>
.platform-name {
display: flex;
align-items: baseline;
@ -265,14 +166,4 @@
display: none;
}
}
@media (min-width: 1057px) {
.bx--side-nav__navigation {
z-index: 1;
}
}
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
max-height: 144rem;
}
</style>

9
docs/src/pages/components/UIShell.svx
View file

@ -23,9 +23,18 @@ components: ["Header",
---
<script>
import { InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
Currently, the UI Shell is not themable and only supports dark mode.
</div>
</InlineNotification>
Open the following examples in a new tab to experience them in full.
### Header
<FileSource src="/framed/UIShell/Header" />

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>