@rossigee/clarity-ui 18.2.1-fixed

package/wizard/_wizard.clarity.scss

@@ -0,0 +1,688 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// NOTE THAT THE MIN-WIDTH OF THE BUTTONS WILL PUSH OUT THE DIALOG IF
+// SET UP IMPROPERLY. THIS IS A KNOWN ISSUE AND USERS SHOULD USE THEIR
+// BEST JUDGMENT WITH BUTTONS IN THE WIZARD. NO MORE THAN THREE...
+// IT'S AN ISSUE WITH THE NUMBER OF BUTTONS, NOT THE LENGTH OF THE TEXT
+// INSIDE THE BUTTONS
+
+@use 'sass:string';
+@use 'sass:meta';
+@use '../modal/variables.modal' as modal-variables;
+@use '../styles/mixins';
+@use '../styles/variables/variables.global';
+@use 'variables.wizard' as wizard-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+// Path from the wizard host to the content-wrapper when going through the modal.
+// Used to scope styles so they don't leak into nested wizard instances.
+$_modal-path: '> clr-modal > .modal > .modal-dialog > .clr-wizard-content-wrapper';
+
+@include meta.load-css('properties.wizard');
+@include mixins.exports('wizard.clarity') {
+  .clr-wizard {
+    .modal-dialog {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      box-shadow: wizard-variables.$clr-wizard-box-shadow;
+      height: 50%;
+      max-height: 100%;
+    }
+
+    .clr-wizard-btn {
+      margin: 0;
+      max-width: 100%;
+      display: block;
+    }
+
+    .clr-wizard-header-action-wrapper {
+      display: inline-flex;
+    }
+
+    .clr-wizard-header-action {
+      @include mixins.min-equilateral(density.$clr-base-icon-size-l);
+
+      border: 0;
+      padding: 0;
+      margin: 0;
+      line-height: density.$clr-base-icon-size-l;
+      font-size: density.$clr-base-icon-size-l;
+      color: wizard-variables.$clr-wizard-header-action-color;
+      transition: color linear 0.2s;
+
+      & a {
+        color: wizard-variables.$clr-wizard-header-action-color;
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: wizard-variables.$clr-wizard-header-action-color--hovered;
+      }
+
+      cds-icon:not([size]),
+      clr-icon:not([size]) {
+        @include mixins.equilateral(density.$clr-base-icon-size-l);
+      }
+    }
+
+    .clr-wizard-stepnav-list {
+      display: flex;
+      flex-direction: column;
+      box-shadow: none;
+      counter-reset: a;
+      white-space: nowrap;
+      height: auto;
+      list-style-type: none;
+      margin: 0;
+      width: 100%;
+      gap: tokens.$cds-global-space-1;
+    }
+
+    .clr-wizard-stepnav-item {
+      display: block;
+      border-left-width: wizard-variables.$clr-wizard-stepnav-border-size;
+      border-left-style: solid;
+      border-color: wizard-variables.$clr-wizard-stepnav-item-border-color;
+      color: wizard-variables.$clr-wizard-stepnav-text;
+      background-color: wizard-variables.$clr-wizard-stepnav-bgcolor;
+
+      button.clr-wizard-stepnav-link {
+        color: inherit;
+        background-color: inherit;
+      }
+
+      &.disabled {
+        color: wizard-variables.$clr-wizard-stepnav-text-disabled;
+      }
+
+      &.active {
+        color: wizard-variables.$clr-wizard-stepnav-text-selected;
+        background-color: wizard-variables.$clr-wizard-stepnav-selected-bgcolor;
+        border-color: wizard-variables.$clr-wizard-stepnav-selected-border-color;
+
+        &:hover {
+          background-color: wizard-variables.$clr-wizard-stepnav-selected-hover-bgcolor;
+        }
+
+        &:active {
+          background-color: wizard-variables.$clr-wizard-stepnav-selected-active-bgcolor;
+        }
+      }
+
+      &:not(.disabled, .active) {
+        &:hover {
+          color: wizard-variables.$clr-wizard-stepnav-text-hover;
+          background-color: wizard-variables.$clr-wizard-stepnav-hover-bgcolor;
+        }
+
+        &:active {
+          color: wizard-variables.$clr-wizard-stepnav-text-active;
+          background-color: wizard-variables.$clr-wizard-stepnav-active-bgcolor;
+        }
+      }
+
+      .clr-wizard-stepnav-link-title {
+        overflow-wrap: break-word;
+        word-break: normal;
+        white-space: normal;
+      }
+
+      &.complete {
+        border-color: wizard-variables.$clr-wizard-stepnav-item-complete-border-color;
+
+        .clr-wizard-stepnav-link-icon {
+          cds-icon,
+          clr-icon {
+            --color: #{wizard-variables.$clr-wizard-stepnav-link-complete-icon-color};
+          }
+        }
+      }
+
+      &.error {
+        border-color: wizard-variables.$clr-wizard-stepnav-item-error-border-color;
+
+        &.active:not(:active, :hover) {
+          background-color: wizard-variables.$clr-wizard-stepnav-selected-error-bgcolor;
+        }
+
+        .clr-wizard-stepnav-link-icon {
+          cds-icon,
+          clr-icon {
+            --color: #{wizard-variables.$clr-wizard-stepnav-link-error-icon-color};
+          }
+        }
+      }
+
+      &.no-click button {
+        pointer-events: none;
+      }
+    }
+
+    .clr-wizard-stepnav-link {
+      width: 100%;
+      display: flex;
+      place-content: normal;
+      color: inherit;
+      align-items: center;
+      text-align: left;
+      text-transform: none;
+      margin: 0;
+      gap: density.$clr-base-gap-s;
+      padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-m;
+      height: auto;
+      max-width: inherit;
+
+      @include mixins.generate-typography-token('BODY-14-MD-STD');
+
+      .clr-wizard-stepnav-link-icon {
+        display: flex;
+      }
+
+      .clr-wizard-stepnav-link-icon,
+      .clr-wizard-stepnav-link-page-number {
+        min-width: density.$clr-base-icon-size-s;
+      }
+
+      .clr-wizard-stepnav-link-page-number {
+        text-align: center;
+      }
+    }
+
+    .clr-wizard-footer-buttons {
+      text-align: right;
+      margin: 0;
+    }
+
+    .clr-wizard-footer-buttons-wrapper {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: density.$clr-base-gap-l;
+
+      &.align-start {
+        justify-content: flex-start;
+      }
+
+      &.align-end {
+        justify-content: flex-end;
+      }
+    }
+
+    .clr-wizard-btn-wrapper {
+      flex: 0 1 auto;
+    }
+
+    .clr-wizard-btn-wrapper[aria-hidden='true'] {
+      display: none;
+    }
+
+    .clr-wizard-btn.btn-link {
+      padding: 0;
+    }
+
+    .clr-wizard-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+    }
+
+    .clr-wizard-page:not([aria-hidden='true']) {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+    }
+
+    .spinner:not(.spinner-inline, .clr-treenode-spinner) {
+      left: calc(50% + #{mixins.baselinePx(115)});
+      position: absolute;
+      top: 40%;
+    }
+  }
+
+  // Structural layout styles scoped to the content-wrapper to prevent
+  // leaking into nested wizard instances.
+  .clr-wizard-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 100%;
+
+    @include mixins.equilateral(100%);
+    // firefox fix
+    max-height: 100%;
+
+    > .clr-wizard-main-content {
+      border-radius: 0 wizard-variables.$clr-wizard-border-radius wizard-variables.$clr-wizard-border-radius 0;
+      box-shadow: none;
+      padding: 0;
+      flex: 2 2 auto;
+      width: 66%;
+      height: initial;
+      overflow: hidden;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    > .clr-wizard-main-content > .clr-wizard-header {
+      flex: 0 0 auto;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      border-bottom: none;
+      gap: density.$clr-base-gap-s;
+      padding: wizard-variables.$clr-wizard-vertical-space wizard-variables.$clr-wizard-horizontal-space 0;
+    }
+
+    > .clr-wizard-main-content .clr-wizard-page-title {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      margin: 0;
+
+      @include mixins.generate-typography-token('SECTION-20-STD');
+    }
+
+    > .clr-wizard-main-content .clr-wizard-page-title-text {
+      display: inline-block;
+      flex: 0 1 auto;
+      width: 100%;
+      outline: none;
+    }
+
+    > .clr-wizard-main-content .clr-wizard-page-title-wrapper {
+      width: 100%;
+    }
+
+    > .clr-wizard-main-content .clr-wizard-header-actions-wrapper {
+      height: density.$clr-base-row-height-s;
+      padding-left: density.$clr-base-horizontal-offset-l;
+      padding-right: density.$clr-base-horizontal-offset-xs;
+    }
+
+    .close {
+      font-size: initial;
+      line-height: initial;
+
+      cds-icon,
+      clr-icon {
+        fill: modal-variables.$clr-modal-close-color;
+
+        &:not([size]) {
+          @include mixins.equilateral(modal-variables.$clr-modal-icon-size);
+        }
+      }
+
+      &:hover {
+        cds-icon,
+        clr-icon {
+          fill: variables.$clr-close-color-hover;
+        }
+
+        &:active {
+          cds-icon,
+          clr-icon {
+            fill: variables.$clr-close-color-active;
+          }
+        }
+      }
+    }
+
+    > .clr-wizard-main-content .clr-wizard-body {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      color: wizard-variables.$clr-wizard-main-text-color;
+      width: 100%;
+      padding: wizard-variables.$clr-wizard-vertical-space wizard-variables.$clr-wizard-horizontal-space;
+    }
+
+    > .clr-wizard-main-content > .clr-wizard-footer {
+      display: block;
+      width: 100%;
+      flex: 0 0 wizard-variables.$clr-wizard-footer-height;
+      height: wizard-variables.$clr-wizard-footer-height;
+      min-height: wizard-variables.$clr-wizard-footer-height;
+      max-height: wizard-variables.$clr-wizard-footer-height;
+      padding: wizard-variables.$clr-wizard-footer-vertical-space wizard-variables.$clr-wizard-horizontal-space;
+      border-top: tokens.$cds-global-space-1 solid wizard-variables.$clr-wizard-stepnav-border-color;
+    }
+
+    > .clr-wizard-main-content > .clr-wizard-body-wrapper {
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      width: 100%;
+      overflow: hidden auto;
+    }
+
+    > .clr-wizard-stepnav-wrapper {
+      flex: 1 1 auto;
+      height: 100%;
+      width: 34%;
+      max-width: 34%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border-right: tokens.$cds-global-space-1 solid wizard-variables.$clr-wizard-stepnav-border-color;
+      background-color: wizard-variables.$clr-wizard-stepnav-bgcolor;
+      border-radius: wizard-variables.$clr-wizard-border-radius 0 0 wizard-variables.$clr-wizard-border-radius;
+    }
+
+    > .clr-wizard-stepnav-wrapper > .clr-wizard-stepnav {
+      padding-left: wizard-variables.$clr-wizard-horizontal-space;
+      display: block;
+      color: wizard-variables.$clr-wizard-stepnav-text;
+      width: 100%;
+      flex: 1 1 auto;
+      overflow-y: auto;
+    }
+
+    > .clr-wizard-stepnav-wrapper > .clr-wizard-title,
+    > .clr-wizard-title-wrapper .clr-wizard-title {
+      margin-top: 0;
+      flex: 0 0 auto;
+      color: wizard-variables.$clr-wizard-title-text;
+      padding: wizard-variables.$clr-wizard-vertical-space wizard-variables.$clr-wizard-horizontal-space;
+
+      @include mixins.generate-typography-token('SECTION-20-STD');
+    }
+  }
+
+  // Sizing — all selectors use either direct child or the full modal path
+  // to avoid leaking into nested wizard instances.
+  .clr-wizard {
+    &.wizard-md {
+      > clr-modal > .modal > .modal-dialog {
+        min-height: wizard-variables.$clr-wizard-all-dialog-min-height;
+        max-height: wizard-variables.$clr-wizard-md-dialog-max-height;
+      }
+
+      #{$_modal-path} > .clr-wizard-main-content,
+      #{$_modal-path} > .clr-wizard-stepnav-wrapper,
+      > .clr-wizard-content-wrapper > .clr-wizard-main-content,
+      > .clr-wizard-content-wrapper > .clr-wizard-stepnav-wrapper {
+        max-height: wizard-variables.$clr-wizard-md-dialog-max-height;
+      }
+
+      #{$_modal-path} > .clr-wizard-stepnav-wrapper,
+      > .clr-wizard-content-wrapper > .clr-wizard-stepnav-wrapper {
+        min-width: wizard-variables.$clr-wizard-md-nav-min-width;
+        max-width: wizard-variables.$clr-wizard-md-nav-max-width;
+      }
+    }
+
+    &.wizard-lg {
+      > clr-modal > .modal > .modal-dialog {
+        min-height: wizard-variables.$clr-wizard-all-dialog-min-height;
+        max-height: wizard-variables.$clr-wizard-lg-dialog-max-height;
+      }
+
+      #{$_modal-path} > .clr-wizard-main-content,
+      #{$_modal-path} > .clr-wizard-stepnav-wrapper,
+      > .clr-wizard-content-wrapper > .clr-wizard-main-content,
+      > .clr-wizard-content-wrapper > .clr-wizard-stepnav-wrapper {
+        max-height: wizard-variables.$clr-wizard-lg-dialog-max-height;
+      }
+
+      #{$_modal-path} > .clr-wizard-stepnav-wrapper,
+      > .clr-wizard-content-wrapper > .clr-wizard-stepnav-wrapper {
+        min-width: wizard-variables.$clr-wizard-lg-nav-min-width;
+        max-width: wizard-variables.$clr-wizard-lg-nav-max-width;
+      }
+    }
+
+    &.wizard-xl {
+      > clr-modal > .modal > .modal-dialog {
+        height: wizard-variables.$clr-wizard-xl-dialog-max-height;
+        max-height: none;
+      }
+
+      #{$_modal-path} > .clr-wizard-stepnav-wrapper,
+      > .clr-wizard-content-wrapper > .clr-wizard-stepnav-wrapper {
+        min-width: wizard-variables.$clr-wizard-xl-nav-min-width;
+        max-width: wizard-variables.$clr-wizard-xl-nav-max-width;
+      }
+    }
+  }
+
+  .clr-wizard-page {
+    & > *:first-child {
+      margin-top: 0;
+
+      & > *:first-child {
+        margin-top: 0;
+      }
+    }
+
+    & > form:first-child {
+      padding-top: 0;
+
+      & > .form-block:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  // Inline wizards are used by vSphere plugins to display a wizard inside an iframe that is inside a modal.
+  .clr-wizard--inline {
+    display: block;
+    width: 100%;
+
+    & > clr-modal > .modal:focus {
+      outline-style: none;
+      outline-color: transparent;
+    }
+
+    clr-modal {
+      @include mixins.equilateral(100%);
+
+      display: block;
+    }
+
+    .modal {
+      padding: 0;
+      position: static;
+      height: 100%;
+      max-height: 100%;
+
+      .content-container {
+        height: 100%;
+
+        .nav-panel {
+          @include mixins.equilateral(99%);
+        }
+      }
+
+      .modal-dialog {
+        min-height: 100%;
+
+        @include mixins.equilateral(100%);
+
+        z-index: auto;
+      }
+    }
+
+    #{$_modal-path} > .clr-wizard-main-content > .clr-wizard-body-wrapper {
+      height: 100%;
+    }
+
+    .close {
+      display: none;
+    }
+
+    .nav.navList {
+      padding-top: 0;
+    }
+
+    .modal-backdrop {
+      @include mixins.equilateral(0);
+
+      display: none;
+    }
+
+    #{$_modal-path} {
+      align-items: stretch;
+      height: 100%;
+    }
+
+    #{$_modal-path} > .clr-wizard-stepnav-wrapper,
+    #{$_modal-path} > .clr-wizard-main-content {
+      min-height: 100%;
+      height: auto;
+      max-height: 100%;
+
+      .clr-wizard-stepnav {
+        height: 100%;
+      }
+    }
+  }
+
+  .clr-wizard--no-shadow {
+    > .clr-wizard-content-wrapper,
+    #{$_modal-path},
+    > clr-modal > .modal > .modal-dialog {
+      box-shadow: none;
+    }
+  }
+
+  .clr-wizard--no-title {
+    > .clr-wizard-content-wrapper .clr-wizard-title,
+    #{$_modal-path} .clr-wizard-title {
+      display: none;
+    }
+
+    > .clr-wizard-content-wrapper .clr-wizard-stepnav,
+    #{$_modal-path} .clr-wizard-stepnav {
+      padding-top: density.$clr-base-vertical-offset-2xl;
+    }
+  }
+
+  .clr-wizard.wizard-horizontal {
+    > .clr-wizard-content-wrapper,
+    #{$_modal-path} {
+      flex-direction: column;
+
+      > .clr-wizard-title-wrapper {
+        display: flex;
+        align-items: center;
+        gap: density.$clr-base-gap-s;
+        padding: wizard-variables.$clr-wizard-vertical-space wizard-variables.$clr-wizard-horizontal-space;
+
+        .clr-wizard-title {
+          flex: 1;
+          padding: 0;
+        }
+      }
+
+      > .clr-wizard-main-content,
+      > .clr-wizard-stepnav-wrapper {
+        width: 100%;
+      }
+
+      > .clr-wizard-stepnav-wrapper {
+        flex: 0;
+        height: unset;
+        max-width: unset;
+        overflow: unset;
+        border-right: 0;
+        border-bottom: tokens.$cds-global-space-1 solid wizard-variables.$clr-wizard-stepnav-border-color;
+        border-radius: wizard-variables.$clr-wizard-border-radius wizard-variables.$clr-wizard-border-radius 0 0;
+
+        .clr-wizard-stepnav {
+          display: flex;
+          position: relative;
+          padding: 0 wizard-variables.$clr-wizard-horizontal-space;
+        }
+
+        .clr-wizard-stepnav-nav {
+          width: 100%;
+        }
+
+        .clr-wizard-stepnav-list {
+          display: flex;
+          flex-direction: row;
+          overflow-x: hidden;
+        }
+
+        .clr-wizard-stepnav-item {
+          flex: 1 0 auto;
+          border-left: 0;
+          border-bottom-width: wizard-variables.$clr-wizard-stepnav-border-size;
+          border-bottom-style: solid;
+
+          .clr-wizard-stepnav-link {
+            padding: density.$clr-base-horizontal-offset-m density.$clr-base-horizontal-offset-2xl
+              density.$clr-base-horizontal-offset-m density.$clr-base-horizontal-offset-m;
+          }
+
+          &:not(.complete, .error) {
+            .clr-wizard-stepnav-link {
+              padding-left: density.$clr-base-horizontal-offset-m;
+            }
+          }
+        }
+
+        .clr-wizard-stepnav-scroll-button-left,
+        .clr-wizard-stepnav-scroll-button-right {
+          position: absolute;
+          padding: 0 density.$clr-base-horizontal-offset-s;
+          background-color: tokens.$cds-alias-object-container-background;
+          height: 100%;
+          margin: 0;
+          z-index: 1;
+
+          &:active {
+            background-color: tokens.$cds-alias-object-interaction-background-active;
+          }
+
+          &:hover {
+            background-color: tokens.$cds-alias-object-interaction-background-hover;
+          }
+        }
+
+        .clr-wizard-stepnav-scroll-button-left {
+          left: density.$clr-base-horizontal-offset-xs;
+        }
+
+        .clr-wizard-stepnav-scroll-button-right {
+          right: density.$clr-base-horizontal-offset-xs;
+        }
+      }
+    }
+  }
+
+  .wizard-in-page {
+    height: 100%;
+
+    @at-root .main-container .content-container .content-area &.wizard-in-page--fill-content-area {
+      display: block;
+      height: calc(100% + #{variables.$clr-content-area-padding-top} + #{variables.$clr-content-area-padding-bottom});
+      margin: calc(-1 * #{variables.$clr-content-area-padding-top})
+        calc(-1 * #{variables.$clr-content-area-padding-right}) calc(-1 * #{variables.$clr-content-area-padding-bottom})
+        calc(-1 * #{variables.$clr-content-area-padding-left});
+      padding: 0;
+    }
+
+    &.wizard-in-page--fill-content-area {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      margin: calc(-1 * #{wizard-variables.$clr-wizard-vertical-space})
+        calc(-1 * #{wizard-variables.$clr-wizard-horizontal-space});
+    }
+  }
+
+  @media screen {
+    .clr-wizard-page[aria-hidden='true'] {
+      display: none;
+    }
+  }
+}