diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap index 73b83970d3..6c406ace91 100644 --- a/components/comment/__tests__/__snapshots__/demo.test.js.snap +++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap @@ -137,129 +137,113 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = ` class="ant-spin-container" >
+ + +
-
- - - -
- - Han Solo - - - a day ago - -
-
-
+ -
-

- Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate. -

-
-
    -
  • - - - Reply to - - -
  • -
-
+ a day ago + +
+
+
+
+

+ Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate. +

+
    +
  • + + + Reply to + + +
  • +
+ + +
-
- - - -
- - Stormtrooper - - - 2 days ago - -
-
-
+ -
-

- Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non. -

-
-
    -
  • - - - Reply to - - -
  • -
-
+ 2 days ago +
+
+
+

+ Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non. +

+
+
    +
  • + + + Reply to + + +
  • +
+
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md index 3984ee6bce..0de3720ced 100644 --- a/components/comment/demo/list.md +++ b/components/comment/demo/list.md @@ -51,17 +51,15 @@ ReactDOM.render( itemLayout="horizontal" dataSource={data} renderItem={item => ( - - - {item.children} - - + + {item.children} + )} />, mountNode); diff --git a/components/comment/style/index.less b/components/comment/style/index.less index d194f49a78..646b73f4ca 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -5,28 +5,33 @@ .@{comment-prefix-cls} { position: relative; + &-inner { padding: @comment-padding-base; } - &-header { + + &-header { margin-bottom: @comment-header-margin; padding-bottom: @comment-header-padding; - &-avatar { + + &-avatar { position: relative; float: left; margin-right: 12px; cursor: pointer; - img { + img { width: 32px; height: 32px; border-radius: 16px; } } - &-author { + + &-author { padding-left: 12px; flex: auto; font-size: 14px; - & > a, + + & > a, & > span { display: inline-block; height: 18px; @@ -35,21 +40,24 @@ padding-right: 8px; cursor: pointer; } - &-name { + + &-name { transition: color 0.3s ease; font-size: 14px; color: @comment-author-name-color; - * > { + > * { color: @comment-author-name-color; - &:hover { + &:hover { color: @comment-author-name-color; } } } - &-time { + + &-time { cursor: auto; color: @comment-author-time-color; white-space: nowrap; + &-tooltip { cursor: pointer; &:hover { @@ -59,31 +67,34 @@ } } } - &-content { + + &-content { position: relative; - padding-left: @comment-pusher; + padding-left: @comment-indent; font-size: 14px; } - &-actions { + + &-actions { margin-top: 12px; - & > li { - float: left; + + & > li { + display: inline-block; color: @comment-action-color; - & > span { + > span { padding-right: 10px; - -webkit-transition: color 0.3s ease; transition: color 0.3s ease; font-size: 12px; color: @comment-action-color; cursor: pointer; user-select: none; - &:hover { + &:hover { color: @comment-action-hover-color; } } } } + &-nested { - margin-left: @comment-pusher; + margin-left: @comment-indent; } } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index a2a93ebdb7..3986f2f3c0 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -399,7 +399,7 @@ @comment-padding-base: 16px 0; @comment-header-margin: 4px; @comment-header-padding: 8px; -@comment-pusher: 44px; +@comment-indent: 44px; @comment-author-name-color: #8c8c8c; @comment-author-time-color: #ccc; @comment-action-color: #8c8c8c;