comment.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
  2. .avue-comment {
  3. margin-bottom: 30px;
  4. display: flex;
  5. align-items: flex-start;
  6. &--reverse {
  7. flex-direction: row-reverse;
  8. .avue-comment__main {
  9. &:before,
  10. &:after {
  11. left: auto;
  12. right: -8px;
  13. border-width: 8px 0 8px 8px;
  14. }
  15. &:before {
  16. border-left-color: #dedede;
  17. }
  18. &:after {
  19. border-left-color: #f8f8f8;
  20. margin-right: 1px;
  21. margin-left: auto;
  22. }
  23. }
  24. }
  25. &__avatar {
  26. width: 48px;
  27. height: 48px;
  28. border-radius: 50%;
  29. border: 1px solid transparent;
  30. box-sizing: border-box;
  31. vertical-align: middle;
  32. }
  33. &__header {
  34. padding: 5px 15px;
  35. background: #f8f8f8;
  36. border-bottom: 1px solid #eee;
  37. display: flex;
  38. align-items: center;
  39. justify-content: space-between;
  40. }
  41. &__author {
  42. font-weight: 700;
  43. font-size: 14px;
  44. color: #999;
  45. }
  46. &__main {
  47. flex: 1;
  48. margin: 0 20px;
  49. position: relative;
  50. border: 1px solid #dedede;
  51. border-radius: 2px;
  52. &:before,
  53. &:after {
  54. position: absolute;
  55. top: 10px;
  56. left: -8px;
  57. right: 100%;
  58. width: 0;
  59. height: 0;
  60. display: block;
  61. content: ' ';
  62. border-color: transparent;
  63. border-style: solid solid outset;
  64. border-width: 8px 8px 8px 0;
  65. pointer-events: none;
  66. }
  67. &:before {
  68. border-right-color: #dedede;
  69. z-index: 1;
  70. }
  71. &:after {
  72. border-right-color: #f8f8f8;
  73. margin-left: 1px;
  74. z-index: 2;
  75. }
  76. }
  77. &__body {
  78. padding: 15px;
  79. overflow: hidden;
  80. background: #fff;
  81. font-family:
  82. Segoe UI,
  83. Lucida Grande,
  84. Helvetica,
  85. Arial,
  86. Microsoft YaHei,
  87. FreeSans,
  88. Arimo,
  89. Droid Sans,
  90. wenquanyi micro hei,
  91. Hiragino Sans GB,
  92. Hiragino Sans GB W3,
  93. FontAwesome,
  94. sans-serif;
  95. color: #333;
  96. font-size: 14px;
  97. }
  98. blockquote {
  99. margin: 0;
  100. font-family:
  101. Georgia,
  102. Times New Roman,
  103. Times,
  104. Kai,
  105. Kaiti SC,
  106. KaiTi,
  107. BiauKai,
  108. FontAwesome,
  109. serif;
  110. padding: 1px 0 1px 15px;
  111. border-left: 4px solid #ddd;
  112. }
  113. }