| .td-line-wrapper, |
| .td-step { |
| position: relative; |
| } |
| |
| .td-steps-header { |
| // layout |
| box-sizing: border-box; |
| display: flex; |
| // layout="row" |
| flex-direction: row; |
| } |
| |
| .td-line-wrapper { |
| width: 24px; |
| min-height: 1px; |
| } |
| |
| .td-horizontal-line { |
| border-bottom-width: 1px; |
| border-bottom-style: solid; |
| height: 1px; |
| position: relative; |
| top: 36px; |
| ::ng-deep :not([dir='rtl']) & { |
| left: -6px; |
| right: -3px; |
| } |
| ::ng-deep [dir='rtl'] & { |
| left: -3px; |
| right: -6px; |
| } |
| min-width: 15px; |
| // flex |
| flex: 1; |
| box-sizing: border-box; |
| } |
| |
| .td-vertical-line { |
| position: absolute; |
| ::ng-deep :not([dir='rtl']) & { |
| left: 20px; |
| right: auto; |
| } |
| ::ng-deep [dir='rtl'] & { |
| left: auto; |
| right: 20px; |
| } |
| bottom: -16px; |
| top: -16px; |
| border-left-width: 1px; |
| border-left-style: solid; |
| } |