step.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .lay-step {
  2. font-size: 0;
  3. width: 400px;
  4. margin: 0 auto;
  5. max-width: 100%;
  6. padding-left: 200px;
  7. }
  8. .step-item {
  9. display: inline-block;
  10. line-height: 26px;
  11. position: relative;
  12. font-size: 14px;
  13. }
  14. .step-item-tail {
  15. width: 100%;
  16. padding: 0 10px;
  17. position: absolute;
  18. left: 0;
  19. top: 13px;
  20. }
  21. .step-item-tail i {
  22. display: inline-block;
  23. width: 100%;
  24. height: 1px;
  25. vertical-align: top;
  26. background: #c2c2c2;
  27. position: relative;
  28. }
  29. .step-item-tail .step-item-tail-done {
  30. background: #009688;
  31. }
  32. .step-item-head {
  33. position: relative;
  34. display: inline-block;
  35. height: 26px;
  36. width: 26px;
  37. text-align: center;
  38. vertical-align: top;
  39. color: #009688;
  40. border: 1px solid #009688;
  41. border-radius: 50%;
  42. background: #ffffff;
  43. }
  44. .step-item-head.step-item-head-active {
  45. background: #009688;
  46. color: #ffffff;
  47. }
  48. .step-item-main {
  49. display: block;
  50. position: relative;
  51. margin-left: -50%;
  52. margin-right: 50%;
  53. padding-left: 26px;
  54. text-align: center;
  55. }
  56. .step-item-main-title {
  57. font-weight: bolder;
  58. color: #555555;
  59. }
  60. .step-item-main-desc {
  61. color: #aaaaaa;
  62. }
  63. .lay-step + [carousel-item]:before {
  64. display: none;
  65. }
  66. .lay-step + [carousel-item] > * {
  67. background-color: transparent;
  68. }