@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.30.0

package/scss/components/page-header/page-header.scss

@@ -0,0 +1,422 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:math';
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities/convert';
+@use '@carbon/grid';
+@use '@carbon/styles/scss/components/page-header/index' as *;
+@use 'sass:map';
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+:host(#{$prefix}-page-header) {
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header;
+  position: sticky;
+  display: block;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
+  /* custom css property used from calculation of header offset */
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-header-top);
+}
+
+:host(#{$prefix}-page-header-breadcrumb),
+:host(#{$prefix}-page-header-content),
+:host(#{$prefix}-page-header-tabs) {
+  @include grid.css-grid();
+
+  display: block;
+}
+
+:host(#{$prefix}-page-header-breadcrumb) {
+  position: sticky;
+  z-index: 1;
+  background-color: $layer-01;
+  block-size: convert.to-rem(40px);
+  border-block-end: $border-subtle;
+
+  /* custom css property used from calculation of breadcrumb offset */
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: var(--c4p-page-header-breadcrumb-top);
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__breadcrumb-bar;
+  ::slotted([slot='icon']) {
+    margin-inline-end: $spacing-03;
+    // TODO: remove above styles when styles from React have been migrated
+    // and use the extend below
+    // @extend .#{$prefix}--page-header__breadcrumb__icon;
+  }
+
+  .#{$carbon-prefix}--subgrid {
+    block-size: 100%;
+  }
+
+  // TODO: remove this section when styles from React have been migrated
+  .#{$prefix}--page-header__breadcrumb-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--page-header__breadcrumb-wrapper {
+    display: inline-flex;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__actions {
+    display: inline-flex;
+  }
+  ///////////////////////////////
+}
+
+:host(#{$prefix}-page-header-breadcrumb:not([content-actions-flush]))
+  ::slotted([slot='content-actions']) {
+  //stylelint-disable declaration-no-important
+  margin-inline-end: $spacing-04 !important;
+}
+
+:host(#{$prefix}-page-header-breadcrumb[page-actions-flush]) {
+  .#{$carbon-prefix}--css-grid {
+    margin-inline-end: 0;
+    padding-inline-end: 0;
+  }
+
+  .#{$carbon-prefix}--css-grid-column {
+    margin-inline-end: 0;
+  }
+}
+
+:host(#{$prefix}-page-header-breadcrumb[border='true']) {
+  border-block-end: 1px solid $border-subtle-01;
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+
+  // @extend .#{$prefix}--page-header__breadcrumb-bar-border;
+}
+
+:host(#{$prefix}-page-header-content) {
+  padding: $spacing-06 0;
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__content;
+
+  .#{$prefix}--page-header__content__title {
+    @include type-style('productive-heading-04');
+
+    display: -webkit-box;
+    overflow: hidden;
+    // TODO: remove above styles when styles from React have been migrated
+    // and use the extend below
+    // @extend .#{$prefix}--page-header__content__title;
+    margin: 0;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-inline-size: convert.to-rem(640px);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+
+  .#{$prefix}--page-header__content__title-wrapper {
+    // TODO: remove this section
+    @include breakpoint-down(md) {
+      display: flex;
+      flex-direction: column;
+      grid-gap: $spacing-05;
+    }
+
+    display: grid;
+    gap: $spacing-05;
+    ///////////////////////////////
+
+    // overriding until the responsive behavior is implemented
+    grid-template-columns: auto minmax(auto, auto);
+    margin-block-end: $spacing-05;
+    min-block-size: convert.to-rem(40px);
+  }
+
+  // TODO: remove this section
+  .#{$prefix}--page-header__content__start {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-05;
+  }
+
+  .#{$prefix}--page-header__content__page-actions {
+    display: flex;
+    justify-content: right;
+    /* stylelint-disable-next-line carbon/motion-easing-use */
+    transition: opacity motion(standard, productive) $duration-moderate-02;
+
+    &.#{$prefix}--page-header__content__page-actions--clipped {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    @include breakpoint-down('md') {
+      justify-content: left;
+      margin-block-start: 0;
+    }
+  }
+
+  .#{$prefix}--page-header__content__title-container {
+    display: flex;
+  }
+  ///////////////////////////////
+  ::slotted([slot='icon']) {
+    margin-inline-end: $spacing-05;
+    // TODO: remove above styles when styles from React have been migrated
+    // and use the extend below
+    // @extend .#{$prefix}--page-header__content__icon;
+  }
+
+  ::slotted([slot='contextual-actions']) {
+    display: flex;
+    // TODO: remove above styles when styles from React have been migrated
+    // and use the extend below
+    // @extend .#{$prefix}--page-header__content__contextual-actions;
+  }
+}
+
+:host(#{$prefix}-page-header-content[contextual-actions]) {
+  .#{$prefix}--page-header__content__title {
+    -webkit-line-clamp: 1;
+  }
+}
+
+:host(#{$prefix}-page-header-content[contextual-actions]) {
+  .#{$prefix}--page-header__content__title {
+    -webkit-line-clamp: 1;
+  }
+}
+
+:host(#{$prefix}-page-header-content-text) {
+  @include type-style('body-01');
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__content__body;
+  display: block;
+  margin-block-start: $spacing-05;
+  max-inline-size: convert.to-rem(640px);
+
+  .#{$prefix}--page-header__content__subtitle {
+    @include type-style('productive-heading-03');
+
+    margin-block-end: $spacing-03;
+    // TODO: remove above styles when styles from React have been migrated
+    margin-block-start: 0;
+  }
+}
+
+:host(#{$prefix}-page-header-hero-image) {
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__hero-image;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: flex-end;
+  block-size: 100%;
+}
+
+:host(#{$prefix}-page-header-hero-image)::before {
+  block-size: 0;
+  content: '';
+  float: inline-start;
+  inline-size: 1px;
+  margin-inline-start: -1px;
+
+  padding-block-start: math.percentage(math.div(2, 3));
+
+  @include grid.breakpoint-up('lg') {
+    padding-block-start: math.percentage(math.div(1, 2));
+  }
+}
+
+:host(#{$prefix}-page-header-hero-image)::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+:host(#{$prefix}-page-header-tabs) {
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__tab-bar;
+  .#{$carbon-prefix}--css-grid .#{$carbon-prefix}--css-grid-column {
+    margin: 0;
+  }
+}
+
+:host(#{$prefix}-page-header-tabs) .#{$prefix}--page-header__tab-bar--tablist {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  inline-size: 100%;
+}
+
+:host(#{$prefix}-page-header-tabs) ::slotted([slot='tags']) {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  inline-size: 100%;
+  max-inline-size: 500px;
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__tags;
+}
+
+:host(#{$prefix}-page-header-tabs) ::slotted([slot='scroller']) {
+  position: absolute;
+  inset-inline-end: 0;
+}
+
+:host(#{$prefix}-page-header-breadcrumb),
+:host(#{$prefix}-page-header-content),
+:host(#{$prefix}-page-header-tabs) {
+  .#{$carbon-prefix}--css-grid {
+    inline-size: initial;
+  }
+}
+
+#{$carbon-prefix}-definition-tooltip::part(definition-term) {
+  border: none;
+}
+
+:host(#{$prefix}-page-header-tabs) ::slotted(#{$carbon-prefix}-tabs) {
+  --tabs-overflow-button-background: $layer-01;
+}
+
+@keyframes page-header-title-breadcrumb-animation {
+  0% {
+    opacity: 0;
+    transform: translateY($spacing-05);
+  }
+
+  5% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes page-header-title-breadcrumb-animation-reduced-motion {
+  0% {
+    opacity: 0;
+  }
+
+  5% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// Target browsers that do not yet support animation-timeline: scroll()
+@mixin scroll-fallback {
+  @supports not (animation-timeline: scroll()) {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transform: translateY(0);
+    /* stylelint-disable-next-line */
+    transition: opacity motion(standard, productive) $duration-moderate-01;
+  }
+}
+
+@mixin scroll-animation {
+  @supports (animation-timeline: scroll()) {
+    // Show by default should not have any animation, this means
+    // there was not a page header content element provided
+    animation-direction: alternate;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
+    animation-name: page-header-title-breadcrumb-animation;
+    animation-timeline: scroll(block nearest);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation-name: page-header-title-breadcrumb-animation-reduced-motion;
+      transform: translateY(0);
+    }
+  }
+}
+
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__fallback
+) {
+  @include scroll-fallback();
+}
+
+:host(#{$prefix}-page-header-breadcrumb)
+  .#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions {
+  opacity: 0;
+  visibility: hidden;
+  &.#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions--show {
+    opacity: 1;
+    transform: translateY(0);
+    transition:
+    /* stylelint-disable-next-line */ opacity
+      motion(standard, productive) $duration-moderate-01;
+    visibility: visible;
+  }
+}
+
+:host(#{$prefix}-page-header-title-breadcrumb) {
+  opacity: 0;
+  transform: translateY($spacing-05);
+  transition:
+    /* stylelint-disable-next-line */
+    transform motion(standard, productive) $duration-moderate-01,
+    opacity motion(standard, productive) $duration-moderate-01;
+}
+
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__with-content
+) {
+  // Target browsers that do not yet support animation-timeline: scroll()
+  &.#{$prefix}--page-header-title-breadcrumb-show__fallback {
+    @supports not (animation-timeline: scroll()) {
+      @include scroll-fallback();
+
+      @media (prefers-reduced-motion: reduce) {
+        transform: translateY(0);
+        /* stylelint-disable-next-line */
+        transition: opacity motion(standard, productive) $duration-moderate-01;
+      }
+    }
+  }
+  // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+  @include scroll-animation();
+}
+
+:host(
+  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__by-default
+) {
+  opacity: 1;
+  transform: translateY(0);
+}