fix(badge): run lint and fix based on lint feedback.

Author: joselrio

core/src/components/badge/badge.common.scss

@@ -78,11 +78,12 @@
 }
 
 :host([vertical].in-tab-button) ::slotted(ion-icon) {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  @include position($top: 50%, $start: 50%);
 
+  position: absolute;
+  
   width: globals.$ion-scale-300;
   height: globals.$ion-scale-300;
+  
+  transform: translate(-50%, -50%);
 }

core/src/components/badge/test/hint/badge.e2e.ts

@@ -21,7 +21,7 @@ configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ co
       await expect(container).toHaveScreenshot(screenshot(`badge-hint-avatar`));
     });
   });
-  
+
   test.describe(title('badge: hint inside tab button'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/badge/test/hint', config);

core/src/components/badge/test/hint/index.html

@@ -99,71 +99,65 @@
           </div>
         </ion-list>
 
-
         <ion-list id="tab-button">
           <ion-list-header>
             <ion-label> Inside Tab Button </ion-label>
           </ion-list-header>
           <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
-            
             <ion-tab-button href="" tab="tab-one">
               <ion-label>Tab One</ion-label>
               <ion-icon name="star"></ion-icon>
               <ion-badge vertical="top" color="danger">9</ion-badge>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="schedule" class="e2eTabTwoButton">
               <ion-label>Tab Two</ion-label>
               <ion-icon name="globe"></ion-icon>
               <ion-badge vertical="top" color="primary">
                 <ion-icon name="star"></ion-icon>
               </ion-badge>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="tab-three">
               <ion-label>Tab Three</ion-label>
               <ion-icon name="logo-facebook"></ion-icon>
               <ion-badge vertical="top" color="warning">999</ion-badge>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="tab-four" class="e2eTabFourButton">
               <ion-label>Tab Four</ion-label>
               <ion-icon name="chatbox"></ion-icon>
               <ion-badge vertical="top" color="success"></ion-badge>
             </ion-tab-button>
-
           </div>
           <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
-            
             <ion-tab-button href="" tab="tab-one">
               <ion-label>Tab One</ion-label>
               <ion-icon name="star"></ion-icon>
               <ion-badge vertical="bottom" color="danger">9</ion-badge>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="schedule" class="e2eTabTwoButton">
               <ion-label>Tab Two</ion-label>
               <ion-icon name="globe"></ion-icon>
               <ion-badge vertical="bottom" color="primary">
                 <ion-icon name="star"></ion-icon>
               </ion-badge>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="tab-three">
               <ion-label>Tab Three</ion-label>
               <ion-icon name="logo-facebook"></ion-icon>
               <ion-badge vertical="bottom" color="warning">999</ion-badge>
             </ion-tab-button>
-  
+
             <ion-tab-button tab="tab-four" class="e2eTabFourButton">
               <ion-label>Tab Four</ion-label>
               <ion-icon name="chatbox"></ion-icon>
               <ion-badge vertical="bottom" color="success"></ion-badge>
             </ion-tab-button>
-
           </div>
         </ion-list>
-
       </ion-content>
     </ion-app>
   </body>

core/src/components/tab-button/tab-button.common.scss

@@ -158,12 +158,13 @@
 :host ::slotted(ion-badge[vertical]:empty) {
   @include padding(0, 0);
 
-  height: globals.$ion-scale-200;
   width: globals.$ion-scale-200;
+  height: globals.$ion-scale-200;
 }
 
 :host ::slotted(ion-badge[vertical]) {
-  left: 50%;
+  @include position($start: 50%);
+
   transform: translateX(globals.$ion-scale-300);
 }
 
@@ -172,7 +173,8 @@
 }
 
 :host ::slotted(ion-badge[vertical="bottom"]) {
-  top: 50%;
+  @include position($top: 50%);
+
   transform: translate(globals.$ion-scale-300, calc(globals.$ion-scale-200 * -1));
 }
 
@@ -183,11 +185,12 @@
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
   @include padding(2px, 4px, 4px, 4px);
 
+  min-width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+
   font-size: globals.$ion-font-size-300;
-  line-height: 1;
 
-  height: globals.$ion-scale-400;
-  min-width: globals.$ion-scale-400;
+  line-height: 1;
 }
 
 // Tab Button: Layout

core/src/components/tab-button/tab-button.ionic.scss

@@ -99,4 +99,4 @@
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
   @include padding(3px, 4px, 4px, 4px);
-}
+}