/
on-circle.scss
43 lines (37 loc) · 1.1 KB
/
on-circle.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@use "sass:math";
/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
/// @link https://css-tricks.com/snippets/sass/placing-items-circle/
@mixin on-circle($count, $circle-size, $item-size) {
position: relative;
width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none;
> * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -1 * math.div($item-size, 2);
$angle: math.div(360, $count);
$rotation: 0;
@for $i from 1 through $count {
&:nth-of-type(#{$i}) {
transform:
rotate($rotation * 1deg)
translate(math.div($circle-size, 2))
rotate($rotation * -1deg);
}
$rotation: $rotation + $angle;
}
@content;
}
}