wizard-navigation-bar.scss

// Temporary variables used to pass parameters from the `define-style` mixin to its content block.
// They will no longer be needed after content arguments support is released:
//
// - https://github.com/sass/sass/issues/871
// - https://github.com/sass/libsass/releases
// - https://github.com/sass/node-sass/releases/
//
// Using global variables is the recommended workaround
//
// - https://github.com/sass/sass/issues/626#issuecomment-345432420
// - https://github.com/sass/sass/issues/871
//
// indicator state: 'default' or 'hover'
$aw-param-indicator-state: null;

// wizard step state: 'default', 'current', 'done' etc.
$aw-param-step-state: null;

@mixin rtl {
  @at-root [dir="rtl"] #{&} {
    @content;
  }
}

// Defines the line that strings together circles representing wizard steps, in the horizontal layout
@mixin aw-horizontal-line($dot-width, $dot-height, $line-color) {
  background-color: $line-color;
  content: '';
  position: absolute;
  height: 1px;
  width: calc(100% - #{$dot-width});
  top: -($dot-height / 2);
  left: calc(50% + #{$dot-width / 2});

  @include rtl {
    left: auto;
    right: calc(50% + #{$dot-width / 2});
  }
}

// Defines the line that strings together circles representing wizard steps, in the vertical layout
@mixin aw-vertical-line($dot-width, $dot-height, $line-color) {
  background-color: $line-color;
  content: '';
  position: absolute;
  left: -($dot-height / 2);
  top: $dot-height;
  height: calc(100% - #{$dot-height});
  width: 1px;

  @include rtl {
    left: auto;
    right: -($dot-height / 2);
  }
}

// Defines a circle representing a wizard step
@mixin aw-circle($dot-width, $dot-height, $dot-border-width) {
  position: absolute;
  width: $dot-width;
  height: $dot-height;
  text-align: center;
  vertical-align: middle;
  line-height: $dot-height - 2 * $dot-border-width;
  transition: 0.25s;
  border-radius: 100%;
}

// Positions a circle in the horizontal layout of the navigation bar
@mixin aw-circle-position-horizontal($dot-width, $dot-height, $dot-border-width) {
  top: -$dot-height;
  left: calc(50% - #{$dot-width / 2});

  @include rtl {
    left: auto;
    right: calc(50% - #{$dot-width / 2});;
  }
}

// Positions a circle in the vertical layout of the navigation bar
@mixin aw-circle-position-vertical($dot-width, $dot-height, $dot-border-width) {
  top: 0;
  left: -$dot-width;

  @include rtl {
    left: auto;
    right: -$dot-width;
  }
}

// Define a step indicator style like 'small', 'large-filled' etc.
//
// Arguments:
//   $layout - 'horizontal' | 'vertical'
//   $width  - step indicator width
//   $height - step indicator height
//   $border-width - step indicator border width
//
// Apart from the arguments, the `define-style` mixin receives a content block,
// which is applied for .step-indicator elements and is expected to customize indicator representation.
// The content block is invoked several times, each time with different arguments passed through global variables:
//
//   - $aw-param-indicator-state - indicator state: 'default' or 'hover'
//   - $aw-param-step-state - wizard step state: 'default', 'current', 'done' etc.
//
// In addition to these variables, the content block can use the following
// variables passed through the `define-style` mixin:
//
//   - $aw-param-indicator-width - equals to $width argument of the `define-style` mixin
//   - $aw-param-indicator-height - equals to $height argument of the `define-style` mixin
//   - $aw-param-indicator-border-width - equals to $border-width argument of the `define-style` mixin
//
@mixin aw-define-style($layout, $width: $aw-big-circle-height, $height: $aw-big-circle-height, $border-width: $aw-circle-border-width) {

  // Make variables accessible from the content block
  $aw-param-indicator-width: $width !global;
  $aw-param-indicator-height: $height !global;
  $aw-param-indicator-border-width: $border-width !global;

  @if ($layout == 'horizontal') {
    padding: ($height + $aw-text-padding-bottom) 0 $aw-text-padding-bottom 0;
  }
  @else if ($layout == 'vertical') {
    padding: ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2 + $height);

    @include rtl {
      padding: ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2 + $height) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2);
    }
  }

  li {
    &:not(:last-child):after {
      @if ($layout == 'horizontal') {
        @include aw-horizontal-line($width, $height, $aw-line-color);
      }
      @else if ($layout == 'vertical') {
        @include aw-vertical-line($width, $height, $aw-line-color);
      }
    }

    @if ($layout == 'vertical') {
      a {
        min-height: $height;
      }
    }

    .step-indicator {
      @if ($layout == 'horizontal') {
        @include aw-circle-position-horizontal($width, $height, $border-width);
      }
      @else if ($layout == 'vertical') {
        @include aw-circle-position-vertical($width, $height, $border-width);
      }

      $aw-param-indicator-state: 'default' !global;
      $aw-param-step-state: 'default' !global;
      @include aw-circle($width, $height, $border-width);
      @content;
    }
    &.optional .step-indicator {
      $aw-param-indicator-state: 'default' !global;
      $aw-param-step-state: 'optional' !global;
      @content;
    }
    &.done .step-indicator {
      $aw-param-indicator-state: 'default' !global;
      $aw-param-step-state: 'done' !global;
      @content;
    }
    &.current .step-indicator {
      $aw-param-indicator-state: 'default' !global;
      $aw-param-step-state: 'current' !global;
      @content;
    }
    &.editing .step-indicator {
      $aw-param-indicator-state: 'default' !global;
      $aw-param-step-state: 'editing' !global;
      @content;
    }
    // 'completed' class takes priority
    // https://github.com/madoar/angular-archwizard/pull/221
    &.completed .step-indicator {
      $aw-param-indicator-state: 'default' !global;
      $aw-param-step-state: 'done' !global;
      @content;
    }

    &.navigable a:hover .step-indicator {
      $aw-param-indicator-state: 'hover' !global;
      $aw-param-step-state: 'default' !global;
      @include aw-circle($width, $height, $border-width);
      @content;
    }
    &.navigable.optional a:hover .step-indicator {
      $aw-param-indicator-state: 'hover' !global;
      $aw-param-step-state: 'optional' !global;
      @content;
    }
    &.navigable.done a:hover .step-indicator {
      $aw-param-indicator-state: 'hover' !global;
      $aw-param-step-state: 'done' !global;
      @content;
    }
    &.navigable.current a:hover .step-indicator {
      $aw-param-indicator-state: 'hover' !global;
      $aw-param-step-state: 'current' !global;
      @content;
    }
    &.navigable.editing a:hover .step-indicator {
      $aw-param-indicator-state: 'hover' !global;
      $aw-param-step-state: 'editing' !global;
      @content;
    }
    // 'completed' class takes priority
    // https://github.com/madoar/angular-archwizard/pull/221
    &.navigable.completed a:hover .step-indicator {
      $aw-param-indicator-state: 'hover' !global;
      $aw-param-step-state: 'done' !global;
      @content;
    }
  }
}


// Define wizard styles specific to the configurated layouts (`$aw-layouts`) and indicator styles (`$aw-indicator-styles`)
@mixin aw-define-styles() {

  // For each layout and indicator style...
  @each $layout in $aw-layouts {
    aw-wizard-navigation-bar.#{$layout} {
      @each $indicator-style in $aw-indicator-styles {
        &.#{$indicator-style} ul.steps-indicator {
          // ...we are emitting CSS styles for `aw-wizard-navigation-bar.<layout>.<indicator-style> ul.steps-indicator`

          // Each indicator style is defined with its specific values (like `$border-width: 0` in this case) and CSS
          // properties.  For indicator style 'small' we only define background color, while for other indicator styles
          // below we define border and/or color properties.  The `aw-define-style` mixin here is used to apply CSS
          // properties in a proper order for each wizard step state ('default', 'current', 'done' etc.)
          @if $indicator-style == 'small' {
            @include aw-define-style($layout, $width: $aw-small-circle-width, $height: $aw-small-circle-height, $border-width: 0) {
              background-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'background-color');
            }
          }

          @else if $indicator-style == 'large-filled' {
            @include aw-define-style($layout, $border-width: 0) {
              background-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'background-color');
            }
          }

          @else if $indicator-style == 'large-empty' {
            @include aw-define-style($layout) {
              $border-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'border-color');
              @if $border-color != null {
                // To optimize CSS output size, do not define any border styles when border-color is null
                border: $aw-param-indicator-border-width solid $border-color;
              }
            }
          }

          @else if $indicator-style == 'large-filled-symbols' {
            @include aw-define-style($layout, $border-width: 0) {
              background-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'background-color');
              color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'symbol-color');
            }
          }

          @else if $indicator-style == 'large-empty-symbols' {
            @include aw-define-style($layout) {
              $border-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'border-color');
              @if $border-color != null {
                // To optimize CSS output size, do not define any border styles when border-color is null
                border: $aw-param-indicator-border-width solid $border-color;
              }
              color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'symbol-color');
            }
          }
        }
      }
    }
  }
}


// Retrieve color from the color definitions map ($aw-colors)
//
// Arguments:
//   $indicator-style: Indicator style: 'small', 'large-filled' etc.
//   $step-state:      Wizard step state: 'default', 'current', 'done' etc.
//   $indicator-state: Indicator state: 'default' or 'hover'
//   $property:        Property to retrieve: 'background-color', 'border-color', 'symbol-color'
//
// Returns:
//   Color value like #E6E6E6 or `null` if
//     - the requested property is not specified in the color definitions map
//     - the corresponding color definitions map entry is explicit `null`
//
@function aw-get-color($indicator-style, $step-state, $indicator-state, $property) {
  //
  // Gather a list of candidate maps to search for the requested property.
  // As documented in archwizard.scss, "Default Colors" section, the order should be as follows:
  //
  // - $aw-colors[$indicator-style][$step-state][$color]
  // - $aw-colors[$indicator-style]['_'][$color]
  // - $aw-colors['_'][$step-state][$color]
  // - $aw-colors['_']['_'][$color]
  //
  // Additional "or ()" expressions are necessary because calling `map-get(null)` causes an SCSS compilation error
  //
  $maps: (
    map-get(map-get($aw-colors, $indicator-style) or (), $step-state) or (),
    map-get(map-get($aw-colors, $indicator-style) or (), '_') or (),
    map-get(map-get($aw-colors, '_') or (), $step-state) or (),
    map-get(map-get($aw-colors, '_') or (), '_') or (),
  );

  // Loop through $maps until we find the requested property
  $key: '#{$property}-#{$indicator-state}';
  @each $map in $maps {
    @if map-has-key($map, $key) {
      @return map-get($map, $key);
    }
  }
  @return null;
}


aw-wizard-navigation-bar {

  ul.steps-indicator {

    // 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;
      pointer-events: none;

      a .label {
        color: $aw-label-color-default;
        line-height: $aw-text-height;
        font-size: $aw-text-height;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
        transition: 0.25s;
      }
    }

    li.navigable {
      pointer-events: auto;

      a {
        cursor: pointer;
      }

      a:hover .label {
        color: $aw-label-color-hover;
      }
    }
  }
}

@if 'horizontal' is in $aw-layouts {
  aw-wizard-navigation-bar.horizontal {

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

      margin: 0;
      width: 100%;
      list-style: none;

      @for $number-of-components from 2 through 10 {
        &.steps-#{$number-of-components} {
          &:after {
            left: 100% / $number-of-components / 2;
            right: 100% / $number-of-components / 2;
          }

          li {
            width: 100% / $number-of-components;
          }
        }
      }

      li {
        margin: 0;
        padding: 0;
        text-align: center;

        a .label {
          display: inline-block;
          padding-top: $aw-text-padding-bottom;
          text-align: center;
        }
      }
    }
  }
}

@if 'vertical' is in $aw-layouts {
  aw-wizard-navigation-bar.vertical {
    max-width: 280px;
    width: 20%;
    height: 100%;
    position: sticky;
    top: 0;

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

      list-style: none;
      margin: auto;

      li {

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

        a {
          // center labels vertically
          display: flex;
          flex-direction: row;
          align-items: center;

          .label {
            margin-left: $aw-text-margin-left;
            text-align: left;

            @include rtl {
              margin-left: 0;
              margin-right: $aw-text-margin-left;
              text-align: right;
            }
          }
        }
      }
    }
  }
}

@include aw-define-styles();