_position.scss 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // Margin utility mixin
  2. @mixin margin-variant($id: 1, $size: $unit-1) {
  3. .m-#{$id} {
  4. margin: $size !important;
  5. }
  6. .mb-#{$id} {
  7. margin-bottom: $size !important;
  8. }
  9. .ml-#{$id} {
  10. margin-left: $size !important;
  11. }
  12. .mr-#{$id} {
  13. margin-right: $size !important;
  14. }
  15. .mt-#{$id} {
  16. margin-top: $size !important;
  17. }
  18. .mx-#{$id} {
  19. margin-left: $size !important;
  20. margin-right: $size !important;
  21. }
  22. .my-#{$id} {
  23. margin-bottom: $size !important;
  24. margin-top: $size !important;
  25. }
  26. }
  27. // Padding utility mixin
  28. @mixin padding-variant($id: 1, $size: $unit-1) {
  29. .p-#{$id} {
  30. padding: $size !important;
  31. }
  32. .pb-#{$id} {
  33. padding-bottom: $size !important;
  34. }
  35. .pl-#{$id} {
  36. padding-left: $size !important;
  37. }
  38. .pr-#{$id} {
  39. padding-right: $size !important;
  40. }
  41. .pt-#{$id} {
  42. padding-top: $size !important;
  43. }
  44. .px-#{$id} {
  45. padding-left: $size !important;
  46. padding-right: $size !important;
  47. }
  48. .py-#{$id} {
  49. padding-bottom: $size !important;
  50. padding-top: $size !important;
  51. }
  52. }