@ionic/core 8.8.6-dev.11777569278.1613db2e → 8.8.6-dev.11777572994.1147595d

package/dist/collection/components/toolbar/toolbar.ios.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -51,10 +84,20 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   contain: content;
+  z-index: 10;
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -71,12 +114,13 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
+  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -87,104 +131,17 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
+  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   position: absolute;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  font-family: var(--ion-font-family, inherit);
-  z-index: 10;
-}
-
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
-.toolbar-container {
-  z-index: 10;
-}
-
-.toolbar-background {
-  z-index: -1;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/toolbar/toolbar.js

@@ -1,17 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { forceUpdate, h, Host } from "@stencil/core";
+import { Host, forceUpdate, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
- * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
+ * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
+ * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  *
  * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
@@ -21,14 +20,6 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Toolbar {
     constructor() {
         this.childrenStyles = new Map();
-        this.slotClasses = [
-            'has-start-content',
-            'has-end-content',
-            'has-primary-content',
-            'has-secondary-content',
-        ];
-        this.showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
-        this.slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -45,173 +36,6 @@ export class Toolbar {
         if (lastButtons) {
             lastButtons.classList.add('buttons-last-slot');
         }
-        this.updateSlotClasses();
-    }
-    componentDidLoad() {
-        this.updateSlotClasses();
-        this.updateSlotWidths();
-    }
-    titlePlacementChanged() {
-        this.updateSlotClasses();
-    }
-    /**
-     * Gets the title placement.
-     * Returns the title placement if it is set, otherwise returns `"center"`
-     * for `ionic` and `ios`, and `"start"` for `md`.
-     */
-    getTitlePlacement() {
-        if (this.titlePlacement !== undefined) {
-            return this.titlePlacement;
-        }
-        return getIonTheme(this) === 'ionic' || getIonTheme(this) === 'ios' ? 'center' : 'start';
-    }
-    /**
-     * Updates the CSS custom properties for slot widths
-     * This ensures that slots shown by their met conditions
-     * have a minimum width matching their required slot
-     */
-    updateSlotWidths(tries = 0) {
-        // Set timeout to try to execute after everything is rendered
-        setTimeout(() => {
-            // Attempt to measure and update
-            const success = this.measureAndUpdateSlots();
-            // If not all measurements were successful, try again in 100 ms
-            // cap recursion at 5 tries for safety
-            if (!success && tries < 5) {
-                setTimeout(() => {
-                    this.updateSlotWidths(tries + 1);
-                }, 100);
-            }
-        });
-    }
-    /**
-     * Measure the widths of the slots and update the CSS custom properties
-     * for the minimum width of each pair of slots based on the largest width in each pair.
-     * Returns whether we successfully measured all of the slots we expect to have content.
-     * If not, the content probably hasn't rendered yet and we need to try again.
-     */
-    measureAndUpdateSlots() {
-        // Define the relationship between slots based on the conditions array
-        // Group slots that should have the same width
-        const slotPairs = [
-            { name: 'start-end', slots: ['start', 'end'] },
-            { name: 'primary-secondary', slots: ['primary', 'secondary'] },
-        ];
-        // First, measure all slot widths
-        const slotWidths = new Map();
-        let allMeasurementsSuccessful = true;
-        // Measure all slots with content
-        const slots = ['start', 'end', 'primary', 'secondary'];
-        slots.forEach((slot) => {
-            var _a;
-            if (this.el.classList.contains(`has-${slot}-content`)) {
-                const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
-                if (slotElement) {
-                    // Check if the slot contains an img or ion-img
-                    const assignedElements = slotElement.assignedElements({ flatten: true });
-                    const hasImg = assignedElements.some((el) => {
-                        if (el.tagName === 'IMG' || el.tagName === 'ION-IMG') {
-                            return true;
-                        }
-                        // Check for nested images
-                        return el.querySelector('img, ion-img');
-                    });
-                    // Temporarily allow slot to size to content by setting flex-basis
-                    // to 'auto'. This ensures that slotted images can render at their
-                    // intrinsic width for measurement.
-                    if (hasImg) {
-                        const { name } = slotPairs.find((pair) => pair.slots.includes(slot));
-                        this.el.style.setProperty(`--${name}-size`, 'auto');
-                    }
-                    const width = slotElement.offsetWidth;
-                    if (width > 0) {
-                        slotWidths.set(slot, width);
-                    }
-                    else {
-                        allMeasurementsSuccessful = false;
-                    }
-                }
-            }
-        });
-        // Then set the CSS custom properties based on the largest width in each pair
-        slotPairs.forEach(({ name, slots }) => {
-            // Find the maximum width among the slots in this pair
-            let maxWidth = 0;
-            let hasAnyContent = false;
-            slots.forEach((slot) => {
-                var _a;
-                if (slotWidths.has(slot)) {
-                    hasAnyContent = true;
-                    maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
-                }
-            });
-            // If at least one slot in the pair has content, set the min-width for the pair
-            if (hasAnyContent && maxWidth > 0) {
-                // Set a single CSS variable for the pair
-                this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
-            }
-        });
-        return allMeasurementsSuccessful;
-    }
-    /**
-     * Removes all slot visibility classes and slot width CSS variables.
-     */
-    removeSlotClasses() {
-        this.el.classList.remove(...this.slotClasses, ...this.showClasses);
-        this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
-    }
-    updateSlotClasses() {
-        const titlePlacement = this.getTitlePlacement();
-        if (titlePlacement !== 'center') {
-            this.removeSlotClasses();
-            return;
-        }
-        // Check if slots have content
-        const slots = ['start', 'end', 'primary', 'secondary'];
-        const classesToAdd = [];
-        const classesToRemove = [];
-        slots.forEach((slot) => {
-            const slotHasContent = this.hasSlotContent(slot);
-            const slotClass = `has-${slot}-content`;
-            if (slotHasContent) {
-                classesToAdd.push(slotClass);
-            }
-            else {
-                classesToRemove.push(slotClass);
-            }
-        });
-        // Force visibilities in certain conditions. This works by adding a class to the toolbar
-        // named `show-{slot}`. This class will be added if the toolbar has the required slots
-        // and does not have any of the excluded slots, otherwise it will be removed.
-        // This is useful to enforce centering of the toolbar content when there are different amounts
-        // of slots on either side of the toolbar.
-        const conditions = [
-            { name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
-            { name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
-            { name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
-            { name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
-        ];
-        conditions.forEach((condition) => {
-            const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
-            const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
-            const className = `show-${condition.name}`;
-            if (hasRequiredSlots && !hasExcludedSlots) {
-                classesToAdd.push(className);
-            }
-            else {
-                classesToRemove.push(className);
-            }
-        });
-        // Add classes to the toolbar element
-        this.el.classList.add(...classesToAdd);
-        this.el.classList.remove(...classesToRemove);
-        // Update slot widths after classes have been updated
-        this.updateSlotWidths();
-    }
-    hasSlotContent(slotName) {
-        var _a;
-        const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
-        return !!slotNode && slotNode.assignedNodes().length > 0;
     }
     childrenStyle(ev) {
         ev.stopPropagation();
@@ -236,32 +60,28 @@ export class Toolbar {
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const childStyles = {};
-        this.childrenStyles.forEach((style) => {
-            Object.assign(childStyles, style);
+        this.childrenStyles.forEach((value) => {
+            Object.assign(childStyles, value);
         });
-        const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-                [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), h("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, h("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, h("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), h("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })) }, h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toolbar.ios.scss"],
-            "md": ["toolbar.md.scss"],
-            "ionic": ["toolbar.ionic.scss"]
+            "md": ["toolbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"],
-            "ionic": ["toolbar.ionic.css"]
+            "md": ["toolbar.md.css"]
         };
     }
     static get properties() {
@@ -291,35 +111,10 @@ export class Toolbar {
                 "setter": false,
                 "reflect": true,
                 "attribute": "color"
-            },
-            "titlePlacement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'start' | 'center' | 'end'",
-                    "resolved": "\"center\" | \"end\" | \"start\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Where to place the title relative to the other toolbar content.\n`\"start\"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL.\n`\"center\"`: The title will appear in the center of the toolbar.\n`\"end\"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.\n\nOnly applies in the `ionic` theme."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "title-placement"
             }
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "titlePlacement",
-                "methodName": "titlePlacementChanged"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "ionStyle",

package/dist/collection/components/toolbar/toolbar.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -51,10 +84,20 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   contain: content;
+  z-index: 10;
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -71,12 +114,13 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
+  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -87,104 +131,17 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
+  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   position: absolute;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  font-family: var(--ion-font-family, inherit);
-  z-index: 10;
-}
-
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
-.toolbar-container {
-  z-index: 10;
-}
-
-.toolbar-background {
-  z-index: -1;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use