smart_wizard.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * SmartWizard v4.x
  3. * jQuery Wizard Plugin
  4. * http://www.techlaboratory.net/smartwizard
  5. *
  6. * Created by Dipu Raj
  7. * http://dipuraj.me
  8. *
  9. * Licensed under the terms of MIT License
  10. * https://github.com/techlab/SmartWizard/blob/master/LICENSE
  11. */
  12. /* SmartWizard Basic CSS */
  13. .sw-main {
  14. position: relative;
  15. display: block;
  16. margin: 0;
  17. padding: 0;
  18. }
  19. .sw-main .sw-container {
  20. display: block;
  21. margin: 0;
  22. padding: 0;
  23. position: relative;
  24. }
  25. .sw-main .step-content {
  26. display: none;
  27. position: relative;
  28. margin: 0;
  29. }
  30. .sw-main .sw-toolbar {
  31. margin-left: 0;
  32. }
  33. /* SmartWizard Theme: White */
  34. .sw-theme-default {
  35. -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  36. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  37. }
  38. .sw-theme-default .sw-container {
  39. min-height: 250px;
  40. }
  41. .sw-theme-default .step-content {
  42. padding: 10px;
  43. border: 0px solid #D4D4D4;
  44. background-color: #FFF;
  45. text-align: left;
  46. }
  47. .sw-theme-default .sw-toolbar {
  48. background: #f9f9f9;
  49. border-radius: 0 !important;
  50. padding-left: 10px;
  51. padding-right: 10px;
  52. margin-bottom: 0 !important;
  53. }
  54. .sw-theme-default .sw-toolbar-top {
  55. border-bottom-color: #ddd !important;
  56. }
  57. .sw-theme-default .sw-toolbar-bottom {
  58. border-top-color: #ddd !important;
  59. }
  60. .sw-theme-default > ul.step-anchor > li > a, .sw-theme-default > ul.step-anchor > li > a:hover {
  61. border: none !important;
  62. color: #bbb;
  63. text-decoration: none;
  64. outline-style: none;
  65. background: transparent !important;
  66. border: none !important;
  67. }
  68. .sw-theme-default > ul.step-anchor > li.clickable > a:hover {
  69. color: #4285F4 !important;
  70. background: transparent !important;
  71. }
  72. .sw-theme-default > ul.step-anchor > li > a::after {
  73. content: "";
  74. background: #4285F4;
  75. /* #5bc0de #4285F4*/
  76. height: 2px;
  77. position: absolute;
  78. width: 100%;
  79. left: 0px;
  80. bottom: 0px;
  81. -webkit-transition: all 250ms ease 0s;
  82. transition: all 250ms ease 0s;
  83. -webkit-transform: scale(0);
  84. -ms-transform: scale(0);
  85. transform: scale(0);
  86. }
  87. .sw-theme-default > ul.step-anchor > li.active > a {
  88. border: none !important;
  89. color: #4285F4 !important;
  90. background: transparent !important;
  91. }
  92. .sw-theme-default > ul.step-anchor > li.active > a::after {
  93. -webkit-transform: scale(1);
  94. -ms-transform: scale(1);
  95. transform: scale(1);
  96. }
  97. .sw-theme-default > ul.step-anchor > li.done > a {
  98. border: none !important;
  99. color: #000 !important;
  100. background: transparent !important;
  101. }
  102. .sw-theme-default > ul.step-anchor > li.done > a::after {
  103. background: #5cb85c;
  104. -webkit-transform: scale(1);
  105. -ms-transform: scale(1);
  106. transform: scale(1);
  107. }
  108. .sw-theme-default > ul.step-anchor > li.danger > a {
  109. border: none !important;
  110. color: #d9534f !important;
  111. background: transparent !important;
  112. }
  113. .sw-theme-default > ul.step-anchor > li.danger > a::after {
  114. background: #d9534f;
  115. -webkit-transform: scale(1);
  116. -ms-transform: scale(1);
  117. transform: scale(1);
  118. }
  119. .sw-theme-default > ul.step-anchor > li.disabled > a, .sw-theme-default > ul.step-anchor > li.disabled > a:hover {
  120. color: #eee !important;
  121. }
  122. /* Responsive CSS */
  123. @media screen and (max-width: 768px) {
  124. .sw-theme-default > .nav-tabs > li {
  125. float: none !important;
  126. }
  127. }
  128. /* Loader Animation
  129. Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js
  130. */
  131. @-webkit-keyframes ld {
  132. 0% {
  133. -webkit-transform: rotate(0deg) scale(1);
  134. transform: rotate(0deg) scale(1);
  135. }
  136. 50% {
  137. -webkit-transform: rotate(180deg) scale(1.1);
  138. transform: rotate(180deg) scale(1.1);
  139. }
  140. 100% {
  141. -webkit-transform: rotate(360deg) scale(1);
  142. transform: rotate(360deg) scale(1);
  143. }
  144. }
  145. @keyframes ld {
  146. 0% {
  147. -webkit-transform: rotate(0deg) scale(1);
  148. transform: rotate(0deg) scale(1);
  149. }
  150. 50% {
  151. -webkit-transform: rotate(180deg) scale(1.1);
  152. transform: rotate(180deg) scale(1.1);
  153. }
  154. 100% {
  155. -webkit-transform: rotate(360deg) scale(1);
  156. transform: rotate(360deg) scale(1);
  157. }
  158. }
  159. .sw-theme-default > ul.step-anchor > li.loading:before {
  160. content: '';
  161. display: inline-block;
  162. position: absolute;
  163. background: transparent;
  164. border-radius: 50%;
  165. -webkit-box-sizing: border-box;
  166. box-sizing: border-box;
  167. border: 2px solid #fff;
  168. border-top-color: transparent;
  169. border-bottom-color: transparent;
  170. border-left-color: #4285f4;
  171. border-right-color: #4285f4;
  172. top: 50%;
  173. left: 50%;
  174. margin-top: -16px;
  175. margin-left: -16px;
  176. width: 32px;
  177. height: 32px;
  178. -webkit-animation: ld 1s ease-in-out infinite;
  179. animation: ld 1s ease-in-out infinite;
  180. }