ice-frontend-react-mobx/src/components/Stepper/Stepper.css

ICE Frontend REACT+MobX

--m-unit: 5px;

.steppers {
  padding: 0;
  margin: 0;
  position: relative;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.28);
  .steppersList {
    display: table;
    width: 100%;
    li {
      display: table-cell;
      line-height: var(--m-unit) * 10;
      vertical-align: top;
      cursor: pointer;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      a {
        display: flex;
        flex-direction: row;
        color: var(--color-black);
        font-size: var(--m-unit) * 1.5;
      }
    }
    .stepIcon {
      display: inline-block;
      flex: flex-grow;
      margin: var(--m-unit) * 3 var(--m-unit);
      width: var(--m-unit) * 3;
      height: var(--m-unit) * 3;
      line-height: var(--m-unit) * 3;
      text-align: center;
      background-color: var(--icon-inactive);
      color: var(--color-white);
      border-radius: 50%;
      font-size: var(--m-unit) * 1.5;
      vertical-align: middle;
    }
    .title {
      flex: flex-grow;
      color: var(--stepper-title-color);
      margin-right: var(--m-unit);
      font-size: var(--m-unit) * 1.75;
      vertical-align: middle;
      * {
        line-height: inherit;
      }
    }
    .optional {
      flex: flex-grow;
      color: var(--optional-step-text-color);
      font-size: var(--m-unit) * 1.5;
      line-height: var(--m-unit) * 1.5;
      margin-top: -(var(--m-unit) * 1.5);
    }
    .title.hasOptional {
      line-height: 50px;
    }
    .connector {
      flex: 1;
      align-self: center;
      height: var(--m-unit) * 0.125;
      background-color: var(--stepper-connector-color);
      line-height: var(--m-unit) * 3;
    }

    li:first-child .stepIcon {
      margin: calc(var(--m-unit) * 3) calc(var(--m-unit) * 3) calc(var(--m-unit) * 3) calc(var(--m-unit) * 3);
    }

    li.active {
      .stepIcon {
        background-color: var(--stepper-icon-color-active);
      }
      .title {
        color: var(--stepper-title-color-active);
      }
    }

    .progress {
      .stepIcon {
        background-color: var(--stepper-icon-progress);
        .iconActionDone {
          line-height: 23px;
          font-size: 16px;
        }
      }
      .title {
        color: var(--stepper-title-progress);
      }
    }
  }

  &.vertical {
    .optional {
      margin: -2.25rem 0 0 4rem;
    }
    .active {
      .steppersList {
        .stepIcon {
          background-color: var(--stepper-icon-color-active);
        }
      }
    }
    .progress {
      .steppersList {
        .stepIcon {
          background-color: var(--stepper-icon-progress);
        }
      }
    }
    .steppersContainer {
      box-shadow: none;

      .stepperContent {
        position: relative;
        padding: 0 1rem 0 4rem;
        &.active {
          min-height: inherit;
        }
        .stepActions {
          margin-top: 2rem;
        }
      }
    }
    .connector {
      position: absolute;
      left: 0;
      width: var(--m-unit) * 0.125;
      height: 100%;
      margin: 0 20px;
      background-color: var(--stepper-connector-color);
    }
    .iconActionDone {
      line-height: 23px;
      font-size: 16px;
    }
  }
}

.steppersContainer {
  margin-top: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 2px 2px rgba(0, 0, 0, 0.28);
  .stepperContent {
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    &.active {
      visibility: visible;
      min-height: 200px;
      width: 100%;
      height: 100%;
      padding: 20px 10px 10px;
    }
  }
}

.vertical .steppersContainer .stepperContent.active {
  min-height: inherit;
}

.caption {
  font-size: 0.8em;
}

.stepActions {
  text-align: right;
  padding-bottom: var(--xs-padding);
  padding-right: var(--xs-padding);
}