@ionic/core/dist/collection/components/header/header.ios.css

Base components for Ionic

/**
 * 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;
 *   }
 * }
 */
ion-header {
  display: block;
  position: relative;
  order: -1;
  width: 100%;
  z-index: 10;
}

ion-header ion-toolbar:first-of-type {
  padding-top: var(--ion-safe-area-top, 0);
}

/**
 * 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;
 *   }
 * }
 */
.header-ios ion-toolbar:last-of-type {
  --border-width: 0 0 0.55px;
}

@supports (backdrop-filter: blur(0)) {
  .header-background {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    backdrop-filter: saturate(180%) blur(20px);
  }
  .header-translucent-ios ion-toolbar {
    --opacity: .8;
  }
  /**
   * Disable the saturation otherwise it distorts the content
   * background color when large header is not collapsed
   */
  .header-collapse-condense-inactive .header-background {
    backdrop-filter: blur(20px);
  }
}
.header-ios.ion-no-border ion-toolbar:last-of-type {
  --border-width: 0;
}

.header-collapse-fade ion-toolbar {
  --opacity-scale: inherit;
}

.header-collapse-condense {
  z-index: 9;
}

.header-collapse-condense ion-toolbar {
  position: sticky;
  top: 0;
}

.header-collapse-condense ion-toolbar:first-of-type {
  /**
   * The toolbar that contains the collapsible
   * large title should not have safe area padding applied.
   */
  padding-top: 0px;
  z-index: 1;
}

/**
 * Large title toolbar should just use the content background
 * since it needs to blend in with the header above it.
 */
.header-collapse-condense ion-toolbar {
  --background: var(--ion-background-color, #fff);
  z-index: 0;
}

.header-collapse-condense ion-toolbar:last-of-type {
  --border-width: 0px;
}

.header-collapse-condense ion-toolbar ion-searchbar {
  padding-top: 0px;
  padding-bottom: 13px;
}

.header-collapse-main {
  --opacity-scale: 1;
}

.header-collapse-main ion-toolbar {
  --opacity-scale: inherit;
}

.header-collapse-main ion-toolbar.in-toolbar ion-title,
.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
  transition: all 0.2s ease-in-out;
}

.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
  opacity: 0;
  pointer-events: none;
}

/**
 * There is a bug in Safari where changing
 * the opacity of an element in a scrollable container
 * while rubber-banding causes the scroll position
 * to jump to the top
 */
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
  visibility: hidden;
}

/**
 * The main header is only hidden once the collapsible large
 * title is configured. As a result, if the main header loads
 * before the collapsible large title is configured then the
 * main header will be visible briefly before being hidden
 * by the collapsible large title.
 *
 * The following selector ensures that any main header
 * on a page with a collapsible large title is hidden
 * before the collapsible large title is configured.
 * Once the collapsible large title is configured the main
 * header will have the ".header-collapse-main" class, and
 * this selector will no longer apply.
 *
 * The :has(...) part of the selector ensures a couple things:
 * 1. This will only apply within a page view since the content
 * must be a subsequent-sibling of the header (~ ion-content).
 * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
 *
 * We use opacity: 0 to avoid a layout shift.
 * We target both the attribute and the class in the event that the attribute
 * is not reflected on the host in some frameworks.
 *
 * Both headers should be scoped to iOS mode otherwise an MD app that uses an
 * iOS header may cause other MD headers to be unexpectedly hidden.
 */
ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse=condense],
~ ion-content ion-header.header-ios.header-collapse-condense) {
  opacity: 0;
}