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

Styles for Cumulocity IoT applications

.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: @margin-8;
  color: @gray-50;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  a:hover {
    text-decoration: none;
  }
}

// Title
.c8y-wizard-title {
  padding: @margin-8 @margin-base @margin-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: @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: @margin-base auto;
    padding-bottom: 0;
    min-height: 254px;
    max-width: 280px;
  }
}

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

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

    .shadow-border(-1px, @component-border-color);
    .list-group-icon {
      margin-right: @margin-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: @margin-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: @margin-base;
      height: 26px;
      font-size: 24px;
    }
    &:after {
      position: absolute;
      top: 50%;
      right: @margin-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: @margin-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: @margin-base 0;
  border-top: 1px solid fade(@black, 3%);
  background-color: @gray-100;
  hr {
    border-top-color: @gray-80;
  }
  .form-group {
    padding: 0 @margin-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;
      }
    }
  }
}