Calculateur-Talents-Wow/src/components/Arrow.scss

@import "../sass/config";

@function baseRowTopOffset($row) {
  @return $row-offset + ($row * $row-distance);
}

@function calcLeftOffset($col) {
  @return $col-offset + ($col-gutter * ($col - 1)) + $icon-size;
}

@function calcRightOffset($col) {
  @return $col-offset + ($col-distance * $col) + $icon-size;
}

@function calcArrowHeight($length) {
  @return 2px + ($row-offset * $length) + ($icon-size * ($length - 1));
}

@mixin arrow-left {
  background-image: url('../images/arrows/left.png');
  background-position: center left;

  &.arrow--active {
    background-image: url('../images/arrows/left-active.png');
  }

  // Cols
  @for $i from 0 through 3 {
    &[data-col="#{$i}"] { 
      left: -3px + calcLeftOffset($i);
    }
  }
}

@mixin arrow-right {
  background-image: url('../images/arrows/right.png');
  background-position: center right;

  &.arrow--active {
    background-image: url('../images/arrows/right-active.png');
  }

  // Cols
  @for $i from 0 through 3 {
    &[data-col="#{$i}"] { 
      left: 3px + calcRightOffset($i);
    }
  }
}

.arrow {
  $arrow-width: 15px;
  position: absolute;

  &--right,
  &--left {
    height: $arrow-width;

    // Rows
    @for $i from 0 through 6 {
      &[data-row="#{$i}"] {
        top: 12px + baseRowTopOffset($i);
      }
    }

    // Lengths
    @for $i from 0 through 3 {
      &[data-length="#{$i}"] { 
        width: 1px + ($col-gutter * $i) + ($icon-size * ($i - 1));
      }
    }
  }

  &--right {
    @include arrow-right()
  }

  &--left {
    @include arrow-left()
  }

  &--down {
    width: $arrow-width;
    background-image: url('../images/arrows/down.png');
    background-position: center bottom;

    &.arrow--active {
      background-image: url('../images/arrows/down-active.png');
    }

    // Rows
    @for $i from 0 through 6 {
      &[data-row="#{$i}"] {
        top: $icon-size + baseRowTopOffset($i);
      }
    }

    // Cols
    @for $i from 0 through 3 {
      &[data-col="#{$i}"] { 
        left: 5px + $col-offset + ($col-distance * $i) + floor($arrow-width / 2); 
      }
    }

    // Lengths
    @for $i from 0 through 3 {
      &[data-length="#{$i}"] { 
        height: calcArrowHeight($i);
      }
    }
  }

  &--side-down {
    // Position based on row
    @for $i from 0 through 6 {
      &[data-row="#{$i}"] {
        top: 12px + baseRowTopOffset($i);

        &:after {
          top: $arrow-width;
        }
      }
    }

    // Width
    @for $i from 0 through 3 {
      &[data-width="#{$i}"] {
        width: 2px + ($icon-size * $i);
      }
    }

    // Height
    @for $i from 0 through 3 {
      &[data-height="#{$i}"] {
        height: 8px + ($row-offset + ($icon-size * .5)) * $i;
      }
    }

    // Horizontal
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: $arrow-width;
    }

    // Arrow down
    &:after {
      content: "";
      position: absolute;
      width: $arrow-width;
      top: $arrow-width;
      right: 0;
      bottom: -3px;
      background-image: url('../images/arrows/down.png');
      background-position: center bottom;
    }
  }

  &--right-down {
    // Positioning based on cols
    @for $i from 0 through 3 {
      &[data-col="#{$i}"] { 
        left: 2px + calcRightOffset($i);
      }
    }

    &.arrow--active {
      &:before { background-image: url('../images/arrows/rightdown-active.png'); }
      &:after { background-image: url('../images/arrows/down-active.png'); }
    }
    
    // Arrow to the right
    &:before {
      background-image: url('../images/arrows/rightdown.png');
      background-position: center right;
    }

    // Arrow down
    &:after {
      right: 0;
    }
  }

  &--left-down {
    // Positioning based on cols
    @for $i from 0 through 3 {
      &[data-col="#{$i}"] { 
        left: -2px + calcLeftOffset($i);
      }
    }

    &.arrow--active {
      &:before { background-image: url('../images/arrows/leftdown-active.png'); }
      &:after { background-image: url('../images/arrows/down-active.png'); }
    }
    
    // Arrow to the left
    &:before {
      background-image: url('../images/arrows/leftdown.png');
      background-position: center left;
    }

    // Arrow down
    &:after {
      left: 0;
    }
  }
}