wizard.css 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. .form-wizard > ul {
  2. position: relative;
  3. display: table;
  4. width: 100%;
  5. margin: 0 0 20px;
  6. list-style: none;
  7. }
  8. .form-wizard > ul > li {
  9. display: table-cell;
  10. width: 1%;
  11. text-align: center;
  12. }
  13. .form-wizard > ul > li a,
  14. .form-wizard > ul > li a:hover {
  15. position: relative;
  16. display: block;
  17. opacity: 1;
  18. color: #666;
  19. -moz-opacity: 1;
  20. filter: alpha(opacity: 100);
  21. }
  22. .form-wizard > ul > li a:before {
  23. position: absolute;
  24. z-index: 4;
  25. top: 20px;
  26. left: 0;
  27. width: 100%;
  28. height: 4px;
  29. content: '';
  30. background: #ccc;
  31. }
  32. .form-wizard > ul > li:first-child a:before {
  33. left: 50%;
  34. }
  35. .form-wizard > ul > li:last-child a:before {
  36. right: 50%;
  37. left: auto;
  38. width: 50%;
  39. }
  40. .form-wizard > ul > li a .wizard-step {
  41. font-size: 16px;
  42. line-height: 42px;
  43. position: relative;
  44. z-index: 5;
  45. display: block;
  46. width: 40px;
  47. height: 40px;
  48. margin: 0 auto 5px;
  49. cursor: pointer;
  50. text-align: center;
  51. color: #fafafa;
  52. border-radius: 100px;
  53. background: #ccc;
  54. }
  55. .form-wizard > ul > li a .wizard-description {
  56. font-size: 13px;
  57. font-weight: bold;
  58. opacity: .60;
  59. -moz-opacity: .60;
  60. filter: alpha(opacity: 60);
  61. }
  62. .form-wizard > ul > li a .wizard-description small {
  63. font-size: 12px;
  64. font-weight: normal;
  65. display: block;
  66. padding: 3px 0 0;
  67. opacity: .70;
  68. -moz-opacity: .70;
  69. filter: alpha(opacity: 70);
  70. }
  71. .form-wizard > ul > li a .wizard-description:hover,
  72. .form-wizard > ul > li.active a .wizard-description {
  73. opacity: 1;
  74. -moz-opacity: 1;
  75. filter: alpha(opacity: 100);
  76. }
  77. .form-wizard > ul > li a.disabled .wizard-step {
  78. background: #ccc;
  79. }
  80. .msgBox {
  81. display: none;
  82. }
  83. .loader {
  84. display: none;
  85. }
  86. .actionBar {
  87. margin-top: 20px;
  88. margin-bottom: 20px;
  89. padding: 20px 0 0;
  90. border-top: #ddd solid 1px;
  91. }
  92. .actionBar a.btn {
  93. float: right;
  94. margin-left: 10px;
  95. }