select-dialog.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. [data-component="select-dialog-input"] {
  2. display: flex;
  3. height: 40px;
  4. flex-shrink: 0;
  5. padding: 4px 10px 4px 6px;
  6. align-items: center;
  7. gap: 12px;
  8. align-self: stretch;
  9. border-radius: var(--radius-md);
  10. background: var(--surface-base);
  11. [data-slot="select-dialog-input-container"] {
  12. display: flex;
  13. align-items: center;
  14. gap: 12px;
  15. flex: 1 0 0;
  16. /* [data-slot="select-dialog-icon"] {} */
  17. [data-slot="select-dialog-input"] {
  18. width: 100%;
  19. }
  20. }
  21. /* [data-slot="select-dialog-clear-button"] {} */
  22. }
  23. [data-component="select-dialog"] {
  24. display: flex;
  25. flex-direction: column;
  26. gap: 8px;
  27. [data-slot="select-dialog-empty-state"] {
  28. display: flex;
  29. padding: 32px 160px;
  30. flex-direction: column;
  31. justify-content: center;
  32. align-items: center;
  33. gap: 8px;
  34. align-self: stretch;
  35. [data-slot="select-dialog-message"] {
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. gap: 2px;
  40. color: var(--text-weak);
  41. text-align: center;
  42. /* text-14-regular */
  43. font-family: var(--font-family-sans);
  44. font-size: 14px;
  45. font-style: normal;
  46. font-weight: var(--font-weight-regular);
  47. line-height: var(--line-height-large); /* 142.857% */
  48. letter-spacing: var(--letter-spacing-normal);
  49. }
  50. [data-slot="select-dialog-filter"] {
  51. color: var(--text-strong);
  52. }
  53. }
  54. [data-slot="select-dialog-group"] {
  55. display: flex;
  56. flex-direction: column;
  57. gap: 4px;
  58. [data-slot="select-dialog-header"] {
  59. display: flex;
  60. padding: 4px 8px;
  61. justify-content: space-between;
  62. align-items: center;
  63. align-self: stretch;
  64. color: var(--text-weak);
  65. /* text-12-medium */
  66. font-family: var(--font-family-sans);
  67. font-size: var(--font-size-small);
  68. font-style: normal;
  69. font-weight: var(--font-weight-medium);
  70. line-height: var(--line-height-large); /* 166.667% */
  71. letter-spacing: var(--letter-spacing-normal);
  72. }
  73. [data-slot="select-dialog-list"] {
  74. display: flex;
  75. flex-direction: column;
  76. align-items: flex-start;
  77. gap: 4px;
  78. align-self: stretch;
  79. [data-slot="select-dialog-item"] {
  80. display: flex;
  81. width: 100%;
  82. height: 32px;
  83. padding: 4px 8px 4px 4px;
  84. align-items: center;
  85. &[data-active="true"] {
  86. border-radius: var(--radius-md);
  87. background: var(--surface-raised-base-hover);
  88. }
  89. }
  90. }
  91. }
  92. }