From 64c66c2c7b0306846670621153476df90f295d62 Mon Sep 17 00:00:00 2001 From: RasmusKjeldgaard Date: Fri, 19 Aug 2022 13:45:07 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Make=20badge=20in=20tab=20ba?= =?UTF-8?q?r=20grow/expand=20right?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/components/tabs/tab-button/tab-button.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 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 745868c391..174c0daf5c 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,8 @@ ion-tab-button { @include utils.slotted(div kirby-badge) { &.md { - --kirby-badge-top: -5px; - --kirby-badge-right: -5px; + --kirby-badge-top: -#{utils.size('xxxs')}; + --kirby-badge-left: #{utils.size('xs')}; } } From b839eb2677d435132c0d5ac055bf874a7f25fe35 Mon Sep 17 00:00:00 2001 From: RasmusKjeldgaard Date: Wed, 24 Aug 2022 17:44:19 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84Position=20badge=20for=20all=20?= =?UTF-8?q?screen=20sizes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/tab-button/tab-button.component.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 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 174c0daf5c..2d00344b10 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 @@ -9,12 +9,12 @@ ion-tab-button { --color-selected: utils.get-color('black'); --kirby-badge-position: absolute; --kirby-badge-top: 0; - --kirby-badge-right: 0; + --kirby-badge-left: 0; @include utils.slotted(div kirby-badge) { &.md { --kirby-badge-top: -#{utils.size('xxxs')}; - --kirby-badge-left: #{utils.size('xs')}; + --kirby-badge-left: #{utils.size('s')}; } } @@ -37,6 +37,15 @@ ion-tab-button { .icon-container { margin-right: utils.size('xxs'); } + + @include utils.slotted(div kirby-badge) { + &.md { + // Magic constants 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; + } + } } @include utils.media('>=large') { From 1f94a13f00a8c48051ae858b9c616b1e3c95787e Mon Sep 17 00:00:00 2001 From: RasmusKjeldgaard Date: Thu, 25 Aug 2022 11:28:59 +0200 Subject: [PATCH 3/3] =?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 | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 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..dd4d89b252 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 @@ -9,12 +9,14 @@ ion-tab-button { --color-selected: utils.get-color('black'); --kirby-badge-position: absolute; --kirby-badge-top: 0; - --kirby-badge-left: 0; + --kirby-badge-right: 0; @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; } } }