@function sqrt($r) {
|
|
$x0: 1;
|
|
$x1: $x0;
|
|
|
|
@for $i from 1 through 10 {
|
|
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
|
|
$x0: $x1;
|
|
}
|
|
|
|
@return $x1;
|
|
}
|
|
|
|
$disabledColor: #efefef;
|
|
$sizeWidth: 104px;
|
|
$border: 1px;
|
|
$sizeHeight: $sizeWidth/sqrt(3);
|
|
|
|
html, body{
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
body{
|
|
background-color: #333;
|
|
}
|
|
.hex {
|
|
float: left;
|
|
margin-left: 3px;
|
|
margin-bottom: -26px;
|
|
|
|
.top {
|
|
width: 0;
|
|
border-bottom: $sizeHeight/2 solid #6C6;
|
|
border-left: $sizeWidth/2 solid transparent;
|
|
border-right: $sizeWidth/2 solid transparent;
|
|
}
|
|
.middle {
|
|
width: $sizeWidth;
|
|
height: $sizeHeight;
|
|
background: #6C6;
|
|
}
|
|
.bottom {
|
|
width: 0;
|
|
border-top: $sizeHeight/2 solid #6C6;
|
|
border-left: $sizeWidth/2 solid transparent;
|
|
border-right: $sizeWidth/2 solid transparent;
|
|
}
|
|
|
|
&.disabled{
|
|
.top{
|
|
@extend .top;
|
|
border-bottom-color: $disabledColor;
|
|
|
|
}
|
|
.middle{
|
|
background: $disabledColor;
|
|
}
|
|
.bottom{
|
|
border-top-color: $disabledColor;
|
|
}
|
|
}
|
|
&-row{
|
|
clear: left;
|
|
&.even {
|
|
margin-left: ($sizeWidth/2)+1;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|