💄 Tweak badge position

kirbydesign · Aug 25, 2022 · 5e0196d · 5e0196d
1 parent b839eb2
commit 5e0196d
Showing 1 changed file with 7 additions and 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
@@ -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;
       }
     }
   }