@carbon/ibm-products-styles 2.76.0 → 2.77.0-rc.0

package/scss/components/Tearsheet/_tearsheet.scss

@@ -1,464 +0,0 @@
-// stylelint-disable carbon/motion-duration-use, carbon/motion-easing-use
-
-//
-// Copyright IBM Corp. 2020, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/utilities';
-@use '../../global/styles/project-settings' as *;
-@use '../../global/styles/mixins' as *;
-
-// Tearsheets use the following IBM Products components:
-// ActionSet
-@use '../ActionSet/action-set';
-
-@use './tearsheet_next';
-
-$block-class: #{$pkg-prefix}--tearsheet;
-
-// stylelint-disable-next-line carbon/theme-use
-$motion-duration: $duration-moderate-02;
-
-@include block-wrap($block-class) {
-  &.#{$block-class} {
-    --overlay-color: #{$overlay};
-    --overlay-opacity: 1;
-
-    &::before {
-      position: absolute;
-      display: block;
-      background: var(--overlay-color);
-      content: '';
-      inset: 0;
-      opacity: var(--overlay-opacity);
-
-      transition:
-        background-color $motion-duration motion(exit, expressive),
-        opacity $motion-duration motion(exit, expressive);
-
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-
-    &:not(.is-visible) {
-      &.#{$block-class}.#{$block-class} .#{$block-class}__container {
-        // we want the enter/leave animation to run up most of the height of the
-        // viewport, capped at 500px to set an upper limit on the movement speed
-        // For the reason for calc() see https://github.com/sass/sass/issues/2849
-        // and https://github.com/sass/node-sass/issues/2815.
-        // stylelint-disable-next-line carbon/layout-use
-        transform: translate3d(0, calc(min(95vh, 500px)), 0);
-      }
-    }
-
-    &.#{$block-class}.#{$block-class} {
-      /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
-      background: initial;
-    }
-
-    z-index: utilities.z('modal') + 1;
-    align-items: flex-end;
-    color: $text-primary;
-    transition:
-      visibility 0s linear $motion-duration,
-      background-color $motion-duration motion(exit, expressive),
-      opacity $motion-duration motion(exit, expressive);
-    --#{$block-class}--stacking-scale-factor-single: 0.95;
-    --#{$block-class}--stacking-scale-factor-double: 0.9;
-  }
-
-  &.is-visible {
-    z-index: utilities.z('modal');
-    align-items: flex-end;
-    transition:
-      visibility 0s linear,
-      background-color $motion-duration motion(entrance, expressive),
-      opacity $motion-duration motion(entrance, expressive);
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-  }
-
-  &.#{$block-class}--stacked-1-of-2 {
-    --overlay-opacity: 0.67;
-
-    z-index: utilities.z('modal') - 1;
-  }
-
-  &.#{$block-class}--stacked-1-of-3 {
-    --overlay-opacity: 0.22;
-
-    z-index: utilities.z('modal') - 2;
-  }
-
-  &.#{$block-class}--stacked-2-of-3 {
-    --overlay-opacity: 0.5;
-
-    z-index: utilities.z('modal') - 1;
-  }
-
-  &.#{$block-class}--stacked-2-of-2,
-  &.#{$block-class}--stacked-3-of-3 {
-    --overlay-opacity: 0.5;
-  }
-
-  .#{$block-class}__container {
-    block-size: 100%;
-    inset-block-start: auto;
-    max-block-size: calc(100% - #{$spacing-09});
-  }
-
-  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
-    .#{$block-class}__container,
-  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-ai-label
-    .#{$block-class}__container {
-    border: 1px solid transparent;
-
-    /* override carbon ai removing background gradient */
-    background:
-      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
-      linear-gradient(
-          to bottom,
-          var(--cds-ai-border-start, #78a9ff),
-          var(--cds-ai-border-end, #d0e2ff)
-        )
-        border-box,
-      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
-    border-block-end: 0;
-    box-shadow: 0 4px 10px 2px $ai-drop-shadow;
-  }
-
-  // extra specificity to ensure this transition overrides the carbon default
-  &.#{$block-class}.#{$block-class} .#{$block-class}__container {
-    transition:
-      transform $motion-duration motion(entrance, expressive),
-      max-height $motion-duration motion(entrance, expressive);
-  }
-
-  &.#{$block-class}--stacked-1-of-2
-    .#{$block-class}__container:not(
-      .#{$block-class}__container--mixed-size-stacking
-    ),
-  &.#{$block-class}--stacked-2-of-3
-    .#{$block-class}__container:not(
-      .#{$block-class}__container--mixed-size-stacking
-    ) {
-    max-block-size: calc(100% - #{$spacing-09} + #{$spacing-05});
-  }
-
-  &.#{$block-class}--stacked-1-of-3
-    .#{$block-class}__container:not(
-      .#{$block-class}__container--mixed-size-stacking
-    ) {
-    max-block-size: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
-  }
-
-  .#{$block-class}__container--lower {
-    max-block-size: calc(100% - (#{$spacing-09} + #{$spacing-08}));
-  }
-
-  &.#{$block-class}--stacked-1-of-2
-    .#{$block-class}__container--lower:not(
-      .#{$block-class}__container--mixed-size-stacking
-    ),
-  &.#{$block-class}--stacked-2-of-3
-    .#{$block-class}__container--lower:not(
-      .#{$block-class}__container--mixed-size-stacking
-    ) {
-    max-block-size: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05}
-    );
-  }
-
-  &.#{$block-class}--stacked-1-of-3
-    .#{$block-class}__container--lower:not(
-      .#{$block-class}__container--mixed-size-stacking
-    ) {
-    max-block-size: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
-    );
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__container {
-    inline-size: 100%;
-  }
-
-  &.#{$block-class}--wide
-    .#{$pkg-prefix}--action-set
-    .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive {
-    block-size: $spacing-11;
-  }
-
-  @include breakpoint(md) {
-    &.#{$block-class}--wide .#{$block-class}__container {
-      inline-size: calc(100% - (2 * #{$spacing-10}));
-    }
-  }
-
-  &.#{$block-class}--stacked-1-of-2.is-visible .#{$block-class}__container,
-  &.#{$block-class}--stacked-2-of-3.is-visible .#{$block-class}__container {
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
-  }
-
-  &.#{$block-class}--stacked-1-of-3.is-visible .#{$block-class}__container {
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
-  }
-
-  .#{$block-class}__header {
-    min-block-size: fit-content;
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__header {
-    padding: $spacing-06 $spacing-07;
-    margin: 0;
-    background-color: $layer;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  &.#{$block-class}--narrow .#{$block-class}__header {
-    padding: $spacing-05;
-    margin: 0;
-    background-color: $layer;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__header-content {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .#{$block-class}__header-fields {
-    flex: 1 1 100%;
-  }
-
-  .#{$block-class}__header-actions {
-    flex: 0 0 auto;
-    padding-inline-start: $spacing-06;
-  }
-
-  // buttons inside button sets in the header action area have 8px gap
-  .#{$block-class}__header-actions
-    .#{$carbon-prefix}--btn-set
-    .#{$carbon-prefix}--btn:not(:first-of-type) {
-    margin-inline-start: $spacing-03;
-  }
-
-  .#{$block-class}__header--no-close-icon {
-    display: none;
-  }
-
-  &.#{$block-class}--wide
-    .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
-    @include type.type-style('heading-04');
-  }
-
-  .#{$block-class}__header-description {
-    display: inline-flex;
-    margin-block-start: $spacing-05;
-    max-inline-size: 100%;
-
-    @include type.type-style('body-compact-01');
-
-    @include breakpoint-up('md') {
-      max-inline-size: 60%;
-    }
-  }
-
-  &.#{$block-class}--narrow .#{$block-class}__header-description {
-    margin-block-start: $spacing-03;
-  }
-
-  .#{$block-class}__header-navigation {
-    margin: $spacing-04 0 0;
-  }
-
-  &.#{$block-class}--wide
-    .#{$block-class}__header.#{$block-class}__header--with-nav {
-    padding: $spacing-06 $spacing-07 0;
-  }
-
-  &.#{$block-class}--wide
-    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
-  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header,
-  &.#{$block-class}--has-ai-label
-    .#{$block-class}__header.#{$block-class}__header {
-    padding-inline-end: $spacing-11;
-  }
-
-  &.#{$block-class}--wide.#{$block-class}--has-slug
-    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
-  &.#{$block-class}--wide.#{$block-class}--has-ai-label
-    .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    /* spacing 11 plus additional space for slug/close */
-    /* stylelint-disable-next-line carbon/layout-use */
-    padding-inline-end: calc(#{$spacing-11 + $spacing-09});
-  }
-
-  &.#{$block-class}--narrow .#{$block-class}__header-description {
-    max-inline-size: 80%;
-  }
-
-  .#{$block-class}__header-navigation {
-    margin: $spacing-04 0 0;
-  }
-
-  // Unfortunately <Layer> creates an extra DOM element.  Try not to let it break
-  // existing layouts.
-  .#{$block-class}__layer {
-    display: contents;
-  }
-
-  &.#{$block-class} .#{$block-class}__body {
-    display: flex;
-    overflow: hidden;
-    flex-direction: row;
-    padding: 0;
-    margin: 0;
-  }
-
-  .#{$block-class}__resize-detector {
-    block-size: 0;
-    inline-size: 100%;
-  }
-
-  .#{$block-class}__influencer {
-    flex: 0 0 257px; // influencer width 256px plus 1px border
-    border-inline-end: 1px solid $border-subtle-01;
-    overflow-y: auto;
-    @supports (overflow-block: auto) {
-      overflow-block: auto;
-    }
-
-    // the normal 80% content width inside modals should not apply to influencer content
-    // apply the class again for higher specificity
-    &.#{$block-class}__influencer p {
-      padding-inline-end: 0;
-    }
-  }
-
-  @include breakpoint-down(md) {
-    .#{$block-class}__container {
-      max-block-size: 100%;
-    }
-
-    .#{$block-class}__influencer {
-      flex-basis: auto;
-    }
-  }
-
-  .#{$block-class}__influencer--wide {
-    flex-basis: 321px; // influencer width 320px plus 1px border
-  }
-
-  .#{$block-class}__right {
-    display: grid;
-    flex-grow: 1;
-    grid-template-columns: 100%;
-    grid-template-rows: 1fr auto;
-  }
-
-  .#{$block-class}__main {
-    display: flex;
-    flex-direction: row;
-    background-color: $background;
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-  }
-
-  &.#{$block-class}--narrow .#{$block-class}__main {
-    background-color: $layer;
-  }
-
-  .#{$block-class}__main .#{$block-class}__influencer {
-    background-color: $layer;
-    border-inline-end: none;
-    border-inline-start: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__content {
-    overflow: auto;
-    flex-grow: 1;
-  }
-
-  &.#{$block-class}--has-slug .#{$block-class}__content,
-  &.#{$block-class}--has-ai-label .#{$block-class}__content {
-    @include utilities.ai-popover-gradient('default', 0);
-
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__content {
-    // Specific to the Tearsheet *and* radio buttons,
-    // `readOnly` styling is not applying a grey outline.
-    .#{$carbon-prefix}--radio-button[readonly]
-      + .#{$carbon-prefix}--radio-button__label
-      .#{$carbon-prefix}--radio-button__appearance {
-      border-color: $icon-disabled;
-    }
-
-    .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {
-      background-color: transparent;
-    }
-
-    // and restore the 'light' prop in case light fields are wanted
-    .#{$carbon-prefix}--text-input--light,
-    .#{$carbon-prefix}--text-area--light,
-    .#{$carbon-prefix}--search--light .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select--light .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown--light,
-    .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
-    /* stylelint-disable-next-line prettier/prettier */
-    .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light
-      .#{$carbon-prefix}--date-picker__input {
-      background-color: $field-02;
-    }
-  }
-
-  .#{$block-class}__button-container {
-    grid-column: 1 / -1;
-    grid-row: -1 / -1;
-    min-block-size: fit-content;
-    overflow-x: auto;
-    @supports (overflow-inline: auto) {
-      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-      overflow-inline: auto;
-    }
-  }
-
-  .#{$block-class}__buttons {
-    display: inline-flex;
-    border-block-start: 1px solid $border-subtle-01;
-    min-inline-size: 100%;
-  }
-
-  &.#{$block-class}--wide .#{$block-class}__buttons {
-    background: $background;
-  }
-
-  &.#{$block-class}--has-slug,
-  &.#{$block-class}--has-ai-label {
-    --overlay-color: #{$ai-overlay};
-  }
-
-  &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
-    .#{$carbon-prefix}--slug,
-  &.#{$block-class}--has-ai-label:not(.#{$block-class}--has-close)
-    .#{$carbon-prefix}--slug {
-    inset-inline-end: 0;
-    /* stylelint-disable-next-line carbon/layout-use */
-    margin-block: 6px;
-    margin-inline-end: $spacing-05;
-  }
-}