wizard-navigation-bar.component.vertical.less

/*
 color definitions
 */
@wz-color-default: #E6E6E6;
@wz-color-current: #808080;
@wz-color-done: #339933;
@wz-color-optional: #38ef38;
@wz-color-editing: #FF0000;

/*
 dot definitions
 */
@dot-border-width: 2px;

// small definitions
@small-dot-width: 14px;
@small-dot-height: 14px;

// big definitions
@big-dot-width: 50px;
@big-dot-height: 50px;

/*
 extra distance between the bottom of the dots and the baseline texts
 */
@dot-baseline-distance: 0px;

// padding between text and baseline
@text-margin-left: 15px;
@text-height: 14px;

@distance-between-steps: 10px;

:host.vertical {
  max-width: 280px;
  width: 20%;
  height: 100%;
  position: sticky;
  top: 0;

  .line(@dot-width, @dot-height, @dot-border-width, @line-color) {
    background-color: @line-color;
    content: '';
    position: absolute;
    left: -(@dot-baseline-distance + @dot-height / 2);
    top: @dot-height + @dot-border-width;
    height: calc(100% ~'-' @dot-height + @dot-border-width);
    width: 1px;
  }

  .state-circle(@dot-width, @dot-height) {
    position: absolute;
    top: 0;
    left: -(@dot-baseline-distance + @dot-width);
    width: @dot-width;
    height: @dot-height;
    content: '';
    text-align: center;
    vertical-align: middle;
    line-height: @dot-height;
    transition: 0.25s;
    border-radius: 100%;
  }

  .state-circle-with-border(@dot-border-width, @circle-color) {
    border-width: @dot-border-width;
    border-style: solid;
    border-color: @circle-color;
  }

  .state-circle-with-border-and-content(@dot-border-width, @circle-color) {
    .state-circle-with-border(@dot-border-width, @circle-color);
    color: @circle-color;
  }

  .state-circle-with-background(@circle-color) {
    background-color: @circle-color;
  }

  .state-circle-with-background-and-content(@circle-color) {
    .state-circle-with-background(@circle-color);
    color: black;
  }

  &.small {
    ul.steps-indicator {
      padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @small-dot-height);

      li {
        &:not(:last-child):before {
          .line(@small-dot-width, @small-dot-height, 0, @wz-color-default);
        }

        &:after {
          .state-circle(@small-dot-width, @small-dot-height);
          .state-circle-with-background(@wz-color-default);
        }

        div {
          min-height: @small-dot-height;
        }
      }

      // default steps shouldn't change when hovered, because they aren't clickable
      li.default a:hover {
        color: @wz-color-current;
      }

      li.current:after {
        .state-circle-with-background(@wz-color-current);
      }

      li.done:after {
        .state-circle-with-background(@wz-color-done);
      }

      li.optional:after {
        .state-circle-with-background(@wz-color-optional);
      }

      li.editing:after {
        .state-circle-with-background(@wz-color-editing);
      }
    }
  }

  &.large-filled {
    ul.steps-indicator {
      padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);

      li {
        &:not(:last-child):before {
          .line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
        }

        &:after {
          .state-circle(@big-dot-width, @big-dot-height);
          .state-circle-with-background(@wz-color-default);
        }

        div {
          min-height: @big-dot-height;
        }
      }

      // default steps shouldn't change when hovered, because they aren't clickable
      li.default a:hover {
        color: @wz-color-current;
      }

      li.current:after {
        .state-circle-with-background(@wz-color-current);
      }

      li.done:after {
        .state-circle-with-background(@wz-color-done);
      }

      li.optional:after {
        .state-circle-with-background(@wz-color-optional);
      }

      li.editing:after {
        .state-circle-with-background(@wz-color-editing);
      }
    }
  }

  &.large-empty {
    ul.steps-indicator {
      padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);

      li {
        &:not(:last-child):before {
          .line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
        }

        &:after {
          .state-circle(@big-dot-width, @big-dot-height);
          .state-circle-with-border(@dot-border-width, @wz-color-default);
        }

        div {
          min-height: @big-dot-height + 2 * @dot-border-width;
        }
      }

      // default steps shouldn't change when hovered, because they aren't clickable
      li.default a:hover {
        color: @wz-color-current;
      }

      li.current:after {
        .state-circle-with-border(@dot-border-width, @wz-color-current);
      }

      li.done:after {
        .state-circle-with-border(@dot-border-width, @wz-color-done);
      }

      li.optional:after {
        .state-circle-with-border(@dot-border-width, @wz-color-optional);
      }

      li.editing:after {
        .state-circle-with-border(@dot-border-width, @wz-color-editing);
      }
    }
  }

  &.large-filled-symbols {
    ul.steps-indicator {
      padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);

      li {
        &:not(:last-child):before {
          .line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
        }

        &:after {
          .state-circle(@big-dot-width, @big-dot-height);
          .state-circle-with-background-and-content(@wz-color-default);

          content: attr(step-symbol);
        }

        div {
          min-height: @big-dot-height;
        }
      }

      // default steps shouldn't change when hovered, because they aren't clickable
      li.default a:hover {
        color: @wz-color-current;
      }

      li.current:after {
        .state-circle-with-background-and-content(@wz-color-current);
      }

      li.done:after {
        .state-circle-with-background-and-content(@wz-color-done);
      }

      li.optional:after {
        .state-circle-with-background-and-content(@wz-color-optional);
      }

      li.editing:after {
        .state-circle-with-background-and-content(@wz-color-editing);
      }
    }
  }

  &.large-empty-symbols {
    ul.steps-indicator {
      padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);

      li {
        &:not(:last-child):before {
          .line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
        }

        &:after {
          .state-circle(@big-dot-width, @big-dot-height);
          .state-circle-with-border-and-content(@dot-border-width, @wz-color-default);

          content: attr(step-symbol);
        }

        div {
          min-height: @big-dot-height + 2 * @dot-border-width;
        }
      }

      // default steps shouldn't change when hovered, because they aren't clickable
      li.default a:hover {
        color: @wz-color-current;
      }

      li.current:after {
        .state-circle-with-border-and-content(@dot-border-width, @wz-color-current);
      }

      li.done:after {
        .state-circle-with-border-and-content(@dot-border-width, @wz-color-done);
      }

      li.optional:after {
        .state-circle-with-border-and-content(@dot-border-width, @wz-color-optional);
      }

      li.editing:after {
        .state-circle-with-border-and-content(@dot-border-width, @wz-color-editing);
      }
    }
  }

  ul.steps-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;

    list-style: none;
    margin: auto;

    /* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    li {
      position: relative;

      &:not(:last-child) {
        margin-bottom: 0;
        padding-bottom: @distance-between-steps;
      }

      div {
        display: flex;
        flex-direction: row;
        align-items: center;

        a {
          color: @wz-color-current;
          margin-left: @text-margin-left;
          line-height: @text-height;
          text-decoration: none;
          text-transform: uppercase;
          text-align: left;
          font-weight: bold;
          transition: 0.25s;
          cursor: pointer;

          &:hover {
            color: darken(@wz-color-current, 20%);
          }
        }
      }
    }

    li.default,
    li.current,
    li.editing {
      pointer-events: none;
    }
  }
}