- @disabledColor: #FFDDA0;
- @sizeWidth: 100px;
- @border: 1px;
- @sizeHeight: @sizeWidth/sqrt(3);
- @color: #efefef;
-
- 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 @color;
- border-left: @sizeWidth/2 solid transparent;
- border-right: @sizeWidth/2 solid transparent;
- }
- .middle {
- width: @sizeWidth;
- height: @sizeHeight;
- background: @color;
- }
- .bottom {
- width: 0;
- border-top: @sizeHeight/2 solid @color;
- border-left: @sizeWidth/2 solid transparent;
- border-right: @sizeWidth/2 solid transparent;
- }
-
- &.disabled{
- .top:extend(.hex .top){
- border-bottom-color: @disabledColor;
-
- }
- .middle:extend(.hex .middle){
- background: @disabledColor;
- }
- .bottom:extend(.hex .bottom){
- border-top-color: @disabledColor;
- }
- }
- &-row{
- clear: left;
- &.even {
- margin-left: (@sizeWidth/2);
- }
- }
-
-
- }
-
|