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.

72 lines
1.1 KiB

  1. @function sqrt($r) {
  2. $x0: 1;
  3. $x1: $x0;
  4. @for $i from 1 through 10 {
  5. $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
  6. $x0: $x1;
  7. }
  8. @return $x1;
  9. }
  10. $disabledColor: #efefef;
  11. $sizeWidth: 104px;
  12. $border: 1px;
  13. $sizeHeight: $sizeWidth/sqrt(3);
  14. html, body{
  15. margin: 0;
  16. padding: 0;
  17. height: 100%;
  18. width: 100%;
  19. }
  20. body{
  21. background-color: #333;
  22. }
  23. .hex {
  24. float: left;
  25. margin-left: 3px;
  26. margin-bottom: -26px;
  27. .top {
  28. width: 0;
  29. border-bottom: $sizeHeight/2 solid #6C6;
  30. border-left: $sizeWidth/2 solid transparent;
  31. border-right: $sizeWidth/2 solid transparent;
  32. }
  33. .middle {
  34. width: $sizeWidth;
  35. height: $sizeHeight;
  36. background: #6C6;
  37. }
  38. .bottom {
  39. width: 0;
  40. border-top: $sizeHeight/2 solid #6C6;
  41. border-left: $sizeWidth/2 solid transparent;
  42. border-right: $sizeWidth/2 solid transparent;
  43. }
  44. &.disabled{
  45. .top{
  46. @extend .top;
  47. border-bottom-color: $disabledColor;
  48. }
  49. .middle{
  50. background: $disabledColor;
  51. }
  52. .bottom{
  53. border-top-color: $disabledColor;
  54. }
  55. }
  56. &-row{
  57. clear: left;
  58. &.even {
  59. margin-left: ($sizeWidth/2)+1;
  60. }
  61. }
  62. }