space-guides.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. $guide-gutter: 50px !default;
  2. #space-helpers {
  3. pointer-events:none;
  4. position:absolute;
  5. width:100%;
  6. height:100%;
  7. top:0;
  8. left:0;
  9. // display: none;
  10. .guides {
  11. position:absolute;
  12. height:100%;
  13. width: 100%;
  14. top:0;
  15. z-index: 5000;
  16. pointer-events: none !important;
  17. // compensate for border spacing
  18. // width: auto;
  19. // left: -50px;
  20. // right: -50px;
  21. table {
  22. width: 100%; // space width + (border spacing * 2)
  23. height:100%;
  24. position:absolute;
  25. table-layout: auto;
  26. border-collapse: separate;
  27. border-spacing: $guide-gutter 0px;
  28. // border-collapse: collapse;
  29. // border-spacing: 0px 0px;
  30. .column td {
  31. border:1px solid rgba(40,140,215,0.6);;
  32. // background-color:rgba(40,140,215,0.125);
  33. &:first-child {
  34. // border-left:1px solid #448afe;
  35. }
  36. // -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.075), 0 0 10px rgba(255,255,255, 0.075);
  37. }
  38. .margin-top td,
  39. .margin-bottom td {
  40. // background-color:rgba(40,140,215,0.1);
  41. border-top:none;
  42. border-bottom:none;
  43. border-right:1px solid rgba(40,140,215,0.125);
  44. border-left:1px solid rgba(40,140,215,0.125);;
  45. height: $guide-gutter;
  46. }
  47. &.no-gutter .margin-top td:first-child,
  48. &.no-gutter .margin-bottom td:first-child {
  49. border-left:1px solid rgba(40,140,215,0.125);
  50. }
  51. &.no-gutter .column td,
  52. &.no-gutter .margin-top td,
  53. &.no-gutter .margin-bottom td{
  54. border-left:none;
  55. }
  56. }
  57. }
  58. }