chore: stick to bx instead of cds class prefix

This commit is contained in:
Gregor Wassmann 2022-10-12 00:17:15 +02:00 committed by Enrico Sacchetti
commit f4ac33c93a
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
55 changed files with 190 additions and 192 deletions

View file

@ -39,7 +39,7 @@
);
</script>
<p style="margin-bottom: var(--cds-layout-02)">
<p style="margin-bottom: var(--bx-layout-02)">
Source code:
<OutboundLink size="lg" inline href="{source}">
{component.filePath}
@ -68,7 +68,7 @@
<InlineSnippet code="{prop.name}" />
{#if prop.reactive}
<div
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
style="white-space: nowrap; margin-top: var(--bx-spacing-03); margin-bottom: var(--bx-spacing-{prop.isRequired
? '01'
: '03'})"
>
@ -134,7 +134,7 @@
{#if component.typedefs.length > 0}
<CodeSnippet
style="margin-top: var(--cds-spacing-08)"
style="margin-top: var(--bx-spacing-08)"
class="my-layout-01-03"
type="multi"
code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
@ -216,14 +216,14 @@
<style>
.description {
margin-bottom: var(--cds-spacing-04);
margin-bottom: var(--bx-spacing-04);
}
.cell {
position: relative;
z-index: 9;
min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02);
margin-bottom: var(--bx-spacing-02);
}
.overflow {
@ -231,13 +231,13 @@
}
:global(.my-layout-01-03) {
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-03);
margin-top: var(--bx-layout-01);
margin-bottom: var(--bx-layout-03);
}
:global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-04);
margin-top: var(--bx-layout-01);
margin-bottom: var(--bx-layout-04);
}
code {

View file

@ -11,6 +11,6 @@
<style>
div {
margin-bottom: var(--cds-spacing-03);
margin-bottom: var(--bx-spacing-03);
}
</style>

View file

@ -16,9 +16,7 @@
<div class="preview">
{#if framed}
<div class="framed-header">
<div
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
<div style="margin-left: var(--bx-spacing-05); color: var(--bx-text-02)">
Content loaded in an iframe
</div>
<Button
@ -49,7 +47,7 @@
<style>
.preview {
margin-bottom: var(--cds-layout-04);
margin-bottom: var(--bx-layout-04);
margin-left: -1rem;
margin-right: -1rem;
max-width: 66rem;
@ -60,14 +58,14 @@
}
.preview-viewer {
border: 1px solid var(--cds-ui-03);
border: 1px solid var(--bx-ui-03);
border-bottom: 0;
position: relative;
z-index: 9999;
}
.preview-viewer:not(.framed) {
padding: var(--cds-spacing-06) var(--cds-spacing-05);
padding: var(--bx-spacing-06) var(--bx-spacing-05);
}
.preview-viewer.framed {

View file

@ -31,9 +31,9 @@
<svelte:component
this="{LogoGithub}"
size="{32}"
style="fill: var(--cds-icon-01)"
style="fill: var(--bx-icon-01)"
/>
<Launch size="{20}" style="fill: var(--cds-icon-01)" />
<Launch size="{20}" style="fill: var(--bx-icon-01)" />
</div>
</div>
</svelte:component>
@ -47,11 +47,11 @@
}
.borderRight {
border-right: 1px solid var(--cds-ui-03);
border-right: 1px solid var(--bx-ui-03);
}
.borderBottom {
border-bottom: 1px solid var(--cds-ui-03);
border-bottom: 1px solid var(--bx-ui-03);
}
.card {
@ -68,19 +68,19 @@
}
.title {
margin-top: calc(-1 * var(--cds-spacing-02));
margin-bottom: var(--cds-spacing-01);
margin-top: calc(-1 * var(--bx-spacing-02));
margin-bottom: var(--bx-spacing-01);
}
.subtitle {
color: var(--cds-text-02);
color: var(--bx-text-02);
}
@media (max-width: 671px) {
.card-wrapper,
.borderRight {
border-right: 0;
border-bottom: 1px solid var(--cds-ui-03);
border-bottom: 1px solid var(--bx-ui-03);
}
}
</style>