@c8y/style/styles/core/overlays/_c8y-wizard.less

Styles for Cumulocity IoT applications

@import "../../../variables/_dlt-c8y-icons-vars.less";
@import "../../mixins/_shadows-helper.less";

/**
 * C8Y Wizard - Modal wizard component for multi-step flows
 *
 * Note: Uses @size-* tokens for spacing and @size-base throughout.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (200px, 254px, 280px, 300px, 420px, 600px): Modal and content area sizes
 * - Typography sizes (18px, 24px, 30px): Font sizes for title, icons
 * - Icon dimensions (26px, 30px, 32px, 34px): Icon and app icon sizes
 * - Button widths (80px, 100px): Minimum button widths
 * - Spinner positioning (-20px, -25px): Centering offset
 * - Border widths (1px): Standard borders
 * - Negative margins (-1px, -2px): Fine-tuning
 * - Transition durations (0.25s, 0.3s): Animation timing
 * - Percentages (50%, 100%): Layout and positioning
 * - RGBA values: Transparency
 * - Calculation expressions: Complex computed values
 * - Transform values: Positioning
 */

.c8y-wizard {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  height: 100%;

  .modal-header {
    color: @palette-high;
  }
  .modal-content {
    min-width: 300px;
    border: 0;
    @media (min-width: @screen-sm-min) {
      min-width: 300px;
      max-width: 420px;
      width: auto;
    }
  }
}

// Top navigation on wizard
.c8y-wizard-nav {
  padding: @size-8;
  color: @gray-50;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  a:hover {
    text-decoration: none;
  }
}

// Title
.c8y-wizard-title {
  padding: @size-8 @size-base @size-4;
  background-color: @gray-90;
  text-align: center;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 18px;
  > [class^='dlt-c8y-icon-'],
  > [class*=' dlt-c8y-icon-'] {
    color: var(--brand-primary, var(--c8y-brand-primary));
  }
}

//content
.c8y-wizard-content {
  position: relative;
  overflow: hidden;
  min-height: 200px;

  transition: height 0.3s ease;
  .edition-modal {
    height: calc(~'100vh - 300px');
  }
  .c8y-wizard-panel {
    position: absolute;
    display: none;
    width: 100%;
    height: auto;
    -webkit-animation-duration: 0.25s;
    animation-duration: 0.25s;
    &.active,
    &.animated {
      display: block;
    }
  }
  .drop-zone {
    margin: @size-base auto;
    padding-bottom: 0;
    min-height: 254px;
    max-width: 280px;
  }
}

.c8y-wizard-body {
  padding: @size-4 @size-16;
}

.c8y-wizard-list-nav {
  .list-group-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    margin: 0;
    padding: @size-4 @size-24 @size-4 @size-16;

    .shadow-border(-1px; @component-border-color);
    .list-group-icon {
      margin-right: @size-base;
      max-height: 32px;
      .app-noicon {
        margin: 0;
        width: 30px;
        height: 30px;
        font-size: 18px;
        line-height: 34px;
      }
    }
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'],
    .c8y-icon {
      margin-right: @size-8;
      width: 26px;
      vertical-align: middle;
      font-size: 24px;
    }
    c8y-app-icon .c8y-icon {
      width: 30px;
      font-size: 30px;
    }
    .app-icon {
      display: inline-block;
      margin-top: -2px;
      margin-right: @size-base;
      height: 26px;
      font-size: 24px;
    }
    &:after {
      position: absolute;
      top: 50%;
      right: @size-16;
      display: inline-block;
      color: @gray-50;
      content: @dlt-c8y-icon-angle-right;
      font: normal normal normal 14px/1 @icon-font-family;
      font-size: inherit;
      transform: translate(0, -50%);

      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

.c8y-wizard-footer {
  padding: @size-24;
  box-shadow: inset 0 -1px 0 @component-border-color;
  text-align: center;
  .btn:not(.btn-clean) {
    min-width: 100px;
    @media (max-width: @screen-xs-max) {
      min-width: 80px;
    }
  }
}

.c8y-wizard-form {
  position: relative;
  padding: @size-base 0;
  border-top: 1px solid rgba(@black, (3 / 100));
  background-color: @gray-100;
  hr {
    border-top-color: @gray-80;
  }
  .form-group {
    padding: 0 @size-16;
  }
}

.c8y-wizard-processing {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(@component-background-default, 0.7);
  .spinner {
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -25px;
  }
}

@media screen and (min-width: @screen-sm-min) {
  .c8y-wizard {
    .modal-dialog {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    .modal-content {
      min-width: 420px;
      max-width: 600px;
      .register-devices {
        display: block;
        max-width: 420px;
      }
    }
  }
}