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"
>
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;
- Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate. -
---
-
-
- Reply to
-
-
-
-
-