From 5e0196d3f2d60402a2b392c53a66127e1aaa30ed Mon Sep 17 00:00:00 2001 From: RasmusKjeldgaard Date: Thu, 25 Aug 2022 11:16:06 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Tweak=20badge=20position?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/tab-button/tab-button.component.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss b/libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss index 2d00344b10..f146b733f7 100644 --- a/libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss +++ b/libs/designsystem/src/lib/components/tabs/tab-button/tab-button.component.scss @@ -13,8 +13,10 @@ ion-tab-button { @include utils.slotted(div kirby-badge) { &.md { - --kirby-badge-top: -#{utils.size('xxxs')}; - --kirby-badge-left: #{utils.size('s')}; + // Magic values here as we have no tokens that gives + // badge the correct position in relation to the tab icon + --kirby-badge-top: -0.4em; + --kirby-badge-left: 1.4em; } } @@ -40,10 +42,10 @@ ion-tab-button { @include utils.slotted(div kirby-badge) { &.md { - // Magic constants here as we have no tokens that gives + // Magic values here as we have no tokens that gives // badge the correct position in relation to the tab icon - --kirby-badge-top: -10px; - --kirby-badge-left: 14px; + --kirby-badge-top: -1em; + --kirby-badge-left: 1.4em; } } }