refactor(tab-bar): update styles

Author: thetaPC

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

@@ -9,12 +9,6 @@
   align-items: center;
   justify-content: center;
 
-  /* stylelint-disable */
-  padding-right: var(--ion-safe-area-right);
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-  padding-left: var(--ion-safe-area-left);
-  /* stylelint-enable */
-
   border-top: var(--border);
 
   background: var(--background);
@@ -38,9 +32,6 @@
 }
 
 :host([slot="top"]) {
-  padding-top: var(--ion-safe-area-top, 0);
-  padding-bottom: 0;
-
   border-top: 0;
   border-bottom: var(--border);
 }
@@ -58,4 +49,16 @@
   width: auto;
 
   contain: strict;
+
+  /* stylelint-disable */
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
+}
+
+:host([slot="top"].tab-bar-full) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: 0;
 }

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

@@ -19,32 +19,31 @@
    */
   min-height: calc(globals.$ionic-scale-1400 - calc(globals.$ionic-space-100 * 2));
 
+  gap: globals.$ionic-space-300;
+
+  // TODO(ROU-10853): replace this value with a layer token
+  z-index: 10;
+}
+
+// Tab Bar Expand
+// --------------------------------------------------
+
+/* Full */
+:host(.tab-bar-full) {
   /* stylelint-disable */
   padding-top: globals.$ionic-space-100;
   padding-bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
 
   padding-right: calc(globals.$ionic-space-400 + var(--ion-safe-area-right, 0));
   padding-left: calc(globals.$ionic-space-400 + var(--ion-safe-area-left, 0));
   /* stylelint-enable */
-
-  gap: globals.$ionic-space-300;
-
-  // TODO(ROU-10853): replace this value with a layer token
-  z-index: 10;
 }
 
-// Tab Bar: Slot
-// --------------------------------------------------
-
-/* Top */
-:host([slot="top"]) {
+:host([slot="top"].tab-bar-full) {
   padding-top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
   padding-bottom: globals.$ionic-space-100;
 }
 
-// Tab Bar Expand
-// --------------------------------------------------
-
 /* Compact */
 :host(.tab-bar-compact) {
   @include globals.padding(globals.$ionic-space-100, globals.$ionic-space-400);