_spacing.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. // stylelint-disable declaration-no-important
  2. // Margin and Padding
  3. @each $breakpoint in map-keys($grid-breakpoints) {
  4. @include media-breakpoint-up($breakpoint) {
  5. $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  6. @each $prop, $abbrev in (margin: m, padding: p) {
  7. @each $size, $length in $spacers {
  8. .#{$abbrev}#{$infix}-#{$size} {
  9. #{$prop}: $length !important;
  10. }
  11. .#{$abbrev}t#{$infix}-#{$size},
  12. .#{$abbrev}y#{$infix}-#{$size} {
  13. #{$prop}-top: $length !important;
  14. }
  15. .#{$abbrev}r#{$infix}-#{$size},
  16. .#{$abbrev}x#{$infix}-#{$size} {
  17. #{$prop}-right: $length !important;
  18. }
  19. .#{$abbrev}b#{$infix}-#{$size},
  20. .#{$abbrev}y#{$infix}-#{$size} {
  21. #{$prop}-bottom: $length !important;
  22. }
  23. .#{$abbrev}l#{$infix}-#{$size},
  24. .#{$abbrev}x#{$infix}-#{$size} {
  25. #{$prop}-left: $length !important;
  26. }
  27. }
  28. }
  29. // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
  30. @each $size, $length in $spacers {
  31. @if $size != 0 {
  32. .m#{$infix}-n#{$size} {
  33. margin: -$length !important;
  34. }
  35. .mt#{$infix}-n#{$size},
  36. .my#{$infix}-n#{$size} {
  37. margin-top: -$length !important;
  38. }
  39. .mr#{$infix}-n#{$size},
  40. .mx#{$infix}-n#{$size} {
  41. margin-right: -$length !important;
  42. }
  43. .mb#{$infix}-n#{$size},
  44. .my#{$infix}-n#{$size} {
  45. margin-bottom: -$length !important;
  46. }
  47. .ml#{$infix}-n#{$size},
  48. .mx#{$infix}-n#{$size} {
  49. margin-left: -$length !important;
  50. }
  51. }
  52. }
  53. // Some special margin utils
  54. .m#{$infix}-auto {
  55. margin: auto !important;
  56. }
  57. .mt#{$infix}-auto,
  58. .my#{$infix}-auto {
  59. margin-top: auto !important;
  60. }
  61. .mr#{$infix}-auto,
  62. .mx#{$infix}-auto {
  63. margin-right: auto !important;
  64. }
  65. .mb#{$infix}-auto,
  66. .my#{$infix}-auto {
  67. margin-bottom: auto !important;
  68. }
  69. .ml#{$infix}-auto,
  70. .mx#{$infix}-auto {
  71. margin-left: auto !important;
  72. }
  73. }
  74. }