grid.scss 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. $body-width: $page-width - $page-margin-inside - $page-margin-outside;
  2. $body-height: $page-height - $page-margin-top - $page-margin-bottom;
  3. $col-width: ($body-width - (($col-number - 1) * $col-gutter)) / $col-number;
  4. $row-height: ($body-height - (($row-number - 1) * $row-gutter)) / $row-number;
  5. $col-gutter-width: $col-width + $col-gutter;
  6. $row-gutter-height: $row-height + $row-gutter;
  7. /* x classes */
  8. // .create-x-classes($i:0) when($i < $col-number) {
  9. // .x#{i}{
  10. // left: ($i * $col-width) + ($i * $col-gutter);
  11. // }
  12. // .create-x-classes($i + 1);
  13. // }
  14. // .create-x-classes();
  15. @for $i from 0 through $col-number - 1{
  16. .x#{$i}{
  17. left: ($i * $col-width) + ($i * $col-gutter);
  18. }
  19. }
  20. /* y classes */
  21. // .create-y-classes($i:0) when($i < $row-number) {
  22. // .y#{i}{
  23. // top: ($i * $row-height) + ($i * $row-gutter);
  24. // }
  25. // .create-y-classes($i + 1);
  26. // }
  27. // .create-y-classes();
  28. @for $i from 0 through $row-number - 1 {
  29. .y#{$i}{
  30. top: ($i * $row-height) + ($i * $row-gutter);
  31. }
  32. }
  33. /* width classes */
  34. // .create-w-classes($i:1) when($i <= $col-number) {
  35. // .w#{i}{
  36. // width: ($col-width * $i) + ($col-gutter * ($i - 1));
  37. // }
  38. // .create-w-classes($i + 1);
  39. // }
  40. // .create-w-classes();
  41. @for $i from 1 through $col-number {
  42. .w#{$i}{
  43. width: ($col-width * $i) + ($col-gutter * ($i - 1));
  44. }
  45. }
  46. /* height classes */
  47. // .create-h-classes($i:1) when($i <= $row-number) {
  48. // .h#{i}{
  49. // height: ($row-height * $i) + ($row-gutter * ($i - 1));
  50. // }
  51. // .create-h-classes($i + 1);
  52. // }
  53. // .create-h-classes();
  54. @for $i from 1 through $row-number {
  55. .h#{$i}{
  56. height: ($row-height * $i) + ($row-gutter * ($i - 1));
  57. }
  58. }
  59. // .create-grid-classes($prop: left, $class-name: x, $max-size: 100, $i: 0, $offset: 0, $odd: true) when ($offset <= $max-size) {
  60. // .#{class-name}#{i} {
  61. // #{prop}: $offset;
  62. // };
  63. //
  64. // & when ($odd) {
  65. // .create-grid-classes($prop, $class-name, $max-size, $i + 1, $offset + $col-width, false)
  66. // };
  67. //
  68. // & when not ($odd) {
  69. // .create-grid-classes($prop, $class-name, $max-size, $i + 1, $offset + $col-gutter, true)
  70. // };
  71. // }
  72. @mixin create-grid-classes($prop: left, $class-name: x, $max-size: 100, $i: 0, $offset: 0, $odd: true){
  73. $i:0;
  74. .#{$class-name}#{$i} {
  75. #{$prop}: $offset;
  76. };
  77. @while $offset<=$max-size {
  78. $i: $i+1;
  79. @if $odd{
  80. $offset:$offset+$col-width;
  81. $odd:false;
  82. }@else{
  83. $offset:$offset+$col-gutter;
  84. $odd:true;
  85. }
  86. .#{$class-name}#{$i} {
  87. #{$prop}: $offset;
  88. };
  89. }
  90. }
  91. html:not(.facing) .paper:nth-child(odd) .l-1,
  92. html.facing .paper:nth-child(even) .l-1 { left: -( $page-margin-inside + 14pt); }
  93. html:not(.facing) .paper:nth-child(even) .l-1,
  94. html.facing .paper:nth-child(odd) .l-1 { left: -( $page-margin-outside + 14pt); }
  95. // .create-grid-classes(left, l, $body-width);
  96. @include create-grid-classes(left, l, $body-width);
  97. html:not(.facing) .paper:nth-child(odd) .r-1,
  98. html.facing .paper:nth-child(even) .r-1 { right: -( $page-margin-outside + 14pt); }
  99. html:not(.facing) .paper:nth-child(even) .r-1,
  100. html.facing .paper:nth-child(odd) .r-1 { right: -( $page-margin-inside + 14pt); }
  101. // .create-grid-classes(right, r, $body-width);
  102. @include create-grid-classes(right, r, $body-width);
  103. .t-1 { top: -( $page-margin-top + 14pt); }
  104. // .create-grid-classes(top, t, $body-height);
  105. @include create-grid-classes(top, t, $body-height);
  106. .b-1 { bottom: -( $page-margin-bottom + 14pt); }
  107. // .create-grid-classes(bottom, b, $body-height);
  108. @include create-grid-classes(bottom, b, $body-height);
  109. .grid .body {
  110. outline: 1px solid $grid-color;
  111. background-attachment: local;
  112. background-size: 100% $row-gutter-height,
  113. $col-gutter-width 100%,
  114. 100% $row-gutter-height,
  115. $col-gutter-width 100%,
  116. 100% 12pt;
  117. background-position: -1px -1px,
  118. -1px -1px,
  119. -($col-gutter + 0) -($row-gutter + 0),
  120. -($col-gutter + 0) -($row-gutter + 0),
  121. 0 -1px;
  122. background-image: -webkit-linear-gradient(top, $grid-color 1px, transparent 1px),
  123. -webkit-linear-gradient(left, $grid-color 1px, transparent 1px),
  124. -webkit-linear-gradient(top, $grid-color 1px, transparent 1px),
  125. -webkit-linear-gradient(left, $grid-color 1px, transparent 1px),
  126. -webkit-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
  127. background-image: -moz-linear-gradient(top, $grid-color 1px, transparent 1px),
  128. -moz-linear-gradient(left, $grid-color 1px, transparent 1px),
  129. -moz-linear-gradient(top, $grid-color 1px, transparent 1px),
  130. -moz-linear-gradient(left, $grid-color 1px, transparent 1px),
  131. -moz-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
  132. background-image: -ms-linear-gradient(top, $grid-color 1px, transparent 1px),
  133. -ms-linear-gradient(left, $grid-color 1px, transparent 1px),
  134. -ms-linear-gradient(top, $grid-color 1px, transparent 1px),
  135. -ms-linear-gradient(left, $grid-color 1px, transparent 1px),
  136. -ms-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
  137. background-image: -o-linear-gradient(top, $grid-color 1px, transparent 1px),
  138. -o-linear-gradient(left, $grid-color 1px, transparent 1px),
  139. -o-linear-gradient(top, $grid-color 1px, transparent 1px),
  140. -o-linear-gradient(left, $grid-color 1px, transparent 1px),
  141. -o-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
  142. background-image: linear-gradient(to bottom, $grid-color 1px, transparent 1px),
  143. linear-gradient(to right, $grid-color 1px, transparent 1px),
  144. linear-gradient(to bottom, $grid-color 1px, transparent 1px),
  145. linear-gradient(to right, $grid-color 1px, transparent 1px),
  146. linear-gradient(to bottom, $baseline-grid-color 1px, transparent 1px);
  147. }