townsquare/css/circle.scss

43 lines
675 B
SCSS

@mixin on-circle($item-count) {
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-child(#{$i}) {
transform: rotate($rot * 1deg);
> * {
transform: rotate($rot * -1deg);
}
}
$rot: $rot + $angle;
}
}
.circle {
padding: 0;
width: 100%;
height: 100%;
list-style: none;
overflow: hidden;
position: relative;
margin: 0;
box-sizing: border-box;
li {
position: absolute;
top: 0;
left: 50%;
height: 50%;
transform-origin: 0 100%;
text-align: center;
> * {
margin-left: -100px;
width: 200px;
}
@include on-circle($item-count: 12);
}
}