card.css 697 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. .card {
  2. @apply relative;
  3. @apply grid;
  4. @apply items-stretch;
  5. @apply border;
  6. @apply border-tint-300;
  7. @apply bg-white;
  8. @apply shadow-sm;
  9. @apply rounded-sm;
  10. }
  11. .card-details {
  12. @apply overflow-hidden;
  13. }
  14. .card-details-overflow {
  15. @apply grid;
  16. @apply gap-4;
  17. @apply p-6;
  18. @apply overflow-x-auto;
  19. }
  20. .card-danger {
  21. @apply bg-red-400 text-white;
  22. }
  23. @screen md {
  24. .card {
  25. grid-template-columns: 16rem 1fr;
  26. }
  27. .card-has-header {
  28. grid-template-rows: auto 1fr;
  29. }
  30. .card.card-no-props {
  31. @apply block;
  32. }
  33. .card-header {
  34. @apply span-2;
  35. }
  36. .card-details-overflow {
  37. @apply p-8;
  38. }
  39. }