amis2/scss/components/_wizard.scss

.#{$ns}Wizard {
  @include clearfix();

  position: relative;

  &,
  &-tabs {
    padding: 0;

    .#{$ns}Badge {
      display: inline-block;
      width: $Wizard-badge-size;
      height: $Wizard-badge-size;
      font-size: $Wizard-badge-fontSize;
      line-height: $Wizard-badge-size;
      color: $Wizard-badge-color;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: $Wizard-badge-bg;
      border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
      text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
      margin-right: $Wizard-badge-marginRight;
      border: $Wizard-badge-border;
      box-sizing: content-box;

      // &--primary {
      //     background-color: $primary;
      // }

      // &--secondary {
      //     background-color: $secondary;
      // }

      // &--success {
      //     background-color: $success;
      // }

      // &--info {
      //     background-color: $info;
      // }

      // &--warning {
      //     background-color: $warning;
      // }

      // &--danger {
      //     background-color: $danger;
      // }

      // &--light {
      //     background-color: $light;
      // }

      // &--dark {
      //     background-color: $dark;
      // }
      &.is-active {
        color: $white;
        background-color: $Wizard-badge-onActive-backgroundColor;
      }
    }

    ul li.active {
      color: $info;
    }

    .#{$ns}Panel-footer > .#{$ns}Form-group,
    .#{$ns}Panel-footer > .btn {
      margin-left: px2rem(5px);
    }

    > ul.nav {
      padding: 0;
      margin: 0;
      border: $borderWidth solid $borderColor;

      li {
        position: relative;
        float: left;
        padding: 0 px2rem(15px) 0 px2rem(25px);
        margin: 0;
        color: #999999;
        cursor: pointer;
        height: $Wizard-steps-height;
        line-height: $Wizard-steps-height;

        a {
          border: 0 none !important;
          background: transparent !important;
          color: inherit;
          display: inline;
          padding: 0;

          div {
            display: inline;
          }
        }

        &:first-child {
          padding-left: px2rem(15px);
          border-radius: px2rem(4px) 0 0 0;
        }

        &:before,
        &:after {
          content: '';
          position: absolute;
          right: px2rem(-10px);
          border: px2rem(20px) solid transparent;
          border-right: 0;
          border-left: px2rem(10px) solid $borderColor;
          border-left-color: rgba(0, 0, 0, 0.05);
          z-index: 1;
          bottom: 0;
        }

        &:after {
          right: px2rem(-9px);
          border-left-color: $Wizard-steps-bg;
          z-index: 2;
        }

        &.is-active {
          color: $Wizard-steps-li-onActive-color;
          background: #fff;
        }

        &.is-active:after {
          border-left-color: #fff;
        }
      }

      // .Badge {
      //     margin-right: px2rem(4px);
      // }
    }
  }

  &-steps {
    font-size: $fontSizeBase;
    padding: $Wizard-steps-padding;
    background-color: $Wizard-steps-bg;
    border-bottom: $Wizard-steps-borderWidth solid $borderColor;
    text-align: $Wizard-steps-textAlign;
    @include clearfix();

    ul {
      display: $Wizard-steps-ulDisplay;
      padding: 0;
      margin: 0;
      list-style: none outside none;

      li {
        position: relative;
        float: left;
        padding: 0 px2rem(15px) 0 px2rem(25px);
        margin: 0;
        color: #999999;
        cursor: default;
        height: $Wizard-steps-height;
        line-height: $Wizard-steps-height;

        &:first-child {
          padding-left: px2rem(15px);
          border-radius: px2rem(4px) 0 0 0;
        }

        &:before,
        &:after {
          font-family: $Wizard-steps-liVender;
          content: $Wizard-steps-liAfterContent;
          position: absolute;
          bottom: 0;
          right: px2rem(-10px);
          border: $Wizard-steps-liAfterBorder;
          border-right: 0;
          border-left: px2rem(10px) solid $borderColor;
          border-left-color: rgba(0, 0, 0, 0.05);
          z-index: 2;
        }

        &:after {
          right: px2rem(-9px);
          border-left-color: $Wizard-steps-bg;
          z-index: 2;
        }

        &.is-active {
          color: $Wizard-steps-li-onActive-color;
          background: $Wizard-steps-li-onActive-bg;
        }

        &.is-active:after {
          border-left-color: $Wizard-steps-li-onActive-arrow-bg;
        }

        &.is-complete,
        &.is-complete:hover {
          color: $Wizard-steps-li-onActive-color;
          cursor: pointer;
          background: $Wizard-steps-bg--isComplete;
        }

        &.is-complete:after {
          border-left-color: #f1f5f9;
        }
      }

      // .Badge {
      //     margin-right: px2rem(4px);
      // }
    }
  }

  &-stepContent {
    padding: $Wizard-stepsContent-padding;

    & .Step-pane {
      display: none;

      &.is-active {
        display: inherit;
      }
    }
  }

  &--vertical {
    float: left;
    border-bottom: none;
    margin-bottom: px2rem(30px); // padding: 0;

    &.#{$ns}Wizard-steps {
      height: auto;
    }

    & + .#{$ns}Wizard-stepContent {
      zoom: 1;
      overflow: hidden;
      padding-left: px2rem(40px);
    }

    & li {
      background-color: $Wizard-steps-bg;
    }

    & ul li {
      height: px2rem(40px);
      line-height: px2rem(40px);
      position: relative;
      float: none;
      border-bottom: $borderWidth solid $borderColor;
      padding-left: px2rem(15px); // &:before,
      // &:after {
      // border: px2rem(20px) solid transparent;
      // content: '';
      // }
    }

    & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
      clear: both;
    }
  }
}