vertical.less 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. .@{steps-prefix-cls}-vertical {
  2. display: flex;
  3. flex-direction: column;
  4. > .@{steps-prefix-cls}-item {
  5. display: block;
  6. flex: 1 0 auto;
  7. padding-left: 0;
  8. overflow: visible;
  9. .@{steps-prefix-cls}-item-icon {
  10. float: left;
  11. margin-right: @steps-vertical-icon-width;
  12. }
  13. .@{steps-prefix-cls}-item-content {
  14. display: block;
  15. min-height: 48px;
  16. overflow: hidden;
  17. }
  18. .@{steps-prefix-cls}-item-title {
  19. line-height: @steps-icon-size;
  20. }
  21. .@{steps-prefix-cls}-item-description {
  22. padding-bottom: 12px;
  23. }
  24. }
  25. > .@{steps-prefix-cls}-item
  26. > .@{steps-prefix-cls}-item-container
  27. > .@{steps-prefix-cls}-item-tail {
  28. position: absolute;
  29. top: 0;
  30. left: @steps-vertical-tail-width - 1; // line width
  31. width: 1px;
  32. height: 100%;
  33. padding: @steps-icon-size + 6px 0 6px;
  34. &::after {
  35. width: 1px;
  36. height: 100%;
  37. }
  38. }
  39. > .@{steps-prefix-cls}-item:not(:last-child)
  40. > .@{steps-prefix-cls}-item-container
  41. > .@{steps-prefix-cls}-item-tail {
  42. display: block;
  43. }
  44. > .@{steps-prefix-cls}-item
  45. > .@{steps-prefix-cls}-item-container
  46. > .@{steps-prefix-cls}-item-content
  47. > .@{steps-prefix-cls}-item-title {
  48. &::after {
  49. display: none;
  50. }
  51. }
  52. &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
  53. .@{steps-prefix-cls}-item-tail {
  54. position: absolute;
  55. top: 0;
  56. left: @steps-vertical-tail-width-sm - 1; // line width
  57. padding: @steps-small-icon-size + 6px 0 6px;
  58. }
  59. .@{steps-prefix-cls}-item-title {
  60. line-height: @steps-small-icon-size;
  61. }
  62. }
  63. }