distribute-on-circle.scss

/// Mixin to put items on a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
///
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
@mixin distribute-on-circle($max-items, $circle-size, $item-size) {
  $half-item: ($item-size / 2);
  $half-parent: ($circle-size / 2);

  position: relative; /* 1 */
  width: $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%;
  list-style: none; /* 2 */
  box-sizing: content-box; /* 3 */
  transform: rotate(-90deg);

  > * {
    /* 4 */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: $item-size;
    height: $item-size;
    margin: -$half-item;
  }

  @for $j from 1 through $max-items {
    $angle: (360 / $j);
    $rot: 0;

    > :first-child:nth-last-child(#{$j}) {
        transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg + 90deg);
    }

    $rot: ($rot + $angle);

    @for $i from 2 through $j {
      > :first-child:nth-last-child(#{$j}) ~:nth-of-type(#{$i}) {
        transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg + 90deg);
      }

      $rot: ($rot + $angle);
    }
  }
}