definition-list.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. .definition-list {
  2. @apply grid;
  3. @apply gapx-6;
  4. @apply gapy-2;
  5. }
  6. .definition-list .definition-list {
  7. @apply border-l-2;
  8. @apply border-gray-300;
  9. @apply pl-4;
  10. }
  11. @screen sm {
  12. .definition-list {
  13. grid-template-columns: 8rem 1fr;
  14. }
  15. .definition-list .definition-list {
  16. grid-template-columns: auto 1fr;
  17. }
  18. }
  19. @screen lg {
  20. .definition-list {
  21. grid-template-columns: 14rem 1fr;
  22. }
  23. }
  24. .definition-list-title {
  25. @apply font-semibold;
  26. @apply mb-3;
  27. }
  28. @screen sm {
  29. .definition-list-title {
  30. margin-left: 9.5rem;
  31. }
  32. }
  33. @screen lg {
  34. .definition-list-title {
  35. margin-left: 15.5rem;
  36. }
  37. }
  38. .definition-label {
  39. @apply text-tint-600;
  40. @apply break-words;
  41. @apply leading-tight;
  42. }
  43. @screen sm {
  44. .definition-label {
  45. @apply text-right;
  46. }
  47. }
  48. .definition-value {
  49. @apply break-all;
  50. @apply mb-4;
  51. @apply leading-tight;
  52. }
  53. @screen sm {
  54. .definition-value {
  55. @apply mb-0;
  56. }
  57. }
  58. .definition-label:empty:after,
  59. .definition-value:empty:after {
  60. content: '—';
  61. @apply text-gray-300;
  62. }
  63. .definition-list-empty {
  64. @apply text-gray-300;
  65. }
  66. @screen sm {
  67. .definition-list-empty {
  68. @apply start-2;
  69. }
  70. .definition-list .definition-list .definition-list-empty {
  71. @apply start-1;
  72. }
  73. }