_spacing.less 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. // Margin and Padding
  2. //@each $breakpoint in map-keys($grid-breakpoints) {
  3. // @include media-breakpoint-up($breakpoint) {
  4. // $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  5. //
  6. // @each $prop, $abbrev in (margin: m, padding: p) {
  7. // @each $size, $length in $spacers {
  8. // .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
  9. // .#{$abbrev}t#{$infix}-#{$size},
  10. // .#{$abbrev}y#{$infix}-#{$size} {
  11. // #{$prop}-top: $length !important;
  12. // }
  13. // .#{$abbrev}r#{$infix}-#{$size},
  14. // .#{$abbrev}x#{$infix}-#{$size} {
  15. // #{$prop}-right: $length !important;
  16. // }
  17. // .#{$abbrev}b#{$infix}-#{$size},
  18. // .#{$abbrev}y#{$infix}-#{$size} {
  19. // #{$prop}-bottom: $length !important;
  20. // }
  21. // .#{$abbrev}l#{$infix}-#{$size},
  22. // .#{$abbrev}x#{$infix}-#{$size} {
  23. // #{$prop}-left: $length !important;
  24. // }
  25. // }
  26. // }
  27. //
  28. // // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
  29. // @each $size, $length in $spacers {
  30. // @if $size != 0 {
  31. // .m#{$infix}-n#{$size} { margin: -$length !important; }
  32. // .mt#{$infix}-n#{$size},
  33. // .my#{$infix}-n#{$size} {
  34. // margin-top: -$length !important;
  35. // }
  36. // .mr#{$infix}-n#{$size},
  37. // .mx#{$infix}-n#{$size} {
  38. // margin-right: -$length !important;
  39. // }
  40. // .mb#{$infix}-n#{$size},
  41. // .my#{$infix}-n#{$size} {
  42. // margin-bottom: -$length !important;
  43. // }
  44. // .ml#{$infix}-n#{$size},
  45. // .mx#{$infix}-n#{$size} {
  46. // margin-left: -$length !important;
  47. // }
  48. // }
  49. // }
  50. //
  51. // // Some special margin utils
  52. // .m#{$infix}-auto { margin: auto !important; }
  53. // .mt#{$infix}-auto,
  54. // .my#{$infix}-auto {
  55. // margin-top: auto !important;
  56. // }
  57. // .mr#{$infix}-auto,
  58. // .mx#{$infix}-auto {
  59. // margin-right: auto !important;
  60. // }
  61. // .mb#{$infix}-auto,
  62. // .my#{$infix}-auto {
  63. // margin-bottom: auto !important;
  64. // }
  65. // .ml#{$infix}-auto,
  66. // .mx#{$infix}-auto {
  67. // margin-left: auto !important;
  68. // }
  69. // }
  70. //}
  71. each(map-keys(@grid-breakpoints), #(@breakpoint) {
  72. #media-breakpoint-up(@breakpoint, {
  73. @infix: breakpoint-infix(@breakpoint, @grid-breakpoints);
  74. each({ margin: m; padding: p; }, #(@abbrev, @prop) {
  75. each(@spacers, #(@length, @size) {
  76. .@{abbrev}@{infix}-@{size} { @{prop}: @length !important; }
  77. .@{abbrev}t@{infix}-@{size},
  78. .@{abbrev}y@{infix}-@{size} {
  79. @{prop}-top: @length !important;
  80. }
  81. .@{abbrev}r@{infix}-@{size},
  82. .@{abbrev}x@{infix}-@{size} {
  83. @{prop}-right: @length !important;
  84. }
  85. .@{abbrev}b@{infix}-@{size},
  86. .@{abbrev}y@{infix}-@{size} {
  87. @{prop}-bottom: @length !important;
  88. }
  89. .@{abbrev}l@{infix}-@{size},
  90. .@{abbrev}x@{infix}-@{size} {
  91. @{prop}-left: @length !important;
  92. }
  93. });
  94. });
  95. // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
  96. each(@spacers, #(@length, @size) {
  97. & when not (@size = 0) {
  98. .m@{infix}-n@{size} { margin: -@length !important; }
  99. .mt@{infix}-n@{size},
  100. .my@{infix}-n@{size} {
  101. margin-top: -@length !important;
  102. }
  103. .mr@{infix}-n@{size},
  104. .mx@{infix}-n@{size} {
  105. margin-right: -@length !important;
  106. }
  107. .mb@{infix}-n@{size},
  108. .my@{infix}-n@{size} {
  109. margin-bottom: -@length !important;
  110. }
  111. .ml@{infix}-n@{size},
  112. .mx@{infix}-n@{size} {
  113. margin-left: -@length !important;
  114. }
  115. }
  116. });
  117. // Some special margin utils
  118. .m@{infix}-auto { margin: auto !important; }
  119. .mt@{infix}-auto,
  120. .my@{infix}-auto {
  121. margin-top: auto !important;
  122. }
  123. .mr@{infix}-auto,
  124. .mx@{infix}-auto {
  125. margin-right: auto !important;
  126. }
  127. .mb@{infix}-auto,
  128. .my@{infix}-auto {
  129. margin-bottom: auto !important;
  130. }
  131. .ml@{infix}-auto,
  132. .mx@{infix}-auto {
  133. margin-left: auto !important;
  134. }
  135. });
  136. });