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.
 
 
 
 
 

122 lines
3.5 KiB

  1. //
  2. // Utility classes for margins and padding
  3. //
  4. // scss-lint:disable SpaceAfterPropertyName
  5. // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
  6. // Margin spacer utilities
  7. @for $i from 1 through length($spacers) {
  8. $size: #{map-get($spacers, sp-#{$i - 1})};
  9. $scale: #{$i - 1};
  10. // .m-0, .m-1, .m-2...
  11. .m-#{$scale} { margin: #{$size} !important; }
  12. .mt-#{$scale} { margin-top: #{$size} !important; }
  13. .mr-#{$scale} { margin-right: #{$size} !important; }
  14. .mb-#{$scale} { margin-bottom: #{$size} !important; }
  15. .ml-#{$scale} { margin-left: #{$size} !important; }
  16. .mx-#{$scale} {
  17. margin-right: #{$size} !important;
  18. margin-left: #{$size} !important;
  19. }
  20. .my-#{$scale} {
  21. margin-top: #{$size} !important;
  22. margin-bottom: #{$size} !important;
  23. }
  24. .mxn-#{$scale} {
  25. margin-right: -#{$size} !important;
  26. margin-left: -#{$size} !important;
  27. }
  28. }
  29. .mx-auto {
  30. margin-right: auto !important;
  31. margin-left: auto !important;
  32. }
  33. @each $media-query in map-keys($media-queries) {
  34. @for $i from 1 through length($spacers) {
  35. @include mq($media-query) {
  36. $size: #{map-get($spacers, sp-#{$i - 1})};
  37. $scale: #{$i - 1};
  38. // .m-sm-0, .m-md-1, .m-lg-2...
  39. .m-#{$media-query}-#{$scale} { margin: #{$size} !important; }
  40. .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
  41. .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
  42. .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
  43. .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
  44. .mx-#{$media-query}-#{$scale} {
  45. margin-right: #{$size} !important;
  46. margin-left: #{$size} !important;
  47. }
  48. .my-#{$media-query}-#{$scale} {
  49. margin-top: #{$size} !important;
  50. margin-bottom: #{$size} !important;
  51. }
  52. .mxn-#{$media-query}-#{$scale} {
  53. margin-right: -#{$size} !important;
  54. margin-left: -#{$size} !important;
  55. }
  56. }
  57. }
  58. }
  59. // Padding spacer utilities
  60. @for $i from 1 through length($spacers) {
  61. $size: #{map-get($spacers, sp-#{$i - 1})};
  62. $scale: #{$i - 1};
  63. // .p-0, .p-1, .p-2...
  64. .p-#{$scale} { padding: #{$size} !important; }
  65. .pt-#{$scale} { padding-top: #{$size} !important; }
  66. .pr-#{$scale} { padding-right: #{$size} !important; }
  67. .pb-#{$scale} { padding-bottom: #{$size} !important; }
  68. .pl-#{$scale} { padding-left: #{$size} !important; }
  69. .px-#{$scale} {
  70. padding-right: #{$size} !important;
  71. padding-left: #{$size} !important;
  72. }
  73. .py-#{$scale} {
  74. padding-top: #{$size} !important;
  75. padding-bottom: #{$size} !important;
  76. }
  77. }
  78. @each $media-query in map-keys($media-queries) {
  79. @include mq($media-query) {
  80. @for $i from 1 through length($spacers) {
  81. $size: #{map-get($spacers, sp-#{$i - 1})};
  82. $scale: #{$i - 1};
  83. // .p-sm-0, .p-md-1, .p-lg-2...
  84. .p-#{$media-query}-#{$scale} { padding: #{$size} !important; }
  85. .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
  86. .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
  87. .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
  88. .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
  89. .px-#{$media-query}-#{$scale} {
  90. padding-right: #{$size} !important;
  91. padding-left: #{$size} !important;
  92. }
  93. .py-#{$media-query}-#{$scale} {
  94. padding-top: #{$size} !important;
  95. padding-bottom: #{$size} !important;
  96. }
  97. }
  98. }
  99. }