@innovaccer/design-system/css/src/components/pageHeader.module.css

React components library project for Innovaccer Design System

.PageHeader {
  width: 100%;
}

.PageHeader-wrapper {
  padding: var(--spacing-20) var(--spacing-40) var(--spacing-20) 0;
}

.PageHeader-wrapper--withTabs {
  padding-bottom: 0;
}

.PageHeader-wrapper--withTabs .TabsWrapper-header {
  border-bottom: none;
}

.PageHeader-bottom--withTabs {
  margin-top: var(--spacing-30);
}

.PageHeader .Row {
  width: 100%;
}

.PageHeader-titleWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: var(--spacing-20);
}

.PageHeader-titleWrapper .Badge {
  margin-left: var(--spacing-30);
  flex-shrink: 0;
}

.PageHeader-statusWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.PageHeader-statusWrapper .StatusHint {
  margin-right: var(--spacing-20);
}

.PageHeader-navigationWrapper {
  margin-top: var(--spacing-30);
}

.PageHeader-navigationWrapper--noMargin {
  margin-top: 0;
}

.PageHeader-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.PageHeader-actionsWrapper {
  display: flex;
  justify-content: flex-end;
  padding-left: var(--spacing-20);
}

/* =====================================================
   Responsive main header row
   ===================================================== */

/* Base: flex layout — used by all variants */
.PageHeader-row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  width: 100%;
}

.PageHeader-group--title {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}

/* Center-nav group — navigation/stepper in center position */
.PageHeader-group--center {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--spacing-20);
  min-width: 0;
  order: 2;
}

/* Actions / right-side group */
.PageHeader-group--actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding-left: var(--spacing-20);
  row-gap: var(--spacing-30);
  order: 3;
}

/* Default (full): CSS Grid for true 3-col centering */
.PageHeader-row--withCenter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
}

/* Ghost: center nav stays in the grid for measurement but is invisible and out of flow.
   Used when collision detection moves the nav to PageHeader-bottom. */
.PageHeader-group--center--ghost {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

/* All stacked: flex marker on the row + full-width children */
.PageHeader-row--allStacked {
  display: flex;
  flex-wrap: wrap;
}

.PageHeader-group--title--stacked {
  flex: 0 0 100%;
  order: 1;
}

.PageHeader-group--actions--stacked {
  flex: 0 0 100%;
  order: 2;
  padding-left: 0;
  padding-top: var(--spacing-10);
  justify-content: flex-start;
}

/* =====================================================
   Level 1: inter-section spacing when right group wraps
   ===================================================== */

/* At < 576 px, the actions group sits between title and nav/stepper/tabs.
   For level 1 headers that have actions, increase the gap to 12 px so all
   three sections (title, actions, nav) have consistent breathing room. */
@media (max-width: 575px) {
  .PageHeader-group--actions--level1Responsive {
    padding-top: var(--spacing-30);
  }

  .PageHeader-bottom--level1Responsive {
    margin-top: var(--spacing-30);
  }

  .PageHeader-navigationWrapper--noMarginSm {
    margin-top: 0;
  }
}