LESS mixin to position items in circle
A Pen by Jorge Epuñan on CodePen.
.container | |
- (1..10).each do |i| | |
%span #{i} |
LESS mixin to position items in circle
A Pen by Jorge Epuñan on CodePen.
// init mixin | |
.putOnCircle( | |
@nb-items, | |
@circle-size, | |
@item-size | |
) { | |
@half-item: @item-size / 2; | |
@half-parent: @circle-size / 2; | |
position: relative; | |
width: @circle-size; | |
height: @circle-size; | |
padding: 0; | |
border-radius: 50%; | |
list-style: none; | |
box-sizing: content-box; | |
> * { | |
display: block; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: @item-size; | |
height: @item-size; | |
margin: -@half-item; | |
@angle: 360/@nb-items; | |
@rot: 0; | |
.loop (@index) when (@index > 0){ | |
&:nth-of-type(@{index}){ | |
@rotN: (@rot+@angle)*@index; | |
-webkit-transform: | |
rotate(@rotN*1deg) | |
translate(@half-parent) | |
rotate(@rotN*-1deg); | |
} | |
.loop (@index - 1); | |
} | |
.loop(0){} | |
.loop(@nb-items); | |
} | |
} | |
// end mixin, translated from SASS: | |
// http://codepen.io/HugoGiraudel/pen/Bigqr | |
// use | |
@bgcolor: #16a085; | |
.container { | |
.putOnCircle(10, 200px, 40px); | |
border: solid 4px @bgcolor; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%, -50%); | |
span { | |
display: block; | |
border-radius: 50%; | |
background-color: @bgcolor; | |
text-align: center; | |
color: lighten(@bgcolor,80%); | |
text-shadow: darken(@bgcolor,20%) 1px 1px 1px; | |
line-height: 40px; | |
border: lighten(@bgcolor,30%) solid 2px; | |
} | |
} | |
// the rest | |
html,body {height:100%;} | |
body { | |
background: @bgcolor; | |
background: radial-gradient(ellipse at center, lighten(@bgcolor,10%) 0%,@bgcolor 70%); | |
} |