_grid-framework.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. // Framework grid generation
  2. //
  3. // Used only by Bootstrap to generate the correct number of grid classes given
  4. // any value of `@grid-columns`.
  5. //@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  6. // // Common properties for all breakpoints
  7. // %grid-column {
  8. // position: relative;
  9. // width: 100%;
  10. // padding-right: $gutter / 2;
  11. // padding-left: $gutter / 2;
  12. // }
  13. //
  14. // @each $breakpoint in map-keys($breakpoints) {
  15. // $infix: breakpoint-infix($breakpoint, $breakpoints);
  16. //
  17. // @if $columns > 0 {
  18. // // Allow columns to stretch full width below their breakpoints
  19. // @for $i from 1 through $columns {
  20. // .col#{$infix}-#{$i} {
  21. // @extend %grid-column;
  22. // }
  23. // }
  24. // }
  25. //
  26. // .col#{$infix},
  27. // .col#{$infix}-auto {
  28. // @extend %grid-column;
  29. // }
  30. //
  31. // @include media-breakpoint-up($breakpoint, $breakpoints) {
  32. // // Provide basic `.col-{bp}` classes for equal-width flexbox columns
  33. // .col#{$infix} {
  34. // flex-basis: 0;
  35. // flex-grow: 1;
  36. // max-width: 100%;
  37. // }
  38. //
  39. // @if $grid-row-columns > 0 {
  40. // @for $i from 1 through $grid-row-columns {
  41. // .row-cols#{$infix}-#{$i} {
  42. // @include row-cols($i);
  43. // }
  44. // }
  45. // }
  46. //
  47. // .col#{$infix}-auto {
  48. // @include make-col-auto();
  49. // }
  50. //
  51. // @if $columns > 0 {
  52. // @for $i from 1 through $columns {
  53. // .col#{$infix}-#{$i} {
  54. // @include make-col($i, $columns);
  55. // }
  56. // }
  57. // }
  58. //
  59. // .order#{$infix}-first { order: -1; }
  60. //
  61. // .order#{$infix}-last { order: $columns + 1; }
  62. //
  63. // @for $i from 0 through $columns {
  64. // .order#{$infix}-#{$i} { order: $i; }
  65. // }
  66. //
  67. // @if $columns > 0 {
  68. // // `$columns - 1` because offsetting by the width of an entire row isn't possible
  69. // @for $i from 0 through ($columns - 1) {
  70. // @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
  71. // .offset#{$infix}-#{$i} {
  72. // @include make-col-offset($i, $columns);
  73. // }
  74. // }
  75. // }
  76. // }
  77. // }
  78. // }
  79. //}
  80. #make-grid-columns(@columns: @grid-columns, @gutter: @grid-gutter-width, @breakpoints: @grid-breakpoints) {
  81. // Common properties for all breakpoints
  82. // LESS PORT: Unfortunately we have to use an actual selector here in order to be able to
  83. // `:extend()` it later. This means that the selector is output in the compiled CSS, creating a
  84. // small disparity between the Less and Sass versions.
  85. \%grid-column {
  86. position: relative;
  87. width: 100%;
  88. padding-right: (@gutter / 2);
  89. padding-left: (@gutter / 2);
  90. };
  91. each(map-keys(@breakpoints), #(@breakpoint) {
  92. @infix: breakpoint-infix(@breakpoint, @breakpoints);
  93. & when (@columns > 0) {
  94. // Allow columns to stretch full width below their breakpoints
  95. each(range(@columns), #(@i) {
  96. .col@{infix}-@{i} {
  97. &:extend(\%grid-column);
  98. }
  99. });
  100. }
  101. .col@{infix},
  102. .col@{infix}-auto {
  103. &:extend(\%grid-column);
  104. }
  105. #media-breakpoint-up(@breakpoint, {
  106. // Provide basic `.col-{bp}` classes for equal-width flexbox columns
  107. .col@{infix} {
  108. flex-basis: 0;
  109. flex-grow: 1;
  110. max-width: 100%;
  111. }
  112. & when (@grid-row-columns > 0) {
  113. each(range(@grid-row-columns), #(@i) {
  114. .row-cols@{infix}-@{i} {
  115. #row-cols(@i);
  116. }
  117. });
  118. }
  119. .col@{infix}-auto {
  120. #make-col-auto();
  121. }
  122. & when (@columns > 0) {
  123. each(range(@columns), #(@i) {
  124. .col@{infix}-@{i} {
  125. #make-col(@i, @columns);
  126. }
  127. });
  128. }
  129. .order@{infix}-first { order: -1; }
  130. .order@{infix}-last { order: (@columns + 1); }
  131. each(range(0, @columns), #(@i) {
  132. .order@{infix}-@{i} { order: @i; }
  133. });
  134. & when (@columns > 0) {
  135. // `@columns - 1` because offsetting by the width of an entire row isn't possible
  136. each(range(0, (@columns - 1)), #(@i) {
  137. & when not (@i = 0),
  138. (@i = 0) and not (@infix = ~"") {
  139. .offset@{infix}-@{i} {
  140. #make-col-offset(@i, @columns);
  141. }
  142. }
  143. });
  144. }
  145. });
  146. });
  147. }