_api.test.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @import "../../functions";
  2. @import "../../variables";
  3. @import "../../variables-dark";
  4. @import "../../maps";
  5. @import "../../mixins";
  6. $utilities: ();
  7. @include describe("utilities/api") {
  8. @include it("generates utilities for each breakpoints") {
  9. $utilities: (
  10. margin: (
  11. property: margin,
  12. values: auto
  13. ),
  14. padding: (
  15. property: padding,
  16. responsive: true,
  17. values: 1rem
  18. ),
  19. font-size: (
  20. property: font-size,
  21. values: (large: 1.25rem),
  22. print: true
  23. )
  24. ) !global;
  25. $grid-breakpoints: (
  26. xs: 0,
  27. sm: 333px,
  28. md: 666px
  29. ) !global;
  30. @include assert() {
  31. @include output() {
  32. @import "../../utilities/api";
  33. }
  34. @include expect() {
  35. // margin is not set to responsive
  36. .margin-auto {
  37. margin: auto !important;
  38. }
  39. // padding is, though
  40. .padding-1rem {
  41. padding: 1rem !important;
  42. }
  43. .font-size-large {
  44. font-size: 1.25rem !important;
  45. }
  46. @media (min-width: 333px) {
  47. .padding-sm-1rem {
  48. padding: 1rem !important;
  49. }
  50. }
  51. @media (min-width: 666px) {
  52. .padding-md-1rem {
  53. padding: 1rem !important;
  54. }
  55. }
  56. @media print {
  57. .font-size-print-large {
  58. font-size: 1.25rem !important;
  59. }
  60. }
  61. }
  62. }
  63. }
  64. }