mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
chore: use bx css prefixes for now
This commit is contained in:
Enrico Sacchetti
parent
3ae53de629
commit
aeb05203c5
235 changed files with 1537 additions and 1563 deletions
|
|
@ -304,9 +304,9 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :------------------------------------------------------------------------- | :------- |
|
||||
| -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "cds--link"; }} </code> | -- |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :------------------------------------------------------------------------ | :------- |
|
||||
| -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | -- |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -2621,10 +2621,10 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| -- | Yes | -- | -- |
|
||||
| menu | No | -- | <code><svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="cds--overflow-menu\_\_icon {iconClass}"<br /> /></code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| -- | Yes | -- | -- |
|
||||
| menu | No | -- | <code><svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /></code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -2655,9 +2655,9 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------- |
|
||||
| -- | Yes | -- | <code><div class:cds--overflow-menu-options\_\_option-content="{true}"><br /> {text}<br /> </div></code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
|
||||
| -- | Yes | -- | <code><div class:bx--overflow-menu-options\_\_option-content="{true}"><br /> {text}<br /> </div></code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -2933,9 +2933,9 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------- |
|
||||
| -- | Yes | <code>{ props: { class: 'cds--progress-label' } } </code> | <code><p class:cds--progress-label="{true}">{label}</p></code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
|
||||
| -- | Yes | <code>{ props: { class: 'bx--progress-label' } } </code> | <code><p class:bx--progress-label="{true}">{label}</p></code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -4022,10 +4022,10 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :------------------------------------------------------ | :---------------------------------------------------- |
|
||||
| -- | Yes | <code>{ props: { class: 'cds--tag\_\_label' } } </code> | -- |
|
||||
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
|
||||
| -- | Yes | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | -- |
|
||||
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
|
|||
10
css/all.css
10
css/all.css
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
|||
// Use all Carbon themes
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
|
|
@ -26,9 +27,9 @@
|
|||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
.cds--text-truncate-end {
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.cds--text-truncate-front {
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
10
css/g10.css
10
css/g10.css
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
|||
// Use g10 theme
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
|
|
@ -14,9 +15,9 @@
|
|||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
.cds--text-truncate-end {
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.cds--text-truncate-front {
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
10
css/g100.css
10
css/g100.css
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
|||
// Use g10 theme
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
|
|
@ -14,9 +15,9 @@
|
|||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
.cds--text-truncate-end {
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.cds--text-truncate-front {
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
10
css/g90.css
10
css/g90.css
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
|||
// Use g10 theme
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
|
|
@ -14,9 +15,9 @@
|
|||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
.cds--text-truncate-end {
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.cds--text-truncate-front {
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -337,7 +337,7 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"cds--link\"; }}"
|
||||
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
|
@ -8127,7 +8127,7 @@
|
|||
{
|
||||
"name": "menu",
|
||||
"default": false,
|
||||
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"cds--overflow-menu__icon {iconClass}\"\n />",
|
||||
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"bx--overflow-menu__icon {iconClass}\"\n />",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
|
|
@ -8264,7 +8264,7 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"fallback": "<div class:cds--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>",
|
||||
"fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
|
|
@ -9365,8 +9365,8 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"fallback": "<p class:cds--progress-label=\"{true}\">{label}</p>",
|
||||
"slot_props": "{ props: { class: 'cds--progress-label' } }"
|
||||
"fallback": "<p class:bx--progress-label=\"{true}\">{label}</p>",
|
||||
"slot_props": "{ props: { class: 'bx--progress-label' } }"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
|
@ -12396,7 +12396,7 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"slot_props": "{ props: { class: 'cds--tag__label' } }"
|
||||
"slot_props": "{ props: { class: 'bx--tag__label' } }"
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
);
|
||||
</script>
|
||||
|
||||
<p style="margin-bottom: var(--cds-spacing-06)">
|
||||
<p style="margin-bottom: var(--bx-spacing-06)">
|
||||
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,20 +231,20 @@
|
|||
}
|
||||
|
||||
:global(.my-layout-01-03) {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-07);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-07);
|
||||
}
|
||||
|
||||
:global(.overflow .cds--structured-list) {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-09);
|
||||
:global(.overflow .bx--structured-list) {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-09);
|
||||
}
|
||||
|
||||
code {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
:global(.cell .cds--snippet--inline code, .cds--snippet--single pre) {
|
||||
:global(.cell .bx--snippet--inline code, .bx--snippet--single pre) {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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-spacing-09);
|
||||
margin-bottom: var(--bx-spacing-09);
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -35,9 +35,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>
|
||||
|
|
@ -51,11 +51,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 {
|
||||
|
|
@ -72,19 +72,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>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
html[theme="g90"] .code-override {
|
||||
border: 1px solid var(--cds-border-subtle-01);
|
||||
border: 1px solid var(--bx-border-subtle-01);
|
||||
}
|
||||
|
||||
.code-override .cds--snippet {
|
||||
.code-override .bx--snippet {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.code-override .cds--copy-btn,
|
||||
.code-override .cds--snippet,
|
||||
.code-override button.cds--btn.cds--snippet-btn--expand {
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .cds--copy-btn:hover,
|
||||
.code-override button.cds--btn.cds--snippet-btn--expand:hover {
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .cds--snippet__icon {
|
||||
.code-override .bx--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .cds--snippet-container pre {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
.code-override .bx--snippet-container pre {
|
||||
font-size: var(--bx-code-02-font-size);
|
||||
line-height: var(--bx-code-02-line-height);
|
||||
letter-spacing: var(--bx-code-02-letter-spacing);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.code-override .cds--snippet--multi .cds--snippet-container pre {
|
||||
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
|
|
@ -84,9 +84,9 @@ html[theme="g90"] .code-override {
|
|||
color: #bebebe;
|
||||
}
|
||||
|
||||
.override-tabs a.cds--tabs__nav-link,
|
||||
.override-tabs a.cds--tabs__nav-link:focus,
|
||||
.override-tabs a.cds--tabs__nav-link:active {
|
||||
.override-tabs a.bx--tabs__nav-link,
|
||||
.override-tabs a.bx--tabs__nav-link:focus,
|
||||
.override-tabs a.bx--tabs__nav-link:active {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
|
|
@ -112,13 +112,13 @@ html[theme="g90"] .code-override {
|
|||
}
|
||||
}
|
||||
|
||||
.prose > p > .cds--link {
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.table {
|
||||
|
|
@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
|
|||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
margin-top: -3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
padding-top: var(--bx-spacing-05);
|
||||
padding-bottom: var(--bx-spacing-05);
|
||||
padding-left: var(--bx-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ html[theme="g90"] .code-override {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .cds--grid {
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -147,9 +147,9 @@ html[theme="g90"] .code-override {
|
|||
}
|
||||
}
|
||||
|
||||
.preview-viewer > .cds--aspect-ratio,
|
||||
.preview-viewer > .bx--aspect-ratio,
|
||||
.preview-viewer [data-outline] {
|
||||
outline: 1px solid var(--cds-interactive);
|
||||
outline: 1px solid var(--bx-interactive);
|
||||
}
|
||||
|
||||
[data-outline] {
|
||||
|
|
@ -157,100 +157,100 @@ html[theme="g90"] .code-override {
|
|||
}
|
||||
|
||||
[data-outline] ~ [data-outline] {
|
||||
margin-top: var(--cds-spacing-08);
|
||||
margin-top: var(--bx-spacing-08);
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .cds--link {
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.code-01 {
|
||||
font-size: var(--cds-code-01-font-size);
|
||||
font-weight: var(--cds-code-01-font-weight);
|
||||
letter-spacing: var(--cds-code-01-letter-spacing);
|
||||
line-height: var(--cds-code-01-line-height);
|
||||
font-size: var(--bx-code-01-font-size);
|
||||
font-weight: var(--bx-code-01-font-weight);
|
||||
letter-spacing: var(--bx-code-01-letter-spacing);
|
||||
line-height: var(--bx-code-01-line-height);
|
||||
}
|
||||
|
||||
.body-compact-01 {
|
||||
font-size: var(--cds-body-compact-01-font-size);
|
||||
font-weight: var(--cds-body-compact-01-font-weight);
|
||||
letter-spacing: var(--cds-body-compact-01-letter-spacing);
|
||||
line-height: var(--cds-body-compact-01-line-height);
|
||||
font-size: var(--bx-body-compact-01-font-size);
|
||||
font-weight: var(--bx-body-compact-01-font-weight);
|
||||
letter-spacing: var(--bx-body-compact-01-letter-spacing);
|
||||
line-height: var(--bx-body-compact-01-line-height);
|
||||
}
|
||||
|
||||
.cds--col > h1 {
|
||||
font-size: var(--cds-fluid-heading-05-font-size);
|
||||
font-weight: var(--cds-fluid-heading-05-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-05-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-05-line-height);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
.bx--col > h1 {
|
||||
font-size: var(--bx-fluid-heading-05-font-size);
|
||||
font-weight: var(--bx-fluid-heading-05-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-05-line-height);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: var(--cds-fluid-heading-03-font-size);
|
||||
font-weight: var(--cds-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-03-line-height);
|
||||
margin-top: var(--cds-spacing-07);
|
||||
margin-bottom: var(--cds-spacing-12);
|
||||
font-size: var(--bx-fluid-heading-03-font-size);
|
||||
font-weight: var(--bx-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-03-line-height);
|
||||
margin-top: var(--bx-spacing-07);
|
||||
margin-bottom: var(--bx-spacing-12);
|
||||
}
|
||||
|
||||
.big-link,
|
||||
.cds--col > .big-paragraph > code {
|
||||
font-size: var(--cds-fluid-heading-03-font-size);
|
||||
font-weight: var(--cds-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-03-line-height);
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--bx-fluid-heading-03-font-size);
|
||||
font-weight: var(--bx-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-03-line-height);
|
||||
}
|
||||
|
||||
.cds--col > p {
|
||||
.bx--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.cds--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-layer-accent-01);
|
||||
.bx--col > p > code {
|
||||
font-size: var(--bx-code-02-font-size);
|
||||
font-weight: var(--bx-code-02-font-weight);
|
||||
line-height: var(--bx-code-02-line-height);
|
||||
letter-spacing: var(--bx-code-02-letter-spacing);
|
||||
background-color: var(--bx-layer-accent-01);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
padding: 0 var(--bx-spacing-02);
|
||||
}
|
||||
|
||||
[class*="cds--col"] > h2,
|
||||
.cds--tab-content > h2 {
|
||||
font-size: var(--cds-fluid-heading-04-font-size);
|
||||
font-weight: var(--cds-fluid-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-04-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-04-line-height);
|
||||
padding-top: var(--cds-spacing-07);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
[class*="bx--col"] > h2,
|
||||
.bx--tab-content > h2 {
|
||||
font-size: var(--bx-fluid-heading-04-font-size);
|
||||
font-weight: var(--bx-fluid-heading-04-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-04-line-height);
|
||||
padding-top: var(--bx-spacing-07);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.cds--col > h4 {
|
||||
font-size: var(--cds-fluid-heading-02-font-size);
|
||||
font-weight: var(--cds-fluid-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-02-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-02-line-height);
|
||||
padding-top: var(--cds-spacing-09);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
.bx--col > h4 {
|
||||
font-size: var(--bx-fluid-heading-02-font-size);
|
||||
font-weight: var(--bx-fluid-heading-02-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-02-line-height);
|
||||
padding-top: var(--bx-spacing-09);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.cds--col > h2,
|
||||
.cds--tab-content > h2,
|
||||
.cds--col > h3,
|
||||
.cds--col > h4 {
|
||||
.bx--col > h2,
|
||||
.bx--tab-content > h2,
|
||||
.bx--col > h3,
|
||||
.bx--col > h4 {
|
||||
scroll-margin-top: 3rem;
|
||||
}
|
||||
|
||||
.cds--col > p {
|
||||
margin-bottom: var(--cds-spacing-06);
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--bx-spacing-06);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
{#each api_components as component (component.moduleName)}
|
||||
<Tab label="{component.moduleName}" />
|
||||
{/each}
|
||||
<div slot="content" style="padding-top: var(--cds-spacing-06)">
|
||||
<div slot="content" style="padding-top: var(--bx-spacing-06)">
|
||||
{#each api_components as component (component.moduleName)}
|
||||
<TabContent>
|
||||
<ComponentApi component="{component}" />
|
||||
|
|
@ -176,13 +176,13 @@
|
|||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--cds-spacing-06);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
margin-bottom: var(--bx-spacing-06);
|
||||
border-bottom: 1px solid var(--bx-ui-03);
|
||||
}
|
||||
|
||||
:global(.toc h5) {
|
||||
margin-top: var(--cds-spacing-06);
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
margin-top: var(--bx-spacing-06);
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
@media (max-width: 1056px) {
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
margin-bottom: var(--cds-spacing-09);
|
||||
margin-bottom: var(--bx-spacing-09);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
|
||||
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
||||
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
||||
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
|
||||
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
|
||||
|
|
|
|||
|
|
@ -333,7 +333,7 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th
|
|||
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
|
||||
|
||||
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
|
||||
<div class="body-short-01">Custom column widths do not work with a <a class="cds--link" href="#sticky-header">sticky header</a>.</div>
|
||||
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
|
||||
</InlineNotification>
|
||||
|
||||
<FileSource src="/framed/DataTable/DataTableHeaderWidth" />
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ See the [item examples below](#item-uploading) for different statuses.
|
|||
|
||||
There are two ways to clear files in `FileUploader`:
|
||||
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
||||
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
|
||||
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
|
||||
</UnorderedList>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ By default, the position of the popover component is absolute.
|
|||
<div data-outline>
|
||||
<Popover open>
|
||||
Parent
|
||||
<PopoverContent style="padding: var(--cds-spacing-05)">Content</PopoverContent>
|
||||
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover relative open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,67 +49,67 @@ The default `align` value is `"top"`.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-left">
|
||||
<div style="padding: var(--cds-spacing-05)">top-left</div>
|
||||
<div style="padding: var(--bx-spacing-05)">top-left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-right">
|
||||
<div style="padding: var(--cds-spacing-05)">top-right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">top-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom">
|
||||
<div style="padding: var(--cds-spacing-05)">bottom</div>
|
||||
<div style="padding: var(--bx-spacing-05)">bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-left">
|
||||
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-right">
|
||||
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left">
|
||||
<div style="padding: var(--cds-spacing-05)">left</div>
|
||||
<div style="padding: var(--bx-spacing-05)">left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-bottom">
|
||||
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
|
||||
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-right">
|
||||
<div style="padding: var(--cds-spacing-05)">left-right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">left-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right">
|
||||
<div style="padding: var(--cds-spacing-05)">right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right-bottom">
|
||||
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
|
||||
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right-top">
|
||||
<div style="padding: var(--cds-spacing-05)">right-top</div>
|
||||
<div style="padding: var(--bx-spacing-05)">right-top</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ The default `align` value is `"top"`.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret align="top-left" open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover light open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover highContrast open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
/>
|
||||
<StructuredListCell>
|
||||
<CheckmarkFilled
|
||||
class="cds--structured-list-svg"
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ By default, each item renders the value of `node.text`. Use the data from `let:n
|
|||
|
||||
The destructured `let:node` contains the following properties:
|
||||
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
||||
<ListItem><strong>id</strong>: the node id</ListItem>
|
||||
<ListItem><strong>text</strong>: the node text</ListItem>
|
||||
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This utility component wraps the `.cds--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
|
||||
This utility component wraps the `.bx--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
|
||||
|
||||
## Default
|
||||
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
<style>
|
||||
p,
|
||||
h1 {
|
||||
margin-bottom: var(--cds-spacing-08);
|
||||
margin-bottom: var(--bx-spacing-08);
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<Checkbox labelText="Label text" bind:checked="{checked}" />
|
||||
|
||||
<div style="margin: var(--cds-spacing-05) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
|
||||
{/each}
|
||||
|
||||
<div style="margin: var(--cds-spacing-05) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
bind:toggled="{toggled}"
|
||||
size="sm"
|
||||
labelText="Trigger snippet overflow"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
style="margin-bottom: var(--bx-spacing-05)"
|
||||
/>
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<Toggle
|
||||
size="sm"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
style="margin-bottom: var(--bx-spacing-05)"
|
||||
labelText="Show code snippets"
|
||||
bind:toggled="{toggled}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</ComboBox>
|
||||
|
||||
<style>
|
||||
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) {
|
||||
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,11 +51,11 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,11 +29,11 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,15 +46,15 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
|
||||
p {
|
||||
outline: 1px solid var(--cds-interactive-01);
|
||||
outline: 1px solid var(--bx-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,15 +51,15 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
|
||||
p {
|
||||
outline: 1px solid var(--cds-interactive-01);
|
||||
outline: 1px solid var(--bx-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</Dropdown>
|
||||
|
||||
<style>
|
||||
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) {
|
||||
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
padding: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
padding: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
</MultiSelect>
|
||||
|
||||
<style>
|
||||
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) {
|
||||
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:global(.cds--checkbox-label-text) {
|
||||
:global(.bx--checkbox-label-text) {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<NumberInput allowEmpty bind:value="{value}" />
|
||||
|
||||
<div style="margin: var(--cds-spacing-05) 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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<PaginationNav bind:page="{page}" />
|
||||
|
||||
<div style="margin: var(--cds-spacing-05) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (page = 1)}" disabled="{page === 0}">
|
||||
Set page to 1
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
<div bind:this="{ref}" style:position="relative">
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<Popover
|
||||
bind:open
|
||||
bind:open="{open}"
|
||||
align="bottom-left"
|
||||
on:click:outside="{({ detail }) => {
|
||||
console.log('on:click:outside');
|
||||
open = ref.contains(detail.target);
|
||||
}}"
|
||||
>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
status="{status}"
|
||||
/>
|
||||
|
||||
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
||||
<ButtonSet style="margin-top: var(--bx-spacing-08)">
|
||||
<Button
|
||||
disabled="{value > 0}"
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
<div style="margin: var(--cds-spacing-06) 0">
|
||||
<div style="margin: var(--bx-spacing-06) 0">
|
||||
<Button
|
||||
kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
||||
<div style="margin: var(--cds-layout-03) 0">
|
||||
<div style="margin: var(--bx-layout-03) 0">
|
||||
{#each plans as value (value)}
|
||||
<Button
|
||||
size="small"
|
||||
|
|
|
|||
|
|
@ -30,6 +30,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-spacing-05) 0;
|
||||
margin: var(--bx-spacing-05) 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
<div style="margin: var(--cds-spacing-05) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
Selected: <strong>{selected}</strong>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</svelte:fragment>
|
||||
</Tabs>
|
||||
|
||||
<div style="margin: var(--cds-spacing-05) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (selected = 1)}">Set index to 1</Button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
</Tooltip>
|
||||
|
||||
<div style="margin-top: var(--cds-spacing-12);">
|
||||
<div style="margin-top: var(--bx-spacing-12);">
|
||||
<Button size="small" on:click="{() => (open = !open)}">
|
||||
{open ? "Close tooltip" : "Open tooltip"}
|
||||
</Button>
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -89,6 +89,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<ButtonSet style="margin-bottom: var(--cds-spacing-05)">
|
||||
<ButtonSet style="margin-bottom: var(--bx-spacing-05)">
|
||||
{#each [nodeSpark, nodeBlockchain] as { id, text }}
|
||||
<Button
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
let:node
|
||||
>
|
||||
<span
|
||||
style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}"
|
||||
style:color="{node.selected ? "var(--bx-interactive-04)" : "inherit"}"
|
||||
style:text-decoration="{node.disabled ? "inherit" : "underline"}"
|
||||
>
|
||||
{node.text} (id: {node.id})
|
||||
|
|
|
|||
|
|
@ -61,6 +61,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
</p>
|
||||
<div style="overflow-x: scroll;">
|
||||
{#each events as { type, ...rest }}
|
||||
<div style="display: block; margin-bottom: var(--cds-spacing-05)">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -31,14 +31,14 @@
|
|||
:global(body.framed) {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
||||
padding: var(--bx-spacing-06) var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
:global(.framed :not(.cds--content) [class^="cds--col"]) {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
:global(.framed :not(.bx--content) [class^="bx--col"]) {
|
||||
outline: 1px solid var(--bx-interactive-04);
|
||||
}
|
||||
|
||||
:global(.framed .cds--content [class^="cds--col"]) {
|
||||
:global(.framed .bx--content [class^="bx--col"]) {
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,12 +91,12 @@
|
|||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column max="{10}" xlg="{10}">
|
||||
<h2 style="margin-top: var(--cds-spacing-06)">Installation</h2>
|
||||
<h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column noGutter>
|
||||
<Tabs>
|
||||
<Tab label="NPM" />
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
</Tabs>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--cds-spacing-09)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-09)">
|
||||
<Column>
|
||||
<h2>Styling</h2>
|
||||
<p>
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
light, 2 dark).
|
||||
</p>
|
||||
<RadioButtonGroup
|
||||
style="margin-top: var(--cds-spacing-08)"
|
||||
style="margin-top: var(--bx-spacing-08)"
|
||||
legendText="Carbon themes"
|
||||
bind:selected="{$theme}"
|
||||
>
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<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>
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column>
|
||||
<h2>Portfolio</h2>
|
||||
<p>
|
||||
|
|
@ -313,6 +313,6 @@
|
|||
|
||||
<style>
|
||||
p {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ function plugin() {
|
|||
function carbonify() {
|
||||
return (tree) => {
|
||||
visit(tree, "link", (node) => {
|
||||
node.data = { hProperties: { class: "cds--link" } };
|
||||
node.data = { hProperties: { class: "bx--link" } };
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -188,31 +188,31 @@ export default {
|
|||
code: content.replace(
|
||||
"</Layout_MDSVEX_DEFAULT>",
|
||||
`<div slot="aside">
|
||||
<ul class="cds--list--unordered">
|
||||
<ul class="bx--list--unordered">
|
||||
${toc
|
||||
.map(
|
||||
(item) =>
|
||||
`<li class="cds--list__item"><a class="cds--link" href="\#${item.id}">${item.text}</a></li>`
|
||||
`<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
|
||||
)
|
||||
.join("")}
|
||||
<h5>Component API</h5>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#props">Props</a>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#props">Props</a>
|
||||
</li>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#typedefs">Typedefs</a>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#typedefs">Typedefs</a>
|
||||
</li>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#slots">Slots</a>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#slots">Slots</a>
|
||||
</li>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#forwarded-events">Forwarded events</a>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#forwarded-events">Forwarded events</a>
|
||||
</li>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#dispatched-events">Dispatched events</a>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#dispatched-events">Dispatched events</a>
|
||||
</li>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#rest-props">restProps</a>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#rest-props">restProps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@
|
|||
{:else}
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<ul
|
||||
class:cds--accordion="{true}"
|
||||
class:cds--accordion--start="{align === 'start'}"
|
||||
class:cds--accordion--end="{align === 'end'}"
|
||||
class:cds--accordion--sm="{size === 'sm'}"
|
||||
class:cds--accordion--lg="{size === 'lg' || size === 'xl'}"
|
||||
class:bx--accordion="{true}"
|
||||
class:bx--accordion--start="{align === 'start'}"
|
||||
class:bx--accordion--end="{align === 'end'}"
|
||||
class:bx--accordion--sm="{size === 'sm'}"
|
||||
class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -36,11 +36,11 @@
|
|||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<li
|
||||
class:cds--accordion__item="{true}"
|
||||
class:cds--accordion__item--active="{open}"
|
||||
class:cds--accordion__item--disabled="{disabled}"
|
||||
class:cds--accordion__item--expanding="{animation === 'expanding'}"
|
||||
class:cds--accordion__item--collapsing="{animation === 'collapsing'}"
|
||||
class:bx--accordion__item="{true}"
|
||||
class:bx--accordion__item--active="{open}"
|
||||
class:bx--accordion__item--disabled="{disabled}"
|
||||
class:bx--accordion__item--expanding="{animation === 'expanding'}"
|
||||
class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
|
||||
{...$$restProps}
|
||||
on:animationend
|
||||
on:animationend="{() => {
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
>
|
||||
<button
|
||||
type="button"
|
||||
class:cds--accordion__heading="{true}"
|
||||
class:bx--accordion__heading="{true}"
|
||||
title="{iconDescription}"
|
||||
aria-expanded="{open}"
|
||||
disabled="{disabled}"
|
||||
|
|
@ -68,15 +68,12 @@
|
|||
}
|
||||
}}"
|
||||
>
|
||||
<ChevronRight
|
||||
class="cds--accordion__arrow"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
<div class:cds--accordion__title="{true}">
|
||||
<ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
|
||||
<div class:bx--accordion__title="{true}">
|
||||
<slot name="title">{title}</slot>
|
||||
</div>
|
||||
</button>
|
||||
<div class:cds--accordion__content="{true}">
|
||||
<div class:bx--accordion__content="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,12 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<ul
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--accordion="{true}"
|
||||
class:cds--accordion--start="{align === 'start'}"
|
||||
class:cds--accordion--end="{align === 'end'}"
|
||||
class:cds--accordion--sm="{size === 'sm'}"
|
||||
class:cds--accordion--xl="{size === 'xl'}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--accordion="{true}"
|
||||
class:bx--accordion--start="{align === 'start'}"
|
||||
class:bx--accordion--end="{align === 'end'}"
|
||||
class:bx--accordion--sm="{size === 'sm'}"
|
||||
class:bx--accordion--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -38,14 +38,14 @@
|
|||
>
|
||||
{#if open}
|
||||
<li
|
||||
class:cds--accordion__item="{true}"
|
||||
class:cds--accordion__item--active="{true}"
|
||||
class:bx--accordion__item="{true}"
|
||||
class:bx--accordion__item--active="{true}"
|
||||
>
|
||||
<span class:cds--accordion__heading="{true}">
|
||||
<ChevronRight class="cds--accordion__arrow" />
|
||||
<SkeletonText class="cds--accordion__title" />
|
||||
<span class:bx--accordion__heading="{true}">
|
||||
<ChevronRight class="bx--accordion__arrow" />
|
||||
<SkeletonText class="bx--accordion__title" />
|
||||
</span>
|
||||
<div class:cds--accordion__content="{true}">
|
||||
<div class:bx--accordion__content="{true}">
|
||||
<SkeletonText width="90%" />
|
||||
<SkeletonText width="80%" />
|
||||
<SkeletonText width="95%" />
|
||||
|
|
@ -53,10 +53,10 @@
|
|||
</li>
|
||||
{/if}
|
||||
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
|
||||
<li class:cds--accordion__item="{true}">
|
||||
<span class:cds--accordion__heading="{true}">
|
||||
<ChevronRight class="cds--accordion__arrow" />
|
||||
<SkeletonText class="cds--accordion__title" />
|
||||
<li class:bx--accordion__item="{true}">
|
||||
<span class:bx--accordion__heading="{true}">
|
||||
<ChevronRight class="bx--accordion__arrow" />
|
||||
<SkeletonText class="bx--accordion__title" />
|
||||
</span>
|
||||
</li>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:cds--aspect-ratio="{true}"
|
||||
class:cds--aspect-ratio--2x1="{ratio === '2x1'}"
|
||||
class:cds--aspect-ratio--2x3="{ratio === '2x3'}"
|
||||
class:cds--aspect-ratio--16x9="{ratio === '16x9'}"
|
||||
class:cds--aspect-ratio--4x3="{ratio === '4x3'}"
|
||||
class:cds--aspect-ratio--1x1="{ratio === '1x1'}"
|
||||
class:cds--aspect-ratio--3x4="{ratio === '3x4'}"
|
||||
class:cds--aspect-ratio--3x2="{ratio === '3x2'}"
|
||||
class:cds--aspect-ratio--9x16="{ratio === '9x16'}"
|
||||
class:cds--aspect-ratio--1x2="{ratio === '1x2'}"
|
||||
class:bx--aspect-ratio="{true}"
|
||||
class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
|
||||
class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
|
||||
class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
|
||||
class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
|
||||
class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
|
||||
class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
|
||||
class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
|
||||
class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
|
||||
class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
on:mouseleave
|
||||
>
|
||||
<ol
|
||||
class:cds--breadcrumb="{true}"
|
||||
class:cds--breadcrumb--no-trailing-slash="{noTrailingSlash}"
|
||||
class:bx--breadcrumb="{true}"
|
||||
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
|
||||
>
|
||||
<slot />
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
/**
|
||||
* @slot {{props?: { ["aria-current"]?: string; class: "cds--link"; }}}
|
||||
* @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<li
|
||||
class:cds--breadcrumb-item="{true}"
|
||||
class:cds--breadcrumb-item--current="{isCurrentPage &&
|
||||
class:bx--breadcrumb-item="{true}"
|
||||
class:bx--breadcrumb-item--current="{isCurrentPage &&
|
||||
$$restProps['aria-current'] !== 'page'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<slot
|
||||
props="{{
|
||||
'aria-current': $$restProps['aria-current'],
|
||||
class: 'cds--link',
|
||||
class: 'bx--link',
|
||||
}}"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--breadcrumb="{true}"
|
||||
class:cds--breadcrumb--no-trailing-slash="{noTrailingSlash}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--breadcrumb="{true}"
|
||||
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -19,8 +19,8 @@
|
|||
on:mouseleave
|
||||
>
|
||||
{#each Array.from({ length: count }, (_, i) => i) as item (item)}
|
||||
<div class:cds--breadcrumb-item="{true}">
|
||||
<span class:cds--link="{true}"> </span>
|
||||
<div class:bx--breadcrumb-item="{true}">
|
||||
<span class:bx--link="{true}"> </span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -95,29 +95,29 @@
|
|||
hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
|
||||
...$$restProps,
|
||||
class: [
|
||||
"cds--btn",
|
||||
expressive && "cds--btn--expressive",
|
||||
"bx--btn",
|
||||
expressive && "bx--btn--expressive",
|
||||
((size === "small" && !expressive) ||
|
||||
(size === "sm" && !expressive) ||
|
||||
(size === "small" && !expressive)) &&
|
||||
"cds--btn--sm",
|
||||
"bx--btn--sm",
|
||||
((size === "field" && !expressive) || (size === "md" && !expressive)) &&
|
||||
"cds--btn--md",
|
||||
size === "small" && "cds--btn--sm",
|
||||
size === "xl" && "cds--btn--xl",
|
||||
size === "2xl" && "cds--btn--2xl",
|
||||
kind && `cds--btn--${kind}`,
|
||||
disabled && "cds--btn--disabled",
|
||||
hasIconOnly && "cds--btn--icon-only",
|
||||
hasIconOnly && "cds--tooltip__trigger",
|
||||
hasIconOnly && "cds--tooltip--a11y",
|
||||
"bx--btn--md",
|
||||
size === "small" && "bx--btn--sm",
|
||||
size === "xl" && "bx--btn--xl",
|
||||
size === "2xl" && "bx--btn--2xl",
|
||||
kind && `bx--btn--${kind}`,
|
||||
disabled && "bx--btn--disabled",
|
||||
hasIconOnly && "bx--btn--icon-only",
|
||||
hasIconOnly && "bx--tooltip__trigger",
|
||||
hasIconOnly && "bx--tooltip--a11y",
|
||||
hasIconOnly &&
|
||||
tooltipPosition &&
|
||||
`cds--btn--icon-only--${tooltipPosition}`,
|
||||
`bx--btn--icon-only--${tooltipPosition}`,
|
||||
hasIconOnly &&
|
||||
tooltipAlignment &&
|
||||
`cds--tooltip--align-${tooltipAlignment}`,
|
||||
hasIconOnly && isSelected && kind === "ghost" && "cds--btn--selected",
|
||||
`bx--tooltip--align-${tooltipAlignment}`,
|
||||
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
|
||||
$$restProps.class,
|
||||
]
|
||||
.filter(Boolean)
|
||||
|
|
@ -151,12 +151,12 @@
|
|||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:cds--assistive-text="{true}">{iconDescription}</span>
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot /><svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="cds--btn__icon"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</a>
|
||||
|
|
@ -170,12 +170,12 @@
|
|||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:cds--assistive-text="{true}">{iconDescription}</span>
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot /><svelte:component
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="cds--btn__icon"
|
||||
class="bx--btn__icon"
|
||||
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:cds--btn-set="{true}"
|
||||
class:cds--btn-set--stacked="{stacked}"
|
||||
class:bx--btn-set="{true}"
|
||||
class:bx--btn-set--stacked="{stacked}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@
|
|||
href="{href}"
|
||||
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
|
||||
role="button"
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--btn="{true}"
|
||||
class:cds--btn--field="{size === 'field'}"
|
||||
class:cds--btn--sm="{size === 'small'}"
|
||||
class:cds--btn--lg="{size === 'lg'}"
|
||||
class:cds--btn--xl="{size === 'xl'}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -35,12 +35,12 @@
|
|||
{:else}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--btn="{true}"
|
||||
class:cds--btn--field="{size === 'field'}"
|
||||
class:cds--btn--sm="{size === 'small'}"
|
||||
class:cds--btn--lg="{size === 'lg'}"
|
||||
class:cds--btn--xl="{size === 'xl'}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -82,8 +82,8 @@
|
|||
{:else}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:cds--form-item="{true}"
|
||||
class:cds--checkbox-wrapper="{true}"
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--checkbox-wrapper="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
name="{name}"
|
||||
required="{required}"
|
||||
readonly="{readonly}"
|
||||
class:cds--checkbox="{true}"
|
||||
class:bx--checkbox="{true}"
|
||||
on:change="{() => {
|
||||
if (useGroup) {
|
||||
group = group.includes(value)
|
||||
|
|
@ -114,11 +114,11 @@
|
|||
on:change
|
||||
on:blur
|
||||
/>
|
||||
<label for="{id}" title="{title}" class:cds--checkbox-label="{true}">
|
||||
<label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
|
||||
<span
|
||||
bind:this="{refLabel}"
|
||||
class:cds--checkbox-label-text="{true}"
|
||||
class:cds--visually-hidden="{hideLabel}"
|
||||
class:bx--checkbox-label-text="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:cds--form-item="{true}"
|
||||
class:cds--checkbox-wrapper="{true}"
|
||||
class:cds--checkbox-label="{true}"
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--checkbox-wrapper="{true}"
|
||||
class:bx--checkbox-label="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<span class:cds--checkbox-label-text="{true}" class:cds--skeleton="{true}"
|
||||
<span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
|
||||
></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
export let ref = null;
|
||||
</script>
|
||||
|
||||
<div class:cds--checkbox--inline="{true}">
|
||||
<div class:bx--checkbox--inline="{true}">
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="checkbox"
|
||||
class:cds--checkbox="{true}"
|
||||
class:bx--checkbox="{true}"
|
||||
checked="{indeterminate ? false : checked}"
|
||||
indeterminate="{indeterminate}"
|
||||
id="{id}"
|
||||
|
|
@ -34,5 +34,5 @@
|
|||
for="{id}"
|
||||
title="{title}"
|
||||
aria-label="{$$props['aria-label']}"
|
||||
class:cds--checkbox-label="{true}"></label>
|
||||
class:bx--checkbox-label="{true}"></label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -144,14 +144,14 @@
|
|||
{:else if type === "inline"}
|
||||
{#if hideCopyButton}
|
||||
<span
|
||||
class:cds--snippet="{true}"
|
||||
class:cds--snippet--expand="{expanded}"
|
||||
class:cds--snippet--light="{light}"
|
||||
class:cds--snippet--no-copy="{hideCopyButton}"
|
||||
class:cds--snippet--wraptext="{wrapText}"
|
||||
class:cds--snippet--single="{type === 'single'}"
|
||||
class:cds--snippet--inline="{type === 'inline'}"
|
||||
class:cds--snippet--multi="{type === 'multi'}"
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
class:bx--snippet--no-copy="{hideCopyButton}"
|
||||
class:bx--snippet--wraptext="{wrapText}"
|
||||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--inline="{type === 'inline'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<code id="{id}">
|
||||
|
|
@ -162,16 +162,16 @@
|
|||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
class:cds--copy="{true}"
|
||||
class:cds--btn--copy="{true}"
|
||||
class:cds--copy-btn--animating="{animation}"
|
||||
class:cds--copy-btn--fade-in="{animation === 'fade-in'}"
|
||||
class:cds--copy-btn--fade-out="{animation === 'fade-out'}"
|
||||
class:cds--snippet="{true}"
|
||||
class:cds--snippet--inline="{type === 'inline'}"
|
||||
class:cds--snippet--expand="{expanded}"
|
||||
class:cds--snippet--light="{light}"
|
||||
class:cds--snippet--wraptext="{wrapText}"
|
||||
class:bx--copy="{true}"
|
||||
class:bx--btn--copy="{true}"
|
||||
class:bx--copy-btn--animating="{animation}"
|
||||
class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
|
||||
class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--inline="{type === 'inline'}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
class:bx--snippet--wraptext="{wrapText}"
|
||||
aria-label="{copyLabel}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
@ -198,8 +198,8 @@
|
|||
</code>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:cds--assistive-text="{true}"
|
||||
class:cds--copy-btn__feedback="{true}"
|
||||
class:bx--assistive-text="{true}"
|
||||
class:bx--copy-btn__feedback="{true}"
|
||||
>
|
||||
{feedback}
|
||||
</span>
|
||||
|
|
@ -208,15 +208,15 @@
|
|||
{:else}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:cds--snippet="{true}"
|
||||
class:cds--snippet--expand="{expanded}"
|
||||
class:cds--snippet--light="{light}"
|
||||
class:cds--snippet--no-copy="{hideCopyButton}"
|
||||
class:cds--snippet--wraptext="{wrapText}"
|
||||
class:cds--snippet--single="{type === 'single'}"
|
||||
class:cds--snippet--inline="{type === 'inline'}"
|
||||
class:cds--snippet--multi="{type === 'multi'}"
|
||||
class:cds--snippet--disabled="{type !== 'inline' && disabled}"
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
class:bx--snippet--no-copy="{hideCopyButton}"
|
||||
class:bx--snippet--wraptext="{wrapText}"
|
||||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--inline="{type === 'inline'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
class:bx--snippet--disabled="{type !== 'inline' && disabled}"
|
||||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
role="{type === 'single' ? 'textbox' : undefined}"
|
||||
tabindex="{type === 'single' && !disabled ? '0' : undefined}"
|
||||
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
|
||||
class:cds--snippet-container="{true}"
|
||||
class:bx--snippet-container="{true}"
|
||||
style:width="100%"
|
||||
style:min-height="{minHeight}px"
|
||||
style:max-height="{maxHeight}"
|
||||
|
|
@ -251,15 +251,15 @@
|
|||
<Button
|
||||
kind="ghost"
|
||||
size="small"
|
||||
class="cds--snippet-btn--expand"
|
||||
class="bx--snippet-btn--expand"
|
||||
disabled="{disabled}"
|
||||
on:click="{() => {
|
||||
expanded = !expanded;
|
||||
}}"
|
||||
>
|
||||
<span class:cds--snippet-btn--text="{true}">{expandText}</span>
|
||||
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
|
||||
<ChevronDown
|
||||
class="cds--icon-chevron--down cds--snippet__icon"
|
||||
class="bx--icon-chevron--down bx--snippet__icon"
|
||||
aria-label="{expandText}"
|
||||
/>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--snippet="{true}"
|
||||
class:cds--snippet--single="{type === 'single'}"
|
||||
class:cds--snippet--multi="{type === 'multi'}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:cds--snippet-container="{true}">
|
||||
<div class:bx--snippet-container="{true}">
|
||||
{#if type === "single"}
|
||||
<span></span>
|
||||
{:else if type === "multi"}<span></span> <span></span> <span></span>{/if}
|
||||
|
|
|
|||
|
|
@ -217,12 +217,12 @@
|
|||
}}"
|
||||
/>
|
||||
|
||||
<div class:cds--list-box__wrapper="{true}">
|
||||
<div class:bx--list-box__wrapper="{true}">
|
||||
{#if titleText || $$slots.titleText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:cds--label="{true}"
|
||||
class:cds--label--disabled="{disabled}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
>
|
||||
<slot name="titleText">
|
||||
{titleText}
|
||||
|
|
@ -230,8 +230,8 @@
|
|||
</label>
|
||||
{/if}
|
||||
<ListBox
|
||||
class="cds--combo-box {direction === 'top' &&
|
||||
'cds--list-box--up'} {!invalid && warn && 'cds--combo-box--warning'}"
|
||||
class="bx--combo-box {direction === 'top' &&
|
||||
'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
|
||||
id="{comboId}"
|
||||
aria-label="{ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
|
|
@ -273,9 +273,9 @@
|
|||
id="{id}"
|
||||
name="{name}"
|
||||
{...$$restProps}
|
||||
class:cds--text-input="{true}"
|
||||
class:cds--text-input--light="{light}"
|
||||
class:cds--text-input--empty="{value === ''}"
|
||||
class:bx--text-input="{true}"
|
||||
class:bx--text-input--light="{light}"
|
||||
class:bx--text-input--empty="{value === ''}"
|
||||
on:input="{({ target }) => {
|
||||
if (!open && target.value.length > 0) {
|
||||
open = true;
|
||||
|
|
@ -347,11 +347,11 @@
|
|||
on:paste
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled class="cds--list-box__invalid-icon" />
|
||||
<WarningFilled class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled
|
||||
class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"
|
||||
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if value}
|
||||
|
|
@ -407,7 +407,7 @@
|
|||
{itemToString(item)}
|
||||
</slot>
|
||||
{#if selectedItem && selectedItem.id === item.id}
|
||||
<Checkmark class="cds--list-box__menu-item__selected-icon" />
|
||||
<Checkmark class="bx--list-box__menu-item__selected-icon" />
|
||||
{/if}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
|
|
@ -416,8 +416,8 @@
|
|||
</ListBox>
|
||||
{#if !invalid && helperText && !warn}
|
||||
<div
|
||||
class:cds--form__helper-text="{true}"
|
||||
class:cds--form__helper-text--disabled="{disabled}"
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,9 +100,9 @@
|
|||
<div
|
||||
bind:this="{ref}"
|
||||
role="presentation"
|
||||
class:cds--modal="{true}"
|
||||
class:bx--modal="{true}"
|
||||
class:is-visible="{open}"
|
||||
class:cds--modal--danger="{danger}"
|
||||
class:bx--modal--danger="{danger}"
|
||||
{...$$restProps}
|
||||
on:keydown
|
||||
on:keydown="{(e) => {
|
||||
|
|
@ -157,10 +157,10 @@
|
|||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="{$$props['aria-label'] || $label || undefined}"
|
||||
class:cds--modal-container="{true}"
|
||||
class:cds--modal-container--xs="{size === 'xs'}"
|
||||
class:cds--modal-container--sm="{size === 'sm'}"
|
||||
class:cds--modal-container--lg="{size === 'lg'}"
|
||||
class:bx--modal-container="{true}"
|
||||
class:bx--modal-container--xs="{size === 'xs'}"
|
||||
class:bx--modal-container--sm="{size === 'sm'}"
|
||||
class:bx--modal-container--lg="{size === 'lg'}"
|
||||
class="{containerClass}"
|
||||
on:click="{() => {
|
||||
didClickInnerModal = true;
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
<div
|
||||
tabindex="{hasScrollingContent ? '0' : undefined}"
|
||||
role="{hasScrollingContent ? 'region' : undefined}"
|
||||
class:cds--modal-content="{true}"
|
||||
class:cds--modal-content--with-form="{hasForm}"
|
||||
class:cds--modal-scroll-content="{hasScrollingContent}"
|
||||
class:bx--modal-content="{true}"
|
||||
class:bx--modal-content--with-form="{hasForm}"
|
||||
class:bx--modal-scroll-content="{hasScrollingContent}"
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{#if hasScrollingContent}
|
||||
<div class:cds--modal-content--overflow-indicator="{true}"></div>
|
||||
<div class:bx--modal-content--overflow-indicator="{true}"></div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:cds--modal-footer="{true}"
|
||||
class:cds--modal-footer--three-button="{secondaryButtons.length === 2}"
|
||||
class:bx--modal-footer="{true}"
|
||||
class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if secondaryButtons.length > 0}
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
$: updateLabel(label);
|
||||
</script>
|
||||
|
||||
<div class:cds--modal-header="{true}" {...$$restProps}>
|
||||
<div class:bx--modal-header="{true}" {...$$restProps}>
|
||||
{#if label}
|
||||
<h2
|
||||
class:cds--modal-header__label="{true}"
|
||||
class:cds--type-delta="{true}"
|
||||
class:bx--modal-header__label="{true}"
|
||||
class:bx--type-delta="{true}"
|
||||
class="{labelClass}"
|
||||
>
|
||||
{label}
|
||||
|
|
@ -40,8 +40,8 @@
|
|||
{/if}
|
||||
{#if title}
|
||||
<h3
|
||||
class:cds--modal-header__heading="{true}"
|
||||
class:cds--type-beta="{true}"
|
||||
class:bx--modal-header__heading="{true}"
|
||||
class:bx--type-beta="{true}"
|
||||
class="{titleClass}"
|
||||
>
|
||||
{title}
|
||||
|
|
@ -51,14 +51,14 @@
|
|||
<button
|
||||
type="button"
|
||||
aria-label="{iconDescription}"
|
||||
class:cds--modal-close="{true}"
|
||||
class:bx--modal-close="{true}"
|
||||
class="{closeClass}"
|
||||
on:click
|
||||
on:click="{closeModal}"
|
||||
>
|
||||
<Close
|
||||
size="{20}"
|
||||
class="cds--modal-close__icon {closeIconClass}"
|
||||
class="bx--modal-close__icon {closeIconClass}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -61,9 +61,9 @@
|
|||
<!-- svelte-ignore a11y-interactive-supports-focus -->
|
||||
<div
|
||||
role="tablist"
|
||||
class:cds--content-switcher="{true}"
|
||||
class:cds--content-switcher--sm="{size === 'sm'}"
|
||||
class:cds--content-switcher--lg="{size === 'lg' || size === 'xl'}"
|
||||
class:bx--content-switcher="{true}"
|
||||
class:bx--content-switcher--sm="{size === 'sm'}"
|
||||
class:bx--content-switcher--lg="{size === 'lg' || size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
aria-selected="{selected}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
class:cds--content-switcher-btn="{true}"
|
||||
class:cds--content-switcher--selected="{selected}"
|
||||
class:bx--content-switcher-btn="{true}"
|
||||
class:bx--content-switcher--selected="{selected}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click|preventDefault="{() => {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
}
|
||||
}}"
|
||||
>
|
||||
<span class:cds--content-switcher__label="{true}">
|
||||
<span class:bx--content-switcher__label="{true}">
|
||||
<slot>{text}</slot>
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -160,10 +160,10 @@
|
|||
tabindex="-1"
|
||||
data-direction="{direction}"
|
||||
data-level="{level}"
|
||||
class:cds--menu="{true}"
|
||||
class:cds--menu--open="{open}"
|
||||
class:cds--menu--invisible="{open && x === 0 && y === 0}"
|
||||
class:cds--menu--root="{level === 1}"
|
||||
class:bx--menu="{true}"
|
||||
class:bx--menu--open="{open}"
|
||||
class:bx--menu--invisible="{open && x === 0 && y === 0}"
|
||||
class:bx--menu--root="{level === 1}"
|
||||
style:left="{x}px"
|
||||
style:top="{y}px"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<li role="separator" class:cds--menu-divider="{true}"></li>
|
||||
<li role="separator" class:bx--menu-divider="{true}"></li>
|
||||
|
|
|
|||
|
|
@ -173,14 +173,14 @@
|
|||
aria-disabled="{!subOptions && disabled}"
|
||||
aria-haspopup="{subOptions ? true : undefined}"
|
||||
aria-expanded="{subOptions ? submenuOpen : undefined}"
|
||||
class:cds--menu-option="{true}"
|
||||
class:cds--menu-option--disabled="{true}"
|
||||
class:cds--menu-option--active="{subOptions && submenuOpen}"
|
||||
class:cds--menu-option--danger="{!subOptions && kind === 'danger'}"
|
||||
class:bx--menu-option="{true}"
|
||||
class:bx--menu-option--disabled="{true}"
|
||||
class:bx--menu-option--active="{subOptions && submenuOpen}"
|
||||
class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
|
||||
indented="{indented}"
|
||||
aria-checked="{isSelectable || isRadio ? selected : undefined}"
|
||||
data-nested="{ref &&
|
||||
ref.closest('.cds--menu').getAttribute('data-level') === '2'}"
|
||||
ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
|
||||
data-sub="{subOptions}"
|
||||
data-id="{id}"
|
||||
{...$$restProps}
|
||||
|
|
@ -240,20 +240,20 @@
|
|||
>
|
||||
{#if subOptions}
|
||||
<div
|
||||
class:cds--menu-option__content="{true}"
|
||||
class:cds--menu-option__content--disabled="{disabled}"
|
||||
class:bx--menu-option__content="{true}"
|
||||
class:bx--menu-option__content--disabled="{disabled}"
|
||||
>
|
||||
{#if indented}
|
||||
<div class:cds--menu-option__icon="{true}">
|
||||
<div class:bx--menu-option__icon="{true}">
|
||||
<slot name="icon">
|
||||
<svelte:component this="{icon}" />
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
<span class:cds--menu-option__label="{true}" title="{labelText}">
|
||||
<span class:bx--menu-option__label="{true}" title="{labelText}">
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:cds--menu-option__info="{true}"><CaretRight /></div>
|
||||
<div class:bx--menu-option__info="{true}"><CaretRight /></div>
|
||||
</div>
|
||||
|
||||
<ContextMenu
|
||||
|
|
@ -265,20 +265,20 @@
|
|||
</ContextMenu>
|
||||
{:else}
|
||||
<div
|
||||
class:cds--menu-option__content="{true}"
|
||||
class:cds--menu-option__content--disabled="{disabled}"
|
||||
class:bx--menu-option__content="{true}"
|
||||
class:bx--menu-option__content--disabled="{disabled}"
|
||||
>
|
||||
{#if indented}
|
||||
<div class:cds--menu-option__icon="{true}">
|
||||
<div class:bx--menu-option__icon="{true}">
|
||||
<slot name="icon">
|
||||
<svelte:component this="{icon}" />
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
<span class:cds--menu-option__label="{true}" title="{labelText}">
|
||||
<span class:bx--menu-option__label="{true}" title="{labelText}">
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:cds--menu-option__info="{true}">
|
||||
<div class:bx--menu-option__info="{true}">
|
||||
<slot name="shortcutText">{shortcutText}</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@
|
|||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
class:cds--copy-btn="{true}"
|
||||
class:cds--copy="{true}"
|
||||
class:cds--copy-btn--animating="{animation}"
|
||||
class:cds--copy-btn--fade-in="{animation === 'fade-in'}"
|
||||
class:cds--copy-btn--fade-out="{animation === 'fade-out'}"
|
||||
class:bx--copy-btn="{true}"
|
||||
class:bx--copy="{true}"
|
||||
class:bx--copy-btn--animating="{animation}"
|
||||
class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
|
||||
class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
{...$$restProps}
|
||||
|
|
@ -71,11 +71,11 @@
|
|||
}
|
||||
}}"
|
||||
>
|
||||
<Copy class="cds--snippet__icon" />
|
||||
<Copy class="bx--snippet__icon" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:cds--assistive-text="{true}"
|
||||
class:cds--copy-btn__feedback="{true}"
|
||||
class:bx--assistive-text="{true}"
|
||||
class:bx--copy-btn__feedback="{true}"
|
||||
>
|
||||
{feedback}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -260,14 +260,14 @@
|
|||
|
||||
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
|
||||
{#if title || $$slots.title || description || $$slots.description}
|
||||
<div class:cds--data-table-header="{true}">
|
||||
<div class:bx--data-table-header="{true}">
|
||||
{#if title || $$slots.title}
|
||||
<h4 class:cds--data-table-header__title="{true}">
|
||||
<h4 class:bx--data-table-header__title="{true}">
|
||||
<slot name="title">{title}</slot>
|
||||
</h4>
|
||||
{/if}
|
||||
{#if description || $$slots.description}
|
||||
<p class:cds--data-table-header__description="{true}">
|
||||
<p class:bx--data-table-header__description="{true}">
|
||||
<slot name="description">{description}</slot>
|
||||
</p>
|
||||
{/if}
|
||||
|
|
@ -287,13 +287,13 @@
|
|||
{#if expandable}
|
||||
<th
|
||||
scope="col"
|
||||
class:cds--table-expand="{true}"
|
||||
class:bx--table-expand="{true}"
|
||||
data-previous-value="{expanded ? 'collapsed' : undefined}"
|
||||
>
|
||||
{#if batchExpansion}
|
||||
<button
|
||||
type="button"
|
||||
class:cds--table-expand__button="{true}"
|
||||
class:bx--table-expand__button="{true}"
|
||||
on:click="{() => {
|
||||
expanded = !expanded;
|
||||
expandedRowIds = expanded ? expandableRowIds : [];
|
||||
|
|
@ -301,7 +301,7 @@
|
|||
dispatch('click:header--expand', { expanded });
|
||||
}}"
|
||||
>
|
||||
<ChevronRight class="cds--table-expand__svg" />
|
||||
<ChevronRight class="bx--table-expand__svg" />
|
||||
</button>
|
||||
{/if}
|
||||
</th>
|
||||
|
|
@ -310,7 +310,7 @@
|
|||
<th scope="col"></th>
|
||||
{/if}
|
||||
{#if batchSelection && !radio}
|
||||
<th scope="col" class:cds--table-column-checkbox="{true}">
|
||||
<th scope="col" class:bx--table-column-checkbox="{true}">
|
||||
<InlineCheckbox
|
||||
bind:ref="{refSelectAll}"
|
||||
aria-label="Select all rows"
|
||||
|
|
@ -375,19 +375,18 @@
|
|||
data-row="{row.id}"
|
||||
data-parent-row="{expandable ? true : undefined}"
|
||||
class="{selectedRowIds.includes(row.id)
|
||||
? 'cds--data-table--selected'
|
||||
: ''} {expandedRows[row.id]
|
||||
? 'cds--expandable-row'
|
||||
: ''} {expandable ? 'cds--parent-row' : ''} {expandable &&
|
||||
parentRowId === row.id
|
||||
? 'cds--expandable-row--hover'
|
||||
? 'bx--data-table--selected'
|
||||
: ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
|
||||
? 'bx--parent-row'
|
||||
: ''} {expandable && parentRowId === row.id
|
||||
? 'bx--expandable-row--hover'
|
||||
: ''}"
|
||||
on:click="{({ target }) => {
|
||||
// forgo "click", "click:row" events if target
|
||||
// resembles an overflow menu, a checkbox, or radio button
|
||||
if (
|
||||
[...target.classList].some((name) =>
|
||||
/^cds--(overflow-menu|checkbox|radio-button)/.test(name)
|
||||
/^bx--(overflow-menu|checkbox|radio-button)/.test(name)
|
||||
)
|
||||
) {
|
||||
return;
|
||||
|
|
@ -404,7 +403,7 @@
|
|||
>
|
||||
{#if expandable}
|
||||
<TableCell
|
||||
class="cds--table-expand"
|
||||
class="bx--table-expand"
|
||||
headers="expand"
|
||||
data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
|
||||
expandedRows[row.id]
|
||||
|
|
@ -414,7 +413,7 @@
|
|||
{#if !nonExpandableRowIds.includes(row.id)}
|
||||
<button
|
||||
type="button"
|
||||
class:cds--table-expand__button="{true}"
|
||||
class:bx--table-expand__button="{true}"
|
||||
aria-label="{expandedRows[row.id]
|
||||
? 'Collapse current row'
|
||||
: 'Expand current row'}"
|
||||
|
|
@ -431,15 +430,15 @@
|
|||
});
|
||||
}}"
|
||||
>
|
||||
<ChevronRight class="cds--table-expand__svg" />
|
||||
<ChevronRight class="bx--table-expand__svg" />
|
||||
</button>
|
||||
{/if}
|
||||
</TableCell>
|
||||
{/if}
|
||||
{#if selectable}
|
||||
<td
|
||||
class:cds--table-column-checkbox="{true}"
|
||||
class:cds--table-column-radio="{radio}"
|
||||
class:bx--table-column-checkbox="{true}"
|
||||
class:bx--table-column-radio="{radio}"
|
||||
>
|
||||
{#if !nonSelectableRowIds.includes(row.id)}
|
||||
{#if radio}
|
||||
|
|
@ -473,7 +472,7 @@
|
|||
{/if}
|
||||
{#each tableCellsByRowId[row.id] as cell, j (cell.key)}
|
||||
{#if headers[j].empty}
|
||||
<td class:cds--table-column-menu="{headers[j].columnMenu}">
|
||||
<td class:bx--table-column-menu="{headers[j].columnMenu}">
|
||||
<slot
|
||||
name="cell"
|
||||
row="{row}"
|
||||
|
|
@ -508,7 +507,7 @@
|
|||
{#if expandable}
|
||||
<tr
|
||||
data-child-row
|
||||
class:cds--expandable-row="{true}"
|
||||
class:bx--expandable-row="{true}"
|
||||
on:mouseenter="{() => {
|
||||
if (nonExpandableRowIds.includes(row.id)) return;
|
||||
parentRowId = row.id;
|
||||
|
|
@ -522,7 +521,7 @@
|
|||
<TableCell
|
||||
colspan="{selectable ? headers.length + 2 : headers.length + 1}"
|
||||
>
|
||||
<div class:cds--child-row-inner-container="{true}">
|
||||
<div class:bx--child-row-inner-container="{true}">
|
||||
<slot name="expanded-row" row="{row}" />
|
||||
</div>
|
||||
</TableCell>
|
||||
|
|
|
|||
|
|
@ -43,35 +43,35 @@
|
|||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--data-table-container="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--data-table-container="{true}"
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if showHeader}
|
||||
<div class:cds--data-table-header="{true}">
|
||||
<div class:cds--data-table-header__title="{true}"></div>
|
||||
<div class:cds--data-table-header__description="{true}"></div>
|
||||
<div class:bx--data-table-header="{true}">
|
||||
<div class:bx--data-table-header__title="{true}"></div>
|
||||
<div class:bx--data-table-header__description="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if showToolbar}
|
||||
<section aria-label="data table toolbar" class:cds--table-toolbar="{true}">
|
||||
<div class:cds--toolbar-content="{true}">
|
||||
<section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
|
||||
<div class:bx--toolbar-content="{true}">
|
||||
<span
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--btn="{true}"
|
||||
class:cds--btn--sm="{true}"></span>
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--sm="{true}"></span>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<table
|
||||
class:cds--skeleton="{true}"
|
||||
class:cds--data-table="{true}"
|
||||
class:cds--data-table--compact="{size === 'compact'}"
|
||||
class:cds--data-table--short="{size === 'short'}"
|
||||
class:cds--data-table--tall="{size === 'tall'}"
|
||||
class:cds--data-table--zebra="{zebra}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--data-table="{true}"
|
||||
class:bx--data-table--compact="{size === 'compact'}"
|
||||
class:bx--data-table--short="{size === 'short'}"
|
||||
class:bx--data-table--tall="{size === 'tall'}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
|
|
|||
|
|
@ -25,17 +25,17 @@
|
|||
</script>
|
||||
|
||||
{#if stickyHeader}
|
||||
<section class:cds--data-table_inner-container="{true}" {...$$restProps}>
|
||||
<section class:bx--data-table_inner-container="{true}" {...$$restProps}>
|
||||
<table
|
||||
class:cds--data-table="{true}"
|
||||
class:cds--data-table--compact="{size === 'compact'}"
|
||||
class:cds--data-table--short="{size === 'short'}"
|
||||
class:cds--data-table--tall="{size === 'tall'}"
|
||||
class:cds--data-table--md="{size === 'medium'}"
|
||||
class:cds--data-table--sort="{sortable}"
|
||||
class:cds--data-table--zebra="{zebra}"
|
||||
class:cds--data-table--static="{useStaticWidth}"
|
||||
class:cds--data-table--sticky-header="{stickyHeader}"
|
||||
class:bx--data-table="{true}"
|
||||
class:bx--data-table--compact="{size === 'compact'}"
|
||||
class:bx--data-table--short="{size === 'short'}"
|
||||
class:bx--data-table--tall="{size === 'tall'}"
|
||||
class:bx--data-table--md="{size === 'medium'}"
|
||||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
style="{tableStyle}"
|
||||
>
|
||||
<slot />
|
||||
|
|
@ -43,15 +43,15 @@
|
|||
</section>
|
||||
{:else}
|
||||
<table
|
||||
class:cds--data-table="{true}"
|
||||
class:cds--data-table--compact="{size === 'compact'}"
|
||||
class:cds--data-table--short="{size === 'short'}"
|
||||
class:cds--data-table--tall="{size === 'tall'}"
|
||||
class:cds--data-table--md="{size === 'medium'}"
|
||||
class:cds--data-table--sort="{sortable}"
|
||||
class:cds--data-table--zebra="{zebra}"
|
||||
class:cds--data-table--static="{useStaticWidth}"
|
||||
class:cds--data-table--sticky-header="{stickyHeader}"
|
||||
class:bx--data-table="{true}"
|
||||
class:bx--data-table--compact="{size === 'compact'}"
|
||||
class:bx--data-table--short="{size === 'short'}"
|
||||
class:bx--data-table--tall="{size === 'tall'}"
|
||||
class:bx--data-table--md="{size === 'medium'}"
|
||||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
{...$$restProps}
|
||||
style="{tableStyle}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:cds--data-table-container="{true}"
|
||||
class:cds--data-table-container--static="{useStaticWidth}"
|
||||
class:cds--data-table--max-width="{stickyHeader}"
|
||||
class:bx--data-table-container="{true}"
|
||||
class:bx--data-table-container--static="{useStaticWidth}"
|
||||
class:bx--data-table--max-width="{stickyHeader}"
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}
|
||||
<div class:cds--data-table-header="{true}">
|
||||
<h4 class:cds--data-table-header__title="{true}">{title}</h4>
|
||||
<p class:cds--data-table-header__description="{true}">{description}</p>
|
||||
<div class:bx--data-table-header="{true}">
|
||||
<h4 class:bx--data-table-header__title="{true}">{title}</h4>
|
||||
<p class:bx--data-table-header__description="{true}">{description}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -43,24 +43,24 @@
|
|||
>
|
||||
<button
|
||||
type="button"
|
||||
class:cds--table-sort="{true}"
|
||||
class:cds--table-sort--active="{active}"
|
||||
class:cds--table-sort--ascending="{active &&
|
||||
class:bx--table-sort="{true}"
|
||||
class:bx--table-sort--active="{active}"
|
||||
class:bx--table-sort--ascending="{active &&
|
||||
sortDirection === 'descending'}"
|
||||
on:click
|
||||
>
|
||||
<div class:cds--table-header-label="{true}">
|
||||
<div class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
<ArrowUp
|
||||
size="{20}"
|
||||
aria-label="{ariaLabel}"
|
||||
class="cds--table-sort__icon"
|
||||
class="bx--table-sort__icon"
|
||||
/>
|
||||
<ArrowsVertical
|
||||
size="{20}"
|
||||
aria-label="{ariaLabel}"
|
||||
class="cds--table-sort__icon-unsorted"
|
||||
class="bx--table-sort__icon-unsorted"
|
||||
/>
|
||||
</button>
|
||||
</th>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:cds--table-header-label="{true}">
|
||||
<div class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
</th>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
<section
|
||||
bind:this="{ref}"
|
||||
aria-label="data table toolbar"
|
||||
class:cds--table-toolbar="{true}"
|
||||
class:cds--table-toolbar--small="{size === 'sm'}"
|
||||
class:cds--table-toolbar--normal="{size === 'default'}"
|
||||
class:bx--table-toolbar="{true}"
|
||||
class:bx--table-toolbar--small="{size === 'sm'}"
|
||||
class:bx--table-toolbar--normal="{size === 'default'}"
|
||||
style:z-index="{1}"
|
||||
{...$$restProps}
|
||||
>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue