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.

151 lines
4.6 KiB

7 months ago
  1. // Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. @mixin make-row($gutter: $grid-gutter-width) {
  5. --#{$prefix}gutter-x: #{$gutter};
  6. --#{$prefix}gutter-y: 0;
  7. display: flex;
  8. flex-wrap: wrap;
  9. // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
  10. margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
  11. margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
  12. margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
  13. }
  14. @mixin make-col-ready() {
  15. // Add box sizing if only the grid is loaded
  16. box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
  17. // Prevent columns from becoming too narrow when at smaller grid tiers by
  18. // always setting `width: 100%;`. This works because we set the width
  19. // later on to override this initial width.
  20. flex-shrink: 0;
  21. width: 100%;
  22. max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
  23. padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  24. padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  25. margin-top: var(--#{$prefix}gutter-y);
  26. }
  27. @mixin make-col($size: false, $columns: $grid-columns) {
  28. @if $size {
  29. flex: 0 0 auto;
  30. width: percentage(divide($size, $columns));
  31. } @else {
  32. flex: 1 1 0;
  33. max-width: 100%;
  34. }
  35. }
  36. @mixin make-col-auto() {
  37. flex: 0 0 auto;
  38. width: auto;
  39. }
  40. @mixin make-col-offset($size, $columns: $grid-columns) {
  41. $num: divide($size, $columns);
  42. margin-left: if($num == 0, 0, percentage($num));
  43. }
  44. // Row columns
  45. //
  46. // Specify on a parent element(e.g., .row) to force immediate children into NN
  47. // number of columns. Supports wrapping to new lines, but does not do a Masonry
  48. // style grid.
  49. @mixin row-cols($count) {
  50. > * {
  51. flex: 0 0 auto;
  52. width: percentage(divide(1, $count));
  53. }
  54. }
  55. // Framework grid generation
  56. //
  57. // Used only by Bootstrap to generate the correct number of grid classes given
  58. // any value of `$grid-columns`.
  59. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  60. @each $breakpoint in map-keys($breakpoints) {
  61. $infix: breakpoint-infix($breakpoint, $breakpoints);
  62. @include media-breakpoint-up($breakpoint, $breakpoints) {
  63. // Provide basic `.col-{bp}` classes for equal-width flexbox columns
  64. .col#{$infix} {
  65. flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
  66. }
  67. .row-cols#{$infix}-auto > * {
  68. @include make-col-auto();
  69. }
  70. @if $grid-row-columns > 0 {
  71. @for $i from 1 through $grid-row-columns {
  72. .row-cols#{$infix}-#{$i} {
  73. @include row-cols($i);
  74. }
  75. }
  76. }
  77. .col#{$infix}-auto {
  78. @include make-col-auto();
  79. }
  80. @if $columns > 0 {
  81. @for $i from 1 through $columns {
  82. .col#{$infix}-#{$i} {
  83. @include make-col($i, $columns);
  84. }
  85. }
  86. // `$columns - 1` because offsetting by the width of an entire row isn't possible
  87. @for $i from 0 through ($columns - 1) {
  88. @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
  89. .offset#{$infix}-#{$i} {
  90. @include make-col-offset($i, $columns);
  91. }
  92. }
  93. }
  94. }
  95. // Gutters
  96. //
  97. // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
  98. @each $key, $value in $gutters {
  99. .g#{$infix}-#{$key},
  100. .gx#{$infix}-#{$key} {
  101. --#{$prefix}gutter-x: #{$value};
  102. }
  103. .g#{$infix}-#{$key},
  104. .gy#{$infix}-#{$key} {
  105. --#{$prefix}gutter-y: #{$value};
  106. }
  107. }
  108. }
  109. }
  110. }
  111. @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
  112. @each $breakpoint in map-keys($breakpoints) {
  113. $infix: breakpoint-infix($breakpoint, $breakpoints);
  114. @include media-breakpoint-up($breakpoint, $breakpoints) {
  115. @if $columns > 0 {
  116. @for $i from 1 through $columns {
  117. .g-col#{$infix}-#{$i} {
  118. grid-column: auto / span $i;
  119. }
  120. }
  121. // Start with `1` because `0` is an invalid value.
  122. // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
  123. @for $i from 1 through ($columns - 1) {
  124. .g-start#{$infix}-#{$i} {
  125. grid-column-start: $i;
  126. }
  127. }
  128. }
  129. }
  130. }
  131. }