web.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. .tui-conversation {
  2. width: 100%;
  3. height: 100%;
  4. flex: 1;
  5. overflow: hidden;
  6. display: flex;
  7. flex-direction: column;
  8. &-list {
  9. overflow: auto;
  10. }
  11. }
  12. .tui-conversation-header {
  13. width: 100%;
  14. position: relative;
  15. .list {
  16. display: flex;
  17. align-items: center;
  18. border-bottom: 1px solid #F4F5F9;
  19. padding: 7px 0;
  20. &-item {
  21. flex: 1;
  22. display: flex;
  23. position: relative;
  24. padding: 7px;
  25. cursor: pointer;
  26. user-select: none;
  27. }
  28. }
  29. &-item{
  30. flex: 1;
  31. display: flex;
  32. align-items: center;
  33. &-title {
  34. padding: 0 8px;
  35. font-size: 16px;
  36. font-weight: normal;
  37. }
  38. }
  39. &-children {
  40. position: absolute;
  41. top: 100%;
  42. z-index: 3;
  43. padding: 7px 9px;
  44. border-bottom: none;
  45. background-color: #fff;
  46. box-shadow: 0 3px 7px 0 #0003;
  47. flex-direction: column;
  48. }
  49. }
  50. .network {
  51. padding: 0 12px;
  52. display: flex;
  53. align-items: center;
  54. .icon-error{
  55. display: flex;
  56. justify-content: center;
  57. align-items: center;
  58. width: 15px;
  59. height: 15px;
  60. border-radius: 15px;
  61. background: red;
  62. color: #fff;
  63. font-style: normal;
  64. }
  65. &-content {
  66. padding: 5px;
  67. font-size: 12px;
  68. line-height: 22px;
  69. }
  70. }
  71. .plus {
  72. display: inline-block;
  73. width: 30px;
  74. height: 30px;
  75. position: relative;
  76. }
  77. .plus::before,
  78. .plus::after {
  79. content: "";
  80. position: absolute;
  81. background-color: #232832;
  82. border-radius: 0.5px;
  83. width: 1px;
  84. height: 14px;
  85. left: 0;
  86. right: 0;
  87. top: 0;
  88. bottom: 0;
  89. margin: auto;
  90. }
  91. .plus::after {
  92. transform: rotate(90deg);
  93. width: 0.5px;
  94. }