cyb/src/components/appMenu/CircularMenu/CircularMenu.module.scss

ฯ€ 0.0% 116 words ยท 1 min 
.circle {
  position: fixed;
  bottom: 20px;
  width: 220px;
  height: 220px;
  display: inline-flex;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}

.menu {
  --diameter: 140px;
  --i: 23deg; //elements angle
  --delta: 0deg; //second menu layer angle
  list-style-type: none;
  padding: 0;
  display: grid;
  margin: auto;
}

.menu li {
  grid-area: 1/1;
  transform: rotate(calc(var(--rotation-angle) + var(--delta)))
    translateX(var(--diameter))
    rotate(calc(-1 * (var(--rotation-angle) + var(--delta))));
}

.menu li:nth-child(1) {
  --rotation-angle: calc(-5 * var(--i));
}

.menu li:nth-child(2) {
  --rotation-angle: calc(-4 * var(--i));
}

.menu li:nth-child(3) {
  --rotation-angle: calc(-3 * var(--i));
}

.menu li:nth-child(4) {
  --rotation-angle: calc(-2 * var(--i));
}

.menu li:nth-child(5) {
  --rotation-angle: calc(-1 * var(--i));
}

.menu li:nth-child(6) {
  --rotation-angle: calc(0 * var(--i));
}

.menu li:nth-child(7) {
  --rotation-angle: calc(1 * var(--i));
}

Neighbours