fix(module:steps): fix progress dot in vertical mode (#4193)

close #4184
NG-ZORRO · Sep 20, 2019 · 50b86be · 50b86be
1 parent 7d37b1c
commit 50b86be
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/components/steps/demo/progress-dot.ts b/components/steps/demo/progress-dot.ts
@@ -8,6 +8,14 @@ import { Component } from '@angular/core';
       <nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
       <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
     </nz-steps>
+    <nz-divider></nz-divider>
+    <nz-steps [nzCurrent]="1" nzProgressDot nzDirection="vertical">
+      <nz-step nzTitle="Finished" nzDescription="This is a description. This is a description."></nz-step>
+      <nz-step nzTitle="Finished" nzDescription="This is a description. This is a description."></nz-step>
+      <nz-step nzTitle="In Progress" nzDescription="This is a description. This is a description."></nz-step>
+      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
+      <nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
+    </nz-steps>
   `
 })
 export class NzDemoStepsProgressDotComponent {}
diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less
@@ -1,4 +1,5 @@
-.@{steps-prefix-cls}-dot {
+.@{steps-prefix-cls}-dot,
+.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
   .@{steps-prefix-cls}-item {
     &-title {
       line-height: @line-height-base;
@@ -63,7 +64,8 @@
     margin-top: 8px;
     margin-left: 0;
   }
-  .@{steps-prefix-cls}-item-tail {
+  // https://github.com/ant-design/ant-design/issues/18354
+  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
     top: 2px;
     left: -9px;
     margin: 0;
@@ -75,4 +77,4 @@
   .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
     left: -2px;
   }
-}
+}