collapsible.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. [data-component="collapsible"] {
  2. width: 100%;
  3. display: flex;
  4. flex-direction: column;
  5. background-color: var(--surface-inset-base);
  6. border: 1px solid var(--border-weaker-base);
  7. transition: background-color 0.15s ease;
  8. border-radius: var(--radius-md);
  9. overflow: clip;
  10. [data-slot="collapsible-trigger"] {
  11. width: 100%;
  12. display: flex;
  13. height: 32px;
  14. padding: 6px 8px 6px 12px;
  15. align-items: center;
  16. align-self: stretch;
  17. cursor: default;
  18. user-select: none;
  19. color: var(--text-base);
  20. /* text-12-medium */
  21. font-family: var(--font-family-sans);
  22. font-size: var(--font-size-small);
  23. font-style: normal;
  24. font-weight: var(--font-weight-medium);
  25. line-height: var(--line-height-large); /* 166.667% */
  26. letter-spacing: var(--letter-spacing-normal);
  27. /* &:hover { */
  28. /* background-color: var(--surface-base); */
  29. /* } */
  30. &:focus-visible {
  31. outline: none;
  32. }
  33. &[data-disabled] {
  34. cursor: not-allowed;
  35. }
  36. [data-slot="collapsible-arrow"] {
  37. width: 24px;
  38. height: 24px;
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. /* [data-slot="collapsible-arrow-icon"] { */
  43. /* } */
  44. }
  45. }
  46. [data-slot="collapsible-content"] {
  47. overflow: hidden;
  48. /* animation: slideUp 250ms ease-out; */
  49. /* &[data-expanded] { */
  50. /* animation: slideDown 250ms ease-out; */
  51. /* } */
  52. }
  53. &[data-variant="ghost"] {
  54. background-color: transparent;
  55. border: none;
  56. > [data-slot="collapsible-trigger"] {
  57. background-color: transparent;
  58. border: none;
  59. padding: 0;
  60. /* &:hover { */
  61. /* color: var(--text-strong); */
  62. /* } */
  63. &:focus-visible {
  64. outline: none;
  65. }
  66. &[data-disabled] {
  67. cursor: not-allowed;
  68. }
  69. }
  70. }
  71. }
  72. @keyframes slideDown {
  73. from {
  74. height: 0;
  75. }
  76. to {
  77. height: var(--kb-collapsible-content-height);
  78. }
  79. }
  80. @keyframes slideUp {
  81. from {
  82. height: var(--kb-collapsible-content-height);
  83. }
  84. to {
  85. height: 0;
  86. }
  87. }