diff --git a/src/elements/core/styles/mixins/table.scss b/src/elements/core/styles/mixins/table.scss index fe4c6decda..c418985ac1 100644 --- a/src/elements/core/styles/mixins/table.scss +++ b/src/elements/core/styles/mixins/table.scss @@ -137,6 +137,17 @@ } } +@mixin table--xs { + --sbb-table-header-padding-block: 0; + --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x); + --sbb-table-cell-padding-block: 0; + --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x); + + tbody > tr > td { + @include typo.text-xs--regular; + } +} + @mixin table--theme-iron { --sbb-table-cell-color: var(--sbb-color-iron); diff --git a/src/elements/core/styles/table.scss b/src/elements/core/styles/table.scss index 4b7f93df53..d783451a67 100644 --- a/src/elements/core/styles/table.scss +++ b/src/elements/core/styles/table.scss @@ -2,7 +2,8 @@ .sbb-table, .sbb-table-m, -.sbb-table-s { +.sbb-table-s, +.sbb-table-xs { @include table.table; } @@ -14,6 +15,10 @@ @include table.table--s; } +.sbb-table-xs { + @include table.table--xs; +} + sbb-table-wrapper[negative] .sbb-table, .sbb-table--negative { @include table.table--negative; diff --git a/src/storybook/styles/table/readme.md b/src/storybook/styles/table/readme.md index 8993e0b5c9..772e49f0fe 100644 --- a/src/storybook/styles/table/readme.md +++ b/src/storybook/styles/table/readme.md @@ -36,7 +36,7 @@ By default, tables are styled with alternating row stripes to enhance readabilit ### Size -The available sizes are `m` (default) and `s`. Use the respective `sbb-table-*size*` classes to specify it: +The available sizes are `m` (default), `s` and `xs`. Use the respective `sbb-table-*size*` classes to specify it: ```html