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

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

@@ -0,0 +1,288 @@
+//
+// 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/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;
+  display: block;
+  background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
+}
+
+: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) {
+  block-size: convert.to-rem(40px);
+  // 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;
+  }
+
+  .#{$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;
+
+    @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) {
+  margin-inline-start: -$spacing-05;
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__tab-bar;
+}
+
+:host(#{$prefix}-page-header-tabs) .#{$prefix}--page-header__tab-bar--tablist {
+  display: flex;
+  justify-content: space-between;
+  inline-size: 100%;
+
+  // TODO: remove once responsive logic for tags is implemented
+  @include breakpoint-down(md) {
+    flex-direction: column-reverse;
+    grid-gap: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-page-header-tabs) ::slotted([slot='tags']) {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  // TODO: remove above styles when styles from React have been migrated
+  // and use the extend below
+  // @extend .#{$prefix}--page-header__tags;
+  inline-size: 100%;
+
+  // TODO: remove once responsive logic for tags is implemented
+  @include breakpoint-down(md) {
+    justify-content: left;
+  }
+}
+
+: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;
+}