From 997c33b9a461394ed9f694aef2f3c24134fc3d7f Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 25 Apr 2024 09:12:42 +0200 Subject: [PATCH] fix(ffe-tables): td and th should not wrap --- packages/ffe-tables/less/table.less | 48 +++++++++++++++++------------ 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/ffe-tables/less/table.less b/packages/ffe-tables/less/table.less index 320a4a3505..8817ba90e5 100644 --- a/packages/ffe-tables/less/table.less +++ b/packages/ffe-tables/less/table.less @@ -1,6 +1,6 @@ .ffe-table { font-family: 'SpareBank1-regular', arial, sans-serif; - margin: @ffe-spacing-sm 0; + margin: var(--ffe-spacing-sm) 0; min-width: 100%; text-align: left; border-collapse: collapse; @@ -26,9 +26,14 @@ } } - &__footer { - .ffe-strong-text(); + &__footer, + &__heading { + font-family: var(--ffe-g-font-strong); + font-variant-numeric: tabular-nums; + font-weight: normal; + } + &__footer { .ffe-table__row { border-bottom: none; } @@ -37,37 +42,31 @@ &__row { border-bottom: 1px solid var(--ffe-v-table-row-bordercolor); display: block; - padding: @ffe-spacing-xs 0; + padding: var(--ffe-spacing-xs) 0; @media (min-width: @breakpoint-md) { display: table-row; } } - &__heading { - .ffe-strong-text(); + &__heading, + &__cell { + overflow-wrap: normal; + } + &__heading { color: var(--ffe-v-table-heading-color); text-align: left; @media (min-width: @breakpoint-md) { display: table-cell; - padding: @ffe-spacing-xs; - } - } - - &__row, - &__cell { - &--collapsed { - line-height: 0; - padding: 0; - font-size: 0; + padding: var(--ffe-spacing-xs); } } &__cell { display: block; - padding: 0 @ffe-spacing-2xs; + padding: 0 var(--ffe-spacing-2xs); &--top { vertical-align: top; @@ -75,7 +74,16 @@ @media (min-width: @breakpoint-md) { display: table-cell; - padding: @ffe-spacing-sm @ffe-spacing-xs; + padding: var(--ffe-spacing-sm) var(--ffe-spacing-xs); + } + } + + &__row, + &__cell { + &--collapsed { + line-height: 0; + padding: 0; + font-size: 0; } } @@ -85,7 +93,7 @@ .ffe-table__heading, .ffe-table__cell { @media (min-width: @breakpoint-md) { - padding: @ffe-spacing-xs; + padding: var(--ffe-spacing-xs); } } } @@ -94,7 +102,7 @@ display: block; max-width: none; vertical-align: top; - margin-bottom: @ffe-spacing-sm; + margin-bottom: var(--ffe-spacing-sm); color: var(--ffe-v-table-content-color); &--text-right {