index.module.scss 912 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. @use "../theme";
  2. .noResults {
  3. display: flex;
  4. flex-flow: column nowrap;
  5. gap: theme.spacing(4);
  6. align-items: center;
  7. text-align: center;
  8. padding: theme.spacing(24) 0;
  9. .icon {
  10. display: grid;
  11. place-content: center;
  12. padding: theme.spacing(4);
  13. font-size: theme.spacing(6);
  14. border-radius: theme.border-radius("full");
  15. }
  16. .text {
  17. display: flex;
  18. flex-flow: column nowrap;
  19. gap: theme.spacing(2);
  20. .header {
  21. @include theme.text("lg", "medium");
  22. color: theme.color("heading");
  23. }
  24. .body {
  25. @include theme.text("sm", "normal");
  26. color: theme.color("paragraph");
  27. }
  28. }
  29. @each $variant in ("success", "error", "warning", "info", "data") {
  30. &[data-variant="#{$variant}"] {
  31. .icon {
  32. background: theme.color("states", $variant, "background");
  33. color: theme.color("states", $variant, "normal");
  34. }
  35. }
  36. }
  37. }