12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- .@{steps-prefix-cls}-vertical {
- display: flex;
- flex-direction: column;
- > .@{steps-prefix-cls}-item {
- display: block;
- flex: 1 0 auto;
- padding-left: 0;
- overflow: visible;
- .@{steps-prefix-cls}-item-icon {
- float: left;
- margin-right: @steps-vertical-icon-width;
- }
- .@{steps-prefix-cls}-item-content {
- display: block;
- min-height: 48px;
- overflow: hidden;
- }
- .@{steps-prefix-cls}-item-title {
- line-height: @steps-icon-size;
- }
- .@{steps-prefix-cls}-item-description {
- padding-bottom: 12px;
- }
- }
- > .@{steps-prefix-cls}-item
- > .@{steps-prefix-cls}-item-container
- > .@{steps-prefix-cls}-item-tail {
- position: absolute;
- top: 0;
- left: @steps-vertical-tail-width - 1; // line width
- width: 1px;
- height: 100%;
- padding: @steps-icon-size + 6px 0 6px;
- &::after {
- width: 1px;
- height: 100%;
- }
- }
- > .@{steps-prefix-cls}-item:not(:last-child)
- > .@{steps-prefix-cls}-item-container
- > .@{steps-prefix-cls}-item-tail {
- display: block;
- }
- > .@{steps-prefix-cls}-item
- > .@{steps-prefix-cls}-item-container
- > .@{steps-prefix-cls}-item-content
- > .@{steps-prefix-cls}-item-title {
- &::after {
- display: none;
- }
- }
- &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
- .@{steps-prefix-cls}-item-tail {
- position: absolute;
- top: 0;
- left: @steps-vertical-tail-width-sm - 1; // line width
- padding: @steps-small-icon-size + 6px 0 6px;
- }
- .@{steps-prefix-cls}-item-title {
- line-height: @steps-small-icon-size;
- }
- }
- }
|