_hexagon-scheme.scss

/*==
 *== Hexagon
 *== ======================================= ==*/

$hexagon-size: 184px;
$sin60: 0.86602540;
$hexagon-height: $hexagon-size / $sin60;

.hexagon {
  &, * { transition: 0.3s linear; }

  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: $hexagon-size;
  height: $hexagon-size * 2;
  margin-top: -50px;

  &__helper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  &__content {
    position: relative;
    //overflow: hidden;
    visibility: visible;
    color: #ffffff;
    background: $main-color;
    width: 100%;
    height: $hexagon-height;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    @include font(16px, 24px);
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px;

    &::after {
      //content: "";
      background: red url("/design/images/hex-arrow.png");
      width: 25px;
      height: 10px;
      position: absolute;
    }
  }

  &, &__helper { overflow: hidden; visibility: hidden; }
  & { transform: rotate(120deg); }
  &__helper, &__content { transform: rotate(-60deg); }

  &:hover &__content {
    background: lighten($accent-color, 0.7);
  }
}

.hexagon-scheme {
  position: relative;
  height: 614px;
  overflow: hidden;
  $hs: 4px; // half space

  &__item {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: $hexagon-size / -2;
  }
  &__item:nth-child(2) {
    margin-left: -($hexagon-size * 1) - $hs * 0.5;
    top: $hexagon-height * 0.75 + $hs;
    opacity: 0.93;
  }
  &__item:nth-child(3) {
    margin-left: ($hexagon-size * 0) + $hs * 0.5;
    top: $hexagon-height * 0.75 + $hs;
    opacity: 0.93;
  }

  &__item:nth-child(4) {
    margin-left: -($hexagon-size * 2) - $hs * 0.5 * 3;
    top: $hexagon-height * 0.75 + $hs;
    opacity: 0.7;
  }
  &__item:nth-child(5) {
    margin-left: ($hexagon-size * 1) + $hs * 0.5 * 3;
    top: $hexagon-height * 0.75 + $hs;
    opacity: 0.7;
  }

  &__item:nth-child(6) {
    margin-left: -($hexagon-size * 1.5) - $hs * 0.5 * 2;
    top: ($hexagon-height * 0.75 + $hs) * 2;
    opacity: 0.7;
  }
  &__item:nth-child(7) {
    margin-left: ($hexagon-size * 0.5) + $hs * 0.5 * 2;
    top: ($hexagon-height * 0.75 + $hs) * 2;
    opacity: 0.7;
  }
}

@mixin hexagon-scheme-size($hexagon-size) {
  $hexagon-height: $hexagon-size / $sin60;

  .hexagon {
    width: $hexagon-size;
    height: $hexagon-size * 2;
    &__content { height: $hexagon-height; }
  }

  .hexagon-scheme {
    $hs: 4px; // half space

    &__item {
      margin-left: $hexagon-size / -2;
    }
    &__item:nth-child(2) {
      margin-left: -($hexagon-size * 1) - $hs * 0.5;
      top: $hexagon-height * 0.75 + $hs;
    }
    &__item:nth-child(3) {
      margin-left: ($hexagon-size * 0) + $hs * 0.5;
      top: $hexagon-height * 0.75 + $hs;
    }
    &__item:nth-child(4) {
      margin-left: -($hexagon-size * 2) - $hs * 0.5 * 3;
      top: $hexagon-height * 0.75 + $hs;
    }
    &__item:nth-child(5) {
      margin-left: ($hexagon-size * 1) + $hs * 0.5 * 3;
      top: $hexagon-height * 0.75 + $hs;
    }
    &__item:nth-child(6) {
      margin-left: -($hexagon-size * 1.5) - $hs * 0.5 * 2;
      top: ($hexagon-height * 0.75 + $hs) * 2;
    }
    &__item:nth-child(7) {
      margin-left: ($hexagon-size * 0.5) + $hs * 0.5 * 2;
      top: ($hexagon-height * 0.75 + $hs) * 2;
    }
  }
}

@include media-breakpoint-down(lg) {
  @include hexagon-scheme-size(160px);
  .hexagon-scheme { height: 514px; }
  .hexagon { margin-top: -50px;}
  .hexagon__content { @include font(15px); padding: 15px; }
}

@include media-breakpoint-down(sm) {
  @include hexagon-scheme-size(126px);
  .hexagon-scheme { height: 400px; }
  .hexagon { margin-top: -50px;}
  .hexagon__content { @include font(12px); padding: 15px; }
}

@include media-breakpoint-down(xs) {
  @include hexagon-scheme-size(70px);
  .hexagon-scheme { height: 240px; }
  .hexagon { margin-top: -20px;}
  .hexagon__content { @include font(9px); padding: 5px; }
}