You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.0 KiB
66 lines
1.0 KiB
@disabledColor: #efefef;
|
|
@sizeWidth: 100px;
|
|
@border: 1px;
|
|
@sizeHeight: @sizeWidth/sqrt(3);
|
|
|
|
html, body{
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
body{
|
|
background-color: #333;
|
|
}
|
|
#control{
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 0;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.hex {
|
|
float: left;
|
|
margin-left: @border;
|
|
margin-bottom: -@sizeWidth/4;
|
|
|
|
.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:extend(.middle){
|
|
background: @disabledColor;
|
|
}
|
|
.bottom:extend(.bottom){
|
|
border-top-color: @disabledColor;
|
|
}
|
|
}
|
|
&-row{
|
|
clear: left;
|
|
&.even {
|
|
margin-left: (@sizeWidth/2);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|