index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @comment-prefix-cls: ~'@{ant-prefix}-comment';
  4. .@{comment-prefix-cls} {
  5. position: relative;
  6. background-color: @comment-bg;
  7. &-inner {
  8. display: flex;
  9. padding: @comment-padding-base;
  10. }
  11. &-avatar {
  12. position: relative;
  13. flex-shrink: 0;
  14. margin-right: @margin-sm;
  15. cursor: pointer;
  16. img {
  17. width: 32px;
  18. height: 32px;
  19. border-radius: 50%;
  20. }
  21. }
  22. &-content {
  23. position: relative;
  24. flex: 1 1 auto;
  25. min-width: 1px;
  26. font-size: @comment-font-size-base;
  27. word-wrap: break-word;
  28. &-author {
  29. display: flex;
  30. flex-wrap: wrap;
  31. justify-content: flex-start;
  32. margin-bottom: @margin-xss;
  33. font-size: @comment-font-size-base;
  34. & > a,
  35. & > span {
  36. padding-right: @padding-xs;
  37. font-size: @comment-font-size-sm;
  38. line-height: 18px;
  39. }
  40. &-name {
  41. color: @comment-author-name-color;
  42. font-size: @comment-font-size-base;
  43. transition: color 0.3s;
  44. > * {
  45. color: @comment-author-name-color;
  46. &:hover {
  47. color: @comment-author-name-color;
  48. }
  49. }
  50. }
  51. &-time {
  52. color: @comment-author-time-color;
  53. white-space: nowrap;
  54. cursor: auto;
  55. }
  56. }
  57. &-detail p {
  58. margin-bottom: @comment-content-detail-p-margin-bottom;
  59. white-space: pre-wrap;
  60. }
  61. }
  62. &-actions {
  63. margin-top: @comment-actions-margin-top;
  64. margin-bottom: @comment-actions-margin-bottom;
  65. padding-left: 0;
  66. > li {
  67. display: inline-block;
  68. color: @comment-action-color;
  69. > span {
  70. margin-right: 10px;
  71. color: @comment-action-color;
  72. font-size: @comment-font-size-sm;
  73. cursor: pointer;
  74. transition: color 0.3s;
  75. user-select: none;
  76. &:hover {
  77. color: @comment-action-hover-color;
  78. }
  79. }
  80. }
  81. }
  82. &-nested {
  83. margin-left: @comment-nest-indent;
  84. }
  85. }
  86. @import './rtl';