_grid.less 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // Container widths
  2. //
  3. // Set the container width, and override it for fixed navbars in media queries.
  4. & when (@enable-grid-classes) {
  5. // Single container class with breakpoint max-widths
  6. .container,
  7. // 100% wide container at all breakpoints
  8. .container-fluid {
  9. #make-container();
  10. }
  11. // Responsive containers that are 100% wide until a breakpoint
  12. //@each $breakpoint, $container-max-width in $container-max-widths {
  13. // .container-#{$breakpoint} {
  14. // @extend .container-fluid;
  15. // }
  16. //
  17. // @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
  18. // %responsive-container-#{$breakpoint} {
  19. // max-width: $container-max-width;
  20. // }
  21. //
  22. // @each $name, $width in $grid-breakpoints {
  23. // @if ($container-max-width > $width or $breakpoint == $name) {
  24. // .container#{breakpoint-infix($name, $grid-breakpoints)} {
  25. // @extend %responsive-container-#{$breakpoint};
  26. // }
  27. // }
  28. // }
  29. // }
  30. //}
  31. each(@container-max-widths, #(@container-max-width, @breakpoint) {
  32. .container-@{breakpoint} {
  33. &:extend(.container-fluid all);
  34. }
  35. #media-breakpoint-up(@breakpoint, {
  36. // LESS PORT: Unfortunately we have to use an actual selector here in order to be able to
  37. // `:extend()` it later. This means that the selector is output in the compiled CSS,
  38. // creating a small disparity between the Less and Sass versions.
  39. // LESS PORT: Less cannot currently extend interpolated selectors, however, when a plain
  40. // selector is used this appears to compile correctly anyway. Because of this, the
  41. // `-@{breakpoint}` suffix is omitted from this selector.
  42. \%responsive-container {
  43. max-width: @container-max-width;
  44. }
  45. each(@grid-breakpoints, #(@width, @name) {
  46. & when ((@container-max-width > @width) or (@breakpoint = @name)) {
  47. // LESS PORT: A variable is required here to do the selector interpolation, since an
  48. // expression cannot be interpolated like in the Sass version.
  49. @infix: breakpoint-infix(@name, @grid-breakpoints);
  50. .container@{infix} {
  51. // LESS PORT: Less cannot currently extend interpolated selectors, however, when a
  52. // plain selector is used this appears to compile correctly anyway. Because of
  53. // this, the `-@{breakpoint}` suffix is omitted from this selector.
  54. &:extend(\%responsive-container);
  55. }
  56. }
  57. });
  58. }, @grid-breakpoints);
  59. });
  60. }
  61. // Row
  62. //
  63. // Rows contain your columns.
  64. .row when (@enable-grid-classes) {
  65. #make-row();
  66. }
  67. // Remove the negative margin from default .row, then the horizontal padding
  68. // from all immediate children columns (to prevent runaway style inheritance).
  69. .no-gutters when (@enable-grid-classes) {
  70. margin-right: 0;
  71. margin-left: 0;
  72. > .col,
  73. > [class*="col-"] {
  74. padding-right: 0;
  75. padding-left: 0;
  76. }
  77. }
  78. // Columns
  79. //
  80. // Common styles for small and large grid columns
  81. & when (@enable-grid-classes) {
  82. #make-grid-columns();
  83. }