package.components.Page.page.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
@use '../../sass-utilities' as *;

// stylelint-disable
$pf-page-v6--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
$pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
// stylelint-enable

@include pf-root($page) {
  --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);

  // Header
  --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);

  // Sidebar
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
  --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
  --#{$page}__sidebar--xl--Width: auto;
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$page}__sidebar--BoxShadow: none;

  // TODO Reduced Motion default needed
  --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
  --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
  --#{$page}__sidebar--TranslateX: -100%;
  --#{$page}__sidebar--TranslateZ: 0;
  --#{$page}__sidebar--m-expanded--TranslateX: 0;
  --#{$page}__sidebar--xl--TranslateX: 0;
  --#{$page}__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
  --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --#{$page}__sidebar--PaddingInlineStart: 0;
  --#{$page}__sidebar--PaddingInlineEnd: 0;


  // Sidebar header
  --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
  --#{$page}__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
  --#{$page}__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --#{$page}__sidebar-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$page}__sidebar-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
  --#{$page}__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
  --#{$page}__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$page}__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
  --#{$page}__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // Sidebar body
  --#{$page}__sidebar-body--PaddingInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
  --#{$page}__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
  --#{$page}__sidebar-body--m-page-insets--PaddingInlineEnd: var(--#{$page}--inset);
  --#{$page}__sidebar-body--m-page-insets--PaddingInlineStart: var(--#{$page}--inset);
  --#{$page}__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  --#{$page}__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
  }

  // Container for the main content area (grid area)
  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$page}__main-container--GridArea: main;
  --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset); 
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
  --#{$page}__main-container--BorderWidth: #{pf-size-prem(4px)}; // TODO Change to be a page outline token
  --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token

  // Main section
  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
  --#{$page}__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$page}__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
  --#{$page}__main-section--RowGap: var(--pf-t--global--spacer--lg);
  --#{$page}__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);

  // Limit width
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
  
  // Sticky
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
  --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);

  // Shadows
  --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);

  // Main section horizontal subnav
  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-subnav--PaddingBlockEnd: 0;
  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));

  // Main section breadcrumb
  --#{$page}__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
  --#{$page}__main-breadcrumb--PaddingBlockEnd: 0;
  --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
  --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);

  // Main section tabs
  --#{$page}__main-tabs--PaddingBlockStart: 0;
  --#{$page}__main-tabs--PaddingInlineEnd: 0;
  --#{$page}__main-tabs--PaddingBlockEnd: 0;
  --#{$page}__main-tabs--PaddingInlineStart: 0;
  --#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);

  // Wizard main section
  --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
  --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
}

.#{$page} {
  // Base
  display: grid;
  grid-template-areas:
    "header"
    "main";
  grid-template-rows: max-content 1fr;
  grid-template-columns: 1fr;
  height: 100vh;
  height: 100dvh;
  max-height: 100%;
  background-color: var(--#{$page}--BackgroundColor);

  @media (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width);

    grid-template-areas:
      "header header"
      "sidebar main";
    grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
    }
  }

// Header
.#{$page} > .#{$masthead} {
  @media (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns);
  }

  z-index: var(--#{$page}--c-masthead--ZIndex);
  grid-area: header;
}

// Sidebar
.#{$page}__sidebar {
  z-index: var(--#{$page}__sidebar--ZIndex);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  grid-row-start: 2;
  grid-column-start: 1;
  width: var(--#{$page}__sidebar--Width);
  padding-block-start: 0;
  padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
  margin-inline-end: var(--#{$page}__sidebar--MarginInlineEnd);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--#{$page}__sidebar--BackgroundColor);
  transition: transform var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);

  @include pf-v6-bidirectional-style(
    $prop: transform,
    $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
  );

  // Mobile
  // Expanded nav
  &.pf-m-expanded {
    --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--m-expanded--TranslateX);

    box-shadow: var(--#{$page}__sidebar--BoxShadow);

    @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
      --#{$page}__sidebar--BoxShadow: none;
    }
  }

  // Desktop
  // Collapse nav
  &.pf-m-collapsed {
    max-width: 0;
    overflow: hidden;
  }
}

.#{$page}__sidebar-header {
  padding-block-start: var(--#{$page}__sidebar-header--PaddingBlockStart);
  padding-block-end: var(--#{$page}__sidebar-header--PaddingBlockEnd);
  border-block-end: var(--#{$page}__sidebar-header--BorderBlockEndWidth) solid var(--#{$page}__sidebar-header--BorderBlockEndColor);
}

.#{$page}__sidebar-title {
  padding-inline-start: var(--#{$page}__sidebar-title--PaddingInlineStart);
  font-family: var(--#{$page}__sidebar-title--FontFamily);
  font-size: var(--#{$page}__sidebar-title--FontSize);
  font-weight: var(--#{$page}__sidebar-title--FontWeight);
  line-height: var(--#{$page}__sidebar-title--LineHeight);
}

.#{$page}__sidebar-body {
  padding-inline-start: var(--#{$page}__sidebar-body--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__sidebar-body--PaddingInlineEnd);

  &:last-child {
    flex-grow: 1;
  }

  &.pf-m-page-insets {
    --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--m-page-insets--PaddingInlineEnd);
    --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--m-page-insets--PaddingInlineStart);
  }

  &.pf-m-context-selector {
    --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--m-context-selector--PaddingInlineEnd);
    --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--m-context-selector--PaddingInlineStart);
  }

  &.pf-m-inset-none {
    --#{$page}__sidebar-body--PaddingInlineEnd: 0;
    --#{$page}__sidebar-body--PaddingInlineStart: 0;
  }

  &.pf-m-fill {
    flex-grow: 1;
  }

  &.pf-m-no-fill {
    flex-grow: 0;
  }
}

.#{$page}__main-breadcrumb,
.#{$page}__main-tabs,
.#{$page}__main-section,
.#{$page}__main-wizard {
  &.pf-m-limit-width {
    > .#{$page}__main-body {
      max-width: var(--#{$page}--section--m-limit-width--MaxWidth);
    }

    &.pf-m-align-center {
      align-items: center;

      > .#{$page}__main-body {
        width: 100%;
      }
    }
  }
}

.#{$page}__main-breadcrumb,
.#{$page}__main-tabs,
.#{$page}__main-section,
.#{$page}__main-wizard,
.#{$page}__main-group,
.#{$page}__main-subnav {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  &.pf-m-overflow-scroll {
    position: relative;
    flex-shrink: 1;
    overflow: auto;
  }

  &.pf-m-shadow-bottom {
    z-index: var(--#{$page}--section--m-shadow-bottom--ZIndex);
    box-shadow: var(--#{$page}--section--m-shadow-bottom--BoxShadow);
  }

  &.pf-m-shadow-top {
    z-index: var(--#{$page}--section--m-shadow-top--ZIndex);
    box-shadow: var(--#{$page}--section--m-shadow-top--BoxShadow);
  }

  // Responsive height modifiers for sticky top/bottom
  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");

    @include pf-v6-apply-height-breakpoint($breakpoint) {

      &.pf-m-sticky-top#{$breakpoint-name} {
        position: sticky;
        inset-block-start: 0;
        z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
        box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
      }

      &.pf-m-sticky-bottom#{$breakpoint-name} {
        position: sticky;
        inset-block-end: 0;
        z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
        box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
      }
    }
  }
}

// Main & Drawer
.#{$page}__main-container {
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: var(--#{$page}__main-container--MaxHeight);
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
  background: var(--#{$page}__main-container--BackgroundColor);
  border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
  border-radius: var(--#{$page}__main-container--BorderRadius);
}

.#{$page}__main-container,
.#{$page}__drawer {
  z-index: var(--#{$page}__main-container--ZIndex);
  grid-area: var(--#{$page}__main-container--GridArea);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    .#{$masthead} + &,
    .#{$page}__sidebar.pf-m-collapsed + & {
      --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
    }

    .#{$page}__sidebar:not(.pf-m-collapsed) + & {
      --#{$page}__main-container--MarginInlineStart: 0;
    }
  }

  &.pf-m-fill,
  &:has(.#{$page}__main-wizard) {
    align-self: stretch;
  }


  &:focus {
    outline: 0;
  }
}

.#{$page}__main,
.#{$page}__main-drawer,
.#{$page}__main-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.#{$page}__main {
  overflow: auto;
}

.#{$page}__main-subnav {
  padding-block-start: var(--#{$page}__main-subnav--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-subnav--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__main-subnav--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__main-subnav--PaddingInlineEnd);
  background-color: var(--#{$page}__main-subnav--BackgroundColor);
}

.#{$page}__main-breadcrumb {
  padding-block-start: var(--#{$page}__main-breadcrumb--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingInlineEnd);
  background-color: var(--#{$page}__main-breadcrumb--BackgroundColor);

  + .#{$page}__main-section {
    --#{$page}__main-section--PaddingBlockStart: var(--#{$page}__main-breadcrumb--main-section--PaddingBlockStart);
  }

  // Responsive height modifiers for sticky top/bottom
  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");

    @include pf-v6-apply-height-breakpoint($breakpoint) {
      &.pf-m-sticky-top#{$breakpoint-name},
      .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
        --#{$page}__main-breadcrumb--PaddingBlockEnd: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
      }
    }
  }
}

.#{$page}__main-tabs {
  padding-block-start: var(--#{$page}__main-tabs--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-tabs--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__main-tabs--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
  background-color: var(--#{$page}__main-tabs--BackgroundColor);

  .#{$page}__main-breadcrumb + & {
    --#{$page}__main-tabs--PaddingBlockStart: var(--#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart);
  }
}

.#{$page}__main-section,
.#{$page}__main-group,
.#{$page}__main-wizard {
  &.pf-m-fill {
    flex-grow: 1;
  }

  &.pf-m-no-fill {
    flex-grow: 0;
  }
}

.#{$page}__main-section {
  gap: var(--#{$page}__main-section--RowGap);
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
  padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
  padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
  background-color: var(--#{$page}__main-section--BackgroundColor);

  &.pf-m-secondary {
    --#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
  }

  @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-v6-apply-breakpoint($breakpoint) {
      // stylelint-disable max-nesting-depth
      &.pf-m-padding#{$breakpoint-name} {
        padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
        padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
        padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
        padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
      }

      &.pf-m-no-padding#{$breakpoint-name} {
        padding: 0;
      }
      // stylelint-enable
    }
  }
}

.#{$page}__main-wizard {
  flex: 1 1;
  min-height: 0;
  background-color: var(--#{$page}__main-wizard--BackgroundColor);
  border-block-start: var(--#{$page}__main-wizard--BorderBlockStartWidth) solid var(--#{$page}__main-wizard--BorderBlockStartColor);

  &:first-child {
    --#{$page}__main-wizard--BorderBlockStartWidth: 0;
  }
}

.#{$page}__main-wizard .#{$page}__main-body {
  min-height: 0;
}

.#{$page}__main-group {
  flex-shrink: 0;
}

.#{$page}__drawer .#{$page}__main-container {
  align-self: revert;

  &.pf-m-fill {
    flex-grow: 1;
  }
}