web.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .tui-contact-list {
  2. flex: 1;
  3. display: flex;
  4. flex-direction: column;
  5. width: 100%;
  6. height: 100%;
  7. overflow-y: auto;
  8. list-style: none;
  9. &-item {
  10. display: flex;
  11. flex-direction: column;
  12. &-header {
  13. display: flex;
  14. flex-direction: row;
  15. font-size: 14px;
  16. cursor: pointer;
  17. user-select: none;
  18. padding: 10px 15px;
  19. justify-content: space-between;
  20. &-left {
  21. display: flex;
  22. flex-direction: row;
  23. align-items: center;
  24. }
  25. &-right {
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. &-unread {
  30. display: flex;
  31. min-width: 10px;
  32. width: fit-content;
  33. padding: 0 2.5px;
  34. height: 15px;
  35. font-size: 10px;
  36. text-align: center;
  37. line-height: 15px;
  38. border-radius: 7.5px;
  39. background: red;
  40. align-items: center;
  41. justify-content: center;
  42. color: #fff;
  43. }
  44. }
  45. }
  46. &-main {
  47. padding: 0 15px !important;
  48. &.hidden{
  49. display: none;
  50. }
  51. &-item {
  52. padding: 5px 0;
  53. }
  54. }
  55. }
  56. }
  57. .tui-contact-search-list {
  58. padding: 0 15px !important;
  59. &-title {
  60. font-size: 14px;
  61. color: #999;
  62. border-bottom: 1px solid #f4f5f9;
  63. }
  64. &-item {
  65. padding: 5px 0;
  66. }
  67. &-default {
  68. padding: 20px;
  69. text-align: center;
  70. font-size: 14px;
  71. color: #999;
  72. }
  73. }