form-wizard.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. .bs-stepper {
  2. background-color: #fff;
  3. box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  4. border-radius: 0.5rem; }
  5. .bs-stepper .bs-stepper-header {
  6. padding: 1.5rem 1.5rem;
  7. flex-wrap: wrap;
  8. border-bottom: 1px solid rgba(34, 41, 47, 0.08);
  9. margin: 0; }
  10. .bs-stepper .bs-stepper-header .line {
  11. flex: 0;
  12. min-width: auto;
  13. min-height: auto;
  14. background-color: transparent;
  15. margin: 0;
  16. padding: 0 1.75rem;
  17. color: #6e6b7b;
  18. font-size: 1.5rem; }
  19. .bs-stepper .bs-stepper-header .step {
  20. margin-bottom: .25rem;
  21. margin-top: .25rem; }
  22. .bs-stepper .bs-stepper-header .step .step-trigger {
  23. flex-wrap: nowrap;
  24. padding: 0;
  25. font-weight: normal; }
  26. .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {
  27. display: flex;
  28. align-items: center;
  29. justify-content: center;
  30. width: 38px;
  31. height: 38px;
  32. padding: 0.5em 0;
  33. font-weight: 500;
  34. color: #babfc7;
  35. background-color: rgba(186, 191, 199, 0.12);
  36. border-radius: 0.35rem; }
  37. .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {
  38. text-align: left;
  39. margin: 0;
  40. margin-top: 0.5rem;
  41. margin-left: 1rem; }
  42. .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {
  43. display: inherit;
  44. color: #6e6b7b;
  45. font-weight: 600;
  46. line-height: 1rem;
  47. margin-bottom: 0rem; }
  48. .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {
  49. font-weight: 400;
  50. font-size: 0.85rem;
  51. color: #b9b9c3; }
  52. .bs-stepper .bs-stepper-header .step .step-trigger:hover {
  53. background-color: transparent; }
  54. .bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {
  55. background-color: #7367f0;
  56. color: #fff;
  57. box-shadow: 0 3px 6px 0 rgba(115, 103, 240, 0.4); }
  58. .bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {
  59. color: #7367f0; }
  60. .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {
  61. background-color: rgba(115, 103, 240, 0.12);
  62. color: #7367f0 !important; }
  63. .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {
  64. color: #b9b9c3; }
  65. .bs-stepper .bs-stepper-header .step.crossed + .line {
  66. color: #7367f0; }
  67. .bs-stepper .bs-stepper-content {
  68. padding: 1.5rem 1.5rem; }
  69. .bs-stepper .bs-stepper-content .content {
  70. margin-left: 0; }
  71. .bs-stepper .bs-stepper-content .content .content-header {
  72. margin-bottom: 1rem; }
  73. .bs-stepper.vertical .bs-stepper-header {
  74. border-right: 1px solid #ebe9f1;
  75. border-bottom: none; }
  76. .bs-stepper.vertical .bs-stepper-header .step .step-trigger {
  77. padding: 1rem 0; }
  78. .bs-stepper.vertical .bs-stepper-header .line {
  79. display: none; }
  80. .bs-stepper.vertical .bs-stepper-content {
  81. width: 100%;
  82. padding-top: 2.5rem; }
  83. .bs-stepper.vertical .bs-stepper-content .content:not(.active) {
  84. display: none; }
  85. .bs-stepper.vertical.wizard-icons .step {
  86. text-align: center; }
  87. .bs-stepper.wizard-modern {
  88. background-color: transparent;
  89. box-shadow: none; }
  90. .bs-stepper.wizard-modern .bs-stepper-header {
  91. border: none; }
  92. .bs-stepper.wizard-modern .bs-stepper-content {
  93. background-color: #fff;
  94. border-radius: 0.5rem;
  95. box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1); }
  96. .horizontal-wizard,
  97. .vertical-wizard,
  98. .modern-horizontal-wizard,
  99. .modern-vertical-wizard {
  100. margin-bottom: 2.2rem; }
  101. .dark-layout .bs-stepper {
  102. background-color: #283046;
  103. box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.24); }
  104. .dark-layout .bs-stepper .bs-stepper-header {
  105. border-bottom: 1px solid rgba(59, 66, 83, 0.08); }
  106. .dark-layout .bs-stepper .bs-stepper-header .line {
  107. color: #b4b7bd; }
  108. .dark-layout .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {
  109. color: #babfc7; }
  110. .dark-layout .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {
  111. color: #b4b7bd; }
  112. .dark-layout .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {
  113. color: #676d7d; }
  114. .dark-layout .bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {
  115. background-color: #7367f0;
  116. color: #fff;
  117. box-shadow: 0 3px 6px 0 rgba(115, 103, 240, 0.4); }
  118. .dark-layout .bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {
  119. color: #7367f0; }
  120. .dark-layout .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label,
  121. .dark-layout .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-title {
  122. color: #676d7d; }
  123. .dark-layout .bs-stepper.vertical .bs-stepper-header {
  124. border-right-color: #3b4253; }
  125. .dark-layout .bs-stepper.wizard-modern {
  126. background-color: transparent;
  127. box-shadow: none; }
  128. .dark-layout .bs-stepper.wizard-modern .bs-stepper-header {
  129. border: none; }
  130. .dark-layout .bs-stepper.wizard-modern .bs-stepper-content {
  131. background-color: #283046;
  132. box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.24); }
  133. html[data-textdirection='rtl'] .btn-prev,
  134. html[data-textdirection='rtl'] .btn-next {
  135. display: flex; }
  136. html[data-textdirection='rtl'] .btn-prev i,
  137. html[data-textdirection='rtl'] .btn-prev svg,
  138. html[data-textdirection='rtl'] .btn-next i,
  139. html[data-textdirection='rtl'] .btn-next svg {
  140. transform: rotate(-180deg); }
  141. @media (max-width: 992px) {
  142. .bs-stepper .bs-stepper-header {
  143. flex-direction: column;
  144. align-items: flex-start; }
  145. .bs-stepper .bs-stepper-header .step .step-trigger {
  146. padding: 0.5rem 0 !important;
  147. flex-direction: row; }
  148. .bs-stepper .bs-stepper-header .line {
  149. display: none; }
  150. .bs-stepper.vertical {
  151. flex-direction: column; }
  152. .bs-stepper.vertical .bs-stepper-header {
  153. align-items: flex-start; }
  154. .bs-stepper.vertical .bs-stepper-content {
  155. padding-top: 1.5rem; } }