_grid.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /// Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. @mixin make-container($gutter: $grid-gutter-width-base) {
  5. margin-left: auto;
  6. margin-right: auto;
  7. padding-left: ($gutter / 2);
  8. padding-right: ($gutter / 2);
  9. @if not $enable-flex {
  10. @include clearfix();
  11. }
  12. }
  13. // For each breakpoint, define the maximum width of the container in a media query
  14. @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  15. @each $breakpoint, $container-max-width in $max-widths {
  16. @include media-breakpoint-up($breakpoint, $breakpoints) {
  17. width: $container-max-width;
  18. max-width: 100%;
  19. }
  20. }
  21. }
  22. @mixin make-gutters($gutters: $grid-gutter-widths) {
  23. @each $breakpoint in map-keys($gutters) {
  24. @include media-breakpoint-up($breakpoint) {
  25. $gutter: map-get($gutters, $breakpoint);
  26. padding-right: ($gutter / 2);
  27. padding-left: ($gutter / 2);
  28. }
  29. }
  30. }
  31. @mixin make-row($gutters: $grid-gutter-widths) {
  32. @if $enable-flex {
  33. display: flex;
  34. flex-wrap: wrap;
  35. } @else {
  36. @include clearfix();
  37. }
  38. @each $breakpoint in map-keys($gutters) {
  39. @include media-breakpoint-up($breakpoint) {
  40. $gutter: map-get($gutters, $breakpoint);
  41. margin-right: ($gutter / -2);
  42. margin-left: ($gutter / -2);
  43. }
  44. }
  45. }
  46. @mixin make-col-ready($gutters: $grid-gutter-widths) {
  47. position: relative;
  48. min-height: 1px; // Prevent collapsing
  49. // Prevent columns from becoming too narrow when at smaller grid tiers by
  50. // always setting `width: 100%;`. This works because we use `flex` values
  51. // later on to override this initial width.
  52. @if $enable-flex {
  53. width: 100%;
  54. }
  55. @each $breakpoint in map-keys($gutters) {
  56. @include media-breakpoint-up($breakpoint) {
  57. $gutter: map-get($gutters, $breakpoint);
  58. padding-right: ($gutter / 2);
  59. padding-left: ($gutter / 2);
  60. }
  61. }
  62. }
  63. @mixin make-col($size, $columns: $grid-columns) {
  64. @if $enable-flex {
  65. flex: 0 0 percentage($size / $columns);
  66. // Add a `max-width` to ensure content within each column does not blow out
  67. // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  68. // do not appear to require this.
  69. max-width: percentage($size / $columns);
  70. } @else {
  71. float: left;
  72. width: percentage($size / $columns);
  73. }
  74. }
  75. @mixin make-col-offset($size, $columns: $grid-columns) {
  76. margin-left: percentage($size / $columns);
  77. }
  78. @mixin make-col-push($size, $columns: $grid-columns) {
  79. left: if($size > 0, percentage($size / $columns), auto);
  80. }
  81. @mixin make-col-pull($size, $columns: $grid-columns) {
  82. right: if($size > 0, percentage($size / $columns), auto);
  83. }
  84. @mixin make-col-modifier($type, $size, $columns) {
  85. // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
  86. @if $type == push {
  87. @include make-col-push($size, $columns);
  88. } @else if $type == pull {
  89. @include make-col-pull($size, $columns);
  90. } @else if $type == offset {
  91. @include make-col-offset($size, $columns);
  92. }
  93. }