<commit_before>@import 'colors/variables';

.ngx-large-format-dialog-content {
  --stepper-header-custom-offset: 0px;
  --stepper-bar-track-offset: 12px;
  --tabs-header-gap: 1.25rem;
  --header-item-max-width: 400px;
  --header-item-max-width-lg: 250px;
  --header-item-max-width-md: 150px;

  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  & .dialog-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: $bg-linear-3;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.25);
    border-radius: 0.125rem;

    &__header {
      max-height: 90px;
      height: 90px;
      border-bottom: 1px solid $color-blue-grey-700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
    }

    &__body {
      flex: 1;
      overflow: auto;
      padding: 0 2rem;
    }

    & .ngx-large-format-dialog-footer {
      max-height: 4rem;
      flex: 0 0 4rem;
      height: 4rem;
      border-top: 1px solid $color-blue-grey-700;
    }

    & .dialog-stepper,
    & .dialog-tabs {
      flex: 1;
      position: relative;
      overflow: hidden;

      &__header {
        & ngx-large-format-dialog-header-title.ngx-large-format-dialog-header-title,
        ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
          max-width: var(--header-item-max-width);
          min-width: var(--header-item-max-width);
        }

        & ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
          position: relative;
          z-index: 1;
        }

        @media screen and (max-width: 1319px) {
          & ngx-large-format-dialog-header-title.ngx-large-format-dialog-header-title,
          ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
            max-width: var(--header-item-max-width-lg);
            min-width: var(--header-item-max-width-lg);
          }
        }

        @media screen and (max-width: 959px) {
          & ngx-large-format-dialog-header-title.ngx-large-format-dialog-header-title,
          ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
            max-width: var(--header-item-max-width-md);
            min-width: var(--header-item-max-width-md);
          }
        }
      }
    }

    & .dialog-stepper {
      & ngx-stepper.ngx-stepper:not(.dialog-stepper--sub) {
        padding: 1rem 0 0;
        margin-top: -5.5rem;
        height: 100%;

        /**
        Semantically, we cannot extract the Stepper's steps + bar from inside the StepperComponent
        and project it inside of our Dialog header. Thus, the width of the Steps and Bar/Track is calculated
        by taking the combination of the following off of the 100% of the dialog width:
        - HeaderTitle + HeaderAction max-width (400px by default)
        - 8rem (outside padding + gap between HeaderTitle, HeaderAction, and the Steps)
        - A custom offset (from both side) that the consumers can pass in to shrink additional width of the steps without increasing the HeaderTitle and HeaderAction max-width
         */
        & > .ngx-stepper--steps {
          margin: auto;
          min-width: calc(100% - ((var(--header-item-max-width) + var(--stepper-header-custom-offset)) * 2) - 8rem);

          & ngx-step.ngx-step {
            & .ngx-step--title {
              padding-top: 0.5rem;
            }
          }
        }

        /**
          The BarTrack has its own offset (default to 12px)
         */
        & > .ngx-stepper--bar-track {
          margin: auto;

          /* prettier-ignore */
          min-width: calc(100% - ((var(--header-item-max-width) + var(--stepper-header-custom-offset)) * 2) - 8rem + var(--stepper-bar-track-offset));

          & .ngx-stepper--bar {
            top: 32px;
          }
        }

        & > .ngx-stepper--content {
          margin-top: 1rem;
          overflow: auto;
          padding: 0 2rem;
        }

        @media screen and (max-width: 1319px) {
          & > .ngx-stepper--steps {
            /* prettier-ignore */
            min-width: calc(100% - ((var(--header-item-max-width-lg) + var(--stepper-header-custom-offset)) * 2) - 8rem);
          }

          & > .ngx-stepper--bar-track {
            /* prettier-ignore */
            min-width: calc(100% - ((var(--header-item-max-width-lg) + var(--stepper-header-custom-offset)) * 2) - 8rem + var(--stepper-bar-track-offset));
          }
        }<commit_msg>Adjust Stepper content margin top in LFD (#623)<commit_after>@import 'colors/variables';

.ngx-large-format-dialog-content {
  --stepper-header-custom-offset: 0px;
  --stepper-bar-track-offset: 12px;
  --tabs-header-gap: 1.25rem;
  --header-item-max-width: 400px;
  --header-item-max-width-lg: 250px;
  --header-item-max-width-md: 150px;

  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  & .dialog-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: $bg-linear-3;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.25);
    border-radius: 0.125rem;

    &__header {
      max-height: 90px;
      height: 90px;
      border-bottom: 1px solid $color-blue-grey-700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
    }

    &__body {
      flex: 1;
      overflow: auto;
      padding: 0 2rem;
    }

    & .ngx-large-format-dialog-footer {
      max-height: 4rem;
      flex: 0 0 4rem;
      height: 4rem;
      border-top: 1px solid $color-blue-grey-700;
    }

    & .dialog-stepper,
    & .dialog-tabs {
      flex: 1;
      position: relative;
      overflow: hidden;

      &__header {
        & ngx-large-format-dialog-header-title.ngx-large-format-dialog-header-title,
        ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
          max-width: var(--header-item-max-width);
          min-width: var(--header-item-max-width);
        }

        & ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
          position: relative;
          z-index: 1;
        }

        @media screen and (max-width: 1319px) {
          & ngx-large-format-dialog-header-title.ngx-large-format-dialog-header-title,
          ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
            max-width: var(--header-item-max-width-lg);
            min-width: var(--header-item-max-width-lg);
          }
        }

        @media screen and (max-width: 959px) {
          & ngx-large-format-dialog-header-title.ngx-large-format-dialog-header-title,
          ngx-large-format-dialog-header-action.ngx-large-format-dialog-header-action {
            max-width: var(--header-item-max-width-md);
            min-width: var(--header-item-max-width-md);
          }
        }
      }
    }

    & .dialog-stepper {
      & ngx-stepper.ngx-stepper:not(.dialog-stepper--sub) {
        padding: 1rem 0 0;
        margin-top: -5.5rem;
        height: 100%;

        /**
        Semantically, we cannot extract the Stepper's steps + bar from inside the StepperComponent
        and project it inside of our Dialog header. Thus, the width of the Steps and Bar/Track is calculated
        by taking the combination of the following off of the 100% of the dialog width:
        - HeaderTitle + HeaderAction max-width (400px by default)
        - 8rem (outside padding + gap between HeaderTitle, HeaderAction, and the Steps)
        - A custom offset (from both side) that the consumers can pass in to shrink additional width of the steps without increasing the HeaderTitle and HeaderAction max-width
         */
        & > .ngx-stepper--steps {
          margin: auto;
          min-width: calc(100% - ((var(--header-item-max-width) + var(--stepper-header-custom-offset)) * 2) - 8rem);

          & ngx-step.ngx-step {
            & .ngx-step--title {
              padding-top: 0.5rem;
            }
          }
        }

        /**
          The BarTrack has its own offset (default to 12px)
         */
        & > .ngx-stepper--bar-track {
          margin: auto;

          /* prettier-ignore */
          min-width: calc(100% - ((var(--header-item-max-width) + var(--stepper-header-custom-offset)) * 2) - 8rem + var(--stepper-bar-track-offset));

          & .ngx-stepper--bar {
            top: 32px;
          }
        }

        & > .ngx-stepper--content {
          margin-top: 1.25rem;
          overflow: auto;
          padding: 0 2rem;
        }

        @media screen and (max-width: 1319px) {
          & > .ngx-stepper--steps {
            /* prettier-ignore */
            min-width: calc(100% - ((var(--header-item-max-width-lg) + var(--stepper-header-custom-offset)) * 2) - 8rem);
          }

          & > .ngx-stepper--bar-track {
            /* prettier-ignore */
            min-width: calc(100% - ((var(--header-item-max-width-lg) + var(--stepper-header-custom-offset)) * 2) - 8rem + var(--stepper-bar-track-offset));
          }
        }
{'fraction_non_alphanumeric': 0.1417409486079014, 'fraction_numerical': 0.026741498844503137, 'mean_word_length': 1.8391127772571072, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3756941', 'n_tokens_mistral': 3200, 'n_tokens_neox': 2934, 'n_words': 585}