smartwizard.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. /*!
  2. * SmartWizard v4.4.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. border-radius: 0.25rem !important; }
  19. .sw-main .sw-container {
  20. display: block;
  21. margin: 0;
  22. padding: 0;
  23. position: relative; }
  24. .sw-main .step-content {
  25. display: none;
  26. position: relative;
  27. margin: 0; }
  28. .sw-main .sw-toolbar {
  29. margin-left: 0; }
  30. /* SmartWizard Theme: White */
  31. .sw-theme-default {
  32. -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  33. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }
  34. .sw-theme-default .sw-container {
  35. min-height: 250px; }
  36. .sw-theme-default .step-content {
  37. padding: 10px;
  38. border: 0px solid #D4D4D4;
  39. background-color: #FFF;
  40. text-align: left; }
  41. .sw-theme-default .sw-toolbar {
  42. background: #f9f9f9;
  43. border-radius: 0 !important;
  44. padding-left: 10px;
  45. padding-right: 10px;
  46. padding: 10px;
  47. margin-bottom: 0 !important; }
  48. .sw-theme-default .sw-toolbar-top {
  49. border-bottom-color: #ddd !important; }
  50. .sw-theme-default .sw-toolbar-bottom {
  51. border-top-color: #ddd !important; }
  52. .sw-theme-default > ul.step-anchor > li {
  53. position: relative;
  54. margin-right: 2px; }
  55. .sw-theme-default > ul.step-anchor > li > a, .sw-theme-default > ul.step-anchor > li > a:hover {
  56. border: none !important;
  57. color: #bbb;
  58. text-decoration: none;
  59. outline-style: none;
  60. background: transparent !important;
  61. border: none !important;
  62. cursor: not-allowed; }
  63. .sw-theme-default > ul.step-anchor > li.clickable > a:hover {
  64. color: #4285F4 !important;
  65. background: transparent !important;
  66. cursor: pointer; }
  67. .sw-theme-default > ul.step-anchor > li > a::after {
  68. content: "";
  69. background: #4285F4;
  70. height: 2px;
  71. position: absolute;
  72. width: 100%;
  73. left: 0px;
  74. bottom: 0px;
  75. -webkit-transition: all 250ms ease 0s;
  76. transition: all 250ms ease 0s;
  77. -webkit-transform: scale(0);
  78. transform: scale(0); }
  79. .sw-theme-default > ul.step-anchor > li.active > a {
  80. border: none !important;
  81. color: #4285F4 !important;
  82. background: transparent !important;
  83. cursor: pointer; }
  84. .sw-theme-default > ul.step-anchor > li.active > a::after {
  85. -webkit-transform: scale(1);
  86. transform: scale(1); }
  87. .sw-theme-default > ul.step-anchor > li.done > a {
  88. border: none !important;
  89. color: #000 !important;
  90. background: transparent !important;
  91. cursor: pointer; }
  92. .sw-theme-default > ul.step-anchor > li.done > a::after {
  93. background: #5cb85c;
  94. -webkit-transform: scale(1);
  95. transform: scale(1); }
  96. .sw-theme-default > ul.step-anchor > li.danger > a {
  97. border: none !important;
  98. color: #d9534f !important;
  99. /* background: #d9534f !important; */
  100. cursor: pointer; }
  101. .sw-theme-default > ul.step-anchor > li.danger > a::after {
  102. background: #d9534f;
  103. border-left-color: #f8d7da;
  104. -webkit-transform: scale(1);
  105. transform: scale(1); }
  106. .sw-theme-default > ul.step-anchor > li.disabled > a, .sw-theme-default > ul.step-anchor > li.disabled > a:hover {
  107. color: #eee !important;
  108. cursor: not-allowed; }
  109. /* Responsive CSS */
  110. @media screen and (max-width: 768px) {
  111. .sw-theme-default > .nav-tabs > li {
  112. float: none !important; } }
  113. /* Common Loader */
  114. .sw-loading::after {
  115. position: absolute;
  116. display: block;
  117. opacity: 1;
  118. content: "";
  119. top: 0;
  120. left: 0;
  121. height: 100%;
  122. width: 100%;
  123. background: rgba(255, 255, 255, 0.7);
  124. -webkit-transition: all .2s ease;
  125. transition: all .2s ease;
  126. z-index: 2; }
  127. .sw-loading::before {
  128. content: '';
  129. display: inline-block;
  130. position: absolute;
  131. top: 50%;
  132. left: 50%;
  133. z-index: 10;
  134. border: 10px solid #f3f3f3;
  135. border-radius: 50%;
  136. border-top: 10px solid #3498db;
  137. width: 80px;
  138. height: 80px;
  139. margin-top: -40px;
  140. margin-left: -40px;
  141. -webkit-animation: spin 1s linear infinite;
  142. /* Safari */
  143. animation: spin 1s linear infinite; }
  144. /* Safari */
  145. @-webkit-keyframes spin {
  146. 0% {
  147. -webkit-transform: rotate(0deg); }
  148. 100% {
  149. -webkit-transform: rotate(360deg); } }
  150. @keyframes spin {
  151. 0% {
  152. -webkit-transform: rotate(0deg);
  153. transform: rotate(0deg); }
  154. 100% {
  155. -webkit-transform: rotate(360deg);
  156. transform: rotate(360deg); } }
  157. /*!
  158. * SmartWizard v4.4.x
  159. * jQuery Wizard Plugin
  160. * http://www.techlaboratory.net/smartwizard
  161. *
  162. * Created by Dipu Raj
  163. * http://dipuraj.me
  164. *
  165. * Licensed under the terms of MIT License
  166. * https://github.com/techlab/SmartWizard/blob/master/LICENSE
  167. */
  168. /* SmartWizard Theme: Arrows */
  169. .sw-theme-arrows {
  170. border-radius: 5px;
  171. border: 1px solid #ddd; }
  172. .sw-theme-arrows > .sw-container {
  173. min-height: 200px; }
  174. .sw-theme-arrows .step-content {
  175. padding: 0 10px;
  176. border: 0px solid #D4D4D4;
  177. background-color: #FFF;
  178. text-align: left; }
  179. .sw-theme-arrows .sw-toolbar {
  180. padding: 10px;
  181. margin-bottom: 0 !important; }
  182. .sw-theme-arrows > ul.step-anchor {
  183. border: 0;
  184. border-bottom: 1px solid #ddd;
  185. padding: 0px;
  186. background: #f5f5f5;
  187. border-radius: 0;
  188. border-top-right-radius: 5px;
  189. list-style: none;
  190. overflow: hidden; }
  191. .sw-theme-arrows > ul.step-anchor li + li:before {
  192. padding: 0; }
  193. .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
  194. color: #bbb;
  195. text-decoration: none;
  196. padding: 10px 0 10px 45px;
  197. position: relative;
  198. display: block;
  199. border: 0 !important;
  200. border-radius: 0;
  201. outline-style: none;
  202. background: #f5f5f5; }
  203. .sw-theme-arrows > ul.step-anchor > li > a:after {
  204. content: " ";
  205. display: block;
  206. width: 0;
  207. height: 0;
  208. border-top: 50px solid transparent;
  209. border-bottom: 50px solid transparent;
  210. border-left: 30px solid #f5f5f5;
  211. position: absolute;
  212. top: 50%;
  213. margin-top: -50px;
  214. left: 100%;
  215. z-index: 2; }
  216. .sw-theme-arrows > ul.step-anchor > li > a:before {
  217. content: " ";
  218. display: block;
  219. width: 0;
  220. height: 0;
  221. border-top: 50px solid transparent;
  222. /* Go big on the size, and let overflow hide */
  223. border-bottom: 50px solid transparent;
  224. border-left: 30px solid #ddd;
  225. position: absolute;
  226. top: 50%;
  227. margin-top: -50px;
  228. margin-left: 1px;
  229. left: 100%;
  230. z-index: 1; }
  231. .sw-theme-arrows > ul.step-anchor > li:first-child > a {
  232. padding-left: 15px; }
  233. .sw-theme-arrows > ul.step-anchor > li > a:hover {
  234. color: #bbb;
  235. text-decoration: none;
  236. outline-style: none;
  237. background: #f5f5f5;
  238. border-color: #f5f5f5; }
  239. .sw-theme-arrows > ul.step-anchor > li > a:hover:after {
  240. border-left-color: #f5f5f5; }
  241. .sw-theme-arrows > ul.step-anchor > li.clickable > a:hover {
  242. color: #4285F4 !important;
  243. background: #46b8da !important; }
  244. .sw-theme-arrows > ul.step-anchor > li.active > a {
  245. border-color: #5cb85c !important;
  246. color: #fff !important;
  247. background: #5cb85c !important; }
  248. .sw-theme-arrows > ul.step-anchor > li.active > a:after {
  249. border-left: 30px solid #5cb85c !important; }
  250. .sw-theme-arrows > ul.step-anchor > li.done > a {
  251. border-color: #b1dfbb !important;
  252. /* #5cb85c */
  253. color: #fff !important;
  254. background: #b1dfbb !important; }
  255. .sw-theme-arrows > ul.step-anchor > li.done > a:after {
  256. border-left: 30px solid #b1dfbb;
  257. /* c3e6cb */ }
  258. .sw-theme-arrows > ul.step-anchor > li.danger > a {
  259. border-color: #d9534f !important;
  260. color: #fff !important;
  261. background: #d9534f !important; }
  262. .sw-theme-arrows > ul.step-anchor > li.danger > a:after {
  263. border-left: 30px solid #d9534f !important; }
  264. .sw-theme-arrows > ul.step-anchor > li.disabled > a, .sw-theme-arrows > ul.step-anchor > li.disabled > a:hover {
  265. color: #eee !important; }
  266. /* Responsive CSS */
  267. @media screen and (max-width: 768px) {
  268. .sw-theme-arrows > ul.step-anchor {
  269. border: 0;
  270. background: #ddd !important; }
  271. .sw-theme-arrows > .nav-tabs > li {
  272. float: none !important;
  273. margin-bottom: 0; }
  274. .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
  275. padding-left: 15px;
  276. margin-right: 0;
  277. margin-bottom: 1px; }
  278. .sw-theme-arrows > ul.step-anchor > li > a:after, .sw-theme-arrows > ul.step-anchor > li > a:before {
  279. display: none; } }
  280. /* Loader Custom Style */
  281. .sw-theme-arrows::before {
  282. border: 10px solid #f3f3f3;
  283. border-top: 10px solid #5cb85c; }
  284. /*!
  285. * SmartWizard v4.4.x
  286. * jQuery Wizard Plugin
  287. * http://www.techlaboratory.net/smartwizard
  288. *
  289. * Created by Dipu Raj
  290. * http://dipuraj.me
  291. *
  292. * Licensed under the terms of MIT License
  293. * https://github.com/techlab/SmartWizard/blob/master/LICENSE
  294. */
  295. /* SmartWizard Theme: Circles */
  296. .sw-theme-circles .sw-container {
  297. min-height: 300px; }
  298. .sw-theme-circles .step-content {
  299. padding: 10px 0;
  300. background-color: #FFF;
  301. text-align: left; }
  302. .sw-theme-circles .sw-toolbar {
  303. background: #fff;
  304. padding-left: 10px;
  305. padding-right: 10px;
  306. margin-bottom: 0 !important; }
  307. .sw-theme-circles .sw-toolbar-bottom {
  308. border-top-color: #ddd !important;
  309. border-bottom-color: #ddd !important; }
  310. .sw-theme-circles > ul.step-anchor {
  311. position: relative;
  312. background: #fff;
  313. border: none;
  314. list-style: none;
  315. margin-bottom: 40px; }
  316. .sw-theme-circles > ul.step-anchor:before {
  317. content: " ";
  318. position: absolute;
  319. top: 50%;
  320. bottom: 0;
  321. width: 100%;
  322. height: 5px;
  323. background-color: #f5f5f5;
  324. border-radius: 3px;
  325. z-index: 0; }
  326. .sw-theme-circles > ul.step-anchor > li {
  327. border: none;
  328. margin-left: 40px;
  329. z-index: 98; }
  330. .sw-theme-circles > ul.step-anchor > li > a {
  331. border: 2px solid #f5f5f5;
  332. background: #f5f5f5;
  333. width: 75px;
  334. height: 75px;
  335. text-align: center;
  336. padding: 25px 0;
  337. border-radius: 50%;
  338. -webkit-box-shadow: inset 0px 0px 0px 3px #fff !important;
  339. box-shadow: inset 0px 0px 0px 3px #fff !important;
  340. text-decoration: none;
  341. outline-style: none;
  342. z-index: 99;
  343. color: #bbb;
  344. background: #f5f5f5;
  345. line-height: 1; }
  346. .sw-theme-circles > ul.step-anchor > li > a:hover {
  347. color: #bbb;
  348. background: #f5f5f5;
  349. border-width: 2px; }
  350. .sw-theme-circles > ul.step-anchor > li > a > small {
  351. position: relative;
  352. bottom: -40px;
  353. color: #ccc; }
  354. .sw-theme-circles > ul.step-anchor > li.clickable > a:hover {
  355. color: #4285F4 !important; }
  356. .sw-theme-circles > ul.step-anchor > li.active > a {
  357. border-color: #5bc0de;
  358. color: #fff;
  359. background: #5bc0de; }
  360. .sw-theme-circles > ul.step-anchor > li.active > a > small {
  361. color: #5bc0de; }
  362. .sw-theme-circles > ul.step-anchor > li.done > a {
  363. border-color: #5cb85c;
  364. color: #fff;
  365. background: #5cb85c; }
  366. .sw-theme-circles > ul.step-anchor > li.done > a > small {
  367. color: #5cb85c; }
  368. .sw-theme-circles > ul.step-anchor > li.danger > a {
  369. border-color: #d9534f;
  370. color: #d9534f;
  371. background: #fff; }
  372. .sw-theme-circles > ul.step-anchor > li.danger > a > small {
  373. color: #d9534f; }
  374. .sw-theme-circles > ul.step-anchor > li.disabled > a, .sw-theme-circles > ul.step-anchor > li.disabled > a:hover {
  375. color: #eee !important; }
  376. /*!
  377. * SmartWizard v4.4.x
  378. * jQuery Wizard Plugin
  379. * http://www.techlaboratory.net/smartwizard
  380. *
  381. * Created by Dipu Raj
  382. * http://dipuraj.me
  383. *
  384. * Licensed under the terms of MIT License
  385. * https://github.com/techlab/SmartWizard/blob/master/LICENSE
  386. */
  387. /* SmartWizard Theme: Dots */
  388. .sw-theme-dots .sw-container {
  389. min-height: 300px; }
  390. .sw-theme-dots .step-content {
  391. padding: 10px 0;
  392. border: none;
  393. background-color: #FFF;
  394. text-align: left; }
  395. .sw-theme-dots .sw-toolbar {
  396. background: #fff;
  397. border-radius: 0 !important;
  398. padding-left: 10px;
  399. padding-right: 10px;
  400. margin-bottom: 0 !important; }
  401. .sw-theme-dots .sw-toolbar-top {
  402. border-bottom-color: #ddd !important; }
  403. .sw-theme-dots .sw-toolbar-bottom {
  404. border-top-color: #ddd !important;
  405. border-bottom-color: #ddd !important; }
  406. .sw-theme-dots > ul.step-anchor {
  407. position: relative;
  408. background: #fff;
  409. border: 0px solid #ccc !important;
  410. list-style: none; }
  411. .sw-theme-dots > ul.step-anchor:before {
  412. content: " ";
  413. position: absolute;
  414. top: 70px;
  415. bottom: 0;
  416. width: 100%;
  417. height: 5px;
  418. background-color: #f5f5f5;
  419. border-radius: 3px;
  420. z-order: 0;
  421. z-index: 95; }
  422. .sw-theme-dots > ul.step-anchor > li {
  423. border: none; }
  424. /* Anchors styles */
  425. .sw-theme-dots > ul.step-anchor > li > a {
  426. position: relative;
  427. text-align: center;
  428. font-weight: bold;
  429. background: transparent;
  430. border: none;
  431. color: #ccc;
  432. text-decoration: none;
  433. outline-style: none;
  434. z-index: 96;
  435. display: block; }
  436. .sw-theme-dots > ul.step-anchor > li > a:before {
  437. content: ' ';
  438. position: absolute;
  439. bottom: 2px;
  440. left: 40%;
  441. margin-top: 10px;
  442. display: block;
  443. border-radius: 50%;
  444. color: #428bca;
  445. background: #f5f5f5;
  446. border: none;
  447. width: 30px;
  448. height: 30px;
  449. text-decoration: none;
  450. z-index: 98; }
  451. .sw-theme-dots > ul.step-anchor > li > a:after {
  452. content: ' ';
  453. position: relative;
  454. left: 43%;
  455. bottom: 2px;
  456. margin-top: 10px;
  457. display: block;
  458. width: 15px;
  459. height: 15px;
  460. background: #f5f5f5;
  461. border-radius: 50%;
  462. z-index: 99; }
  463. .sw-theme-dots > ul.step-anchor > li > a:hover {
  464. color: #ccc;
  465. background: transparent; }
  466. .sw-theme-dots > ul.step-anchor > li > a:focus {
  467. color: #ccc;
  468. border: none; }
  469. .sw-theme-dots > ul.step-anchor > li.clickable > a:hover {
  470. color: #999; }
  471. /* Active anchors */
  472. .sw-theme-dots > ul.step-anchor > li.active > a {
  473. color: #5bc0de; }
  474. .sw-theme-dots > ul.step-anchor > li.active > a:hover {
  475. border: none; }
  476. .sw-theme-dots > ul.step-anchor > li.active > a:after {
  477. background: #5bc0de; }
  478. /* Done anchors */
  479. .sw-theme-dots > ul.step-anchor > li.done > a {
  480. color: #5cb85c; }
  481. .sw-theme-dots > ul.step-anchor > li.done > a:after {
  482. background: #5cb85c; }
  483. /* Danger anchors */
  484. .sw-theme-dots > ul.step-anchor > li.danger > a {
  485. color: #d9534f; }
  486. .sw-theme-dots > ul.step-anchor > li.danger > a:after {
  487. background: #d9534f; }
  488. .sw-theme-dots > ul.step-anchor > li.disabled > a, .sw-theme-dots > ul.step-anchor > li.disabled > a:hover {
  489. color: #eee !important; }
  490. .sw-theme-dots > ul.step-anchor > li.disabled > a:after {
  491. background: #eee; }
  492. /* Responsive CSS */
  493. @media screen and (max-width: 768px) {
  494. .sw-theme-dots > ul.step-anchor:before {
  495. top: 0;
  496. bottom: 0;
  497. left: 10px;
  498. width: 5px;
  499. height: 100%;
  500. background-color: #f5f5f5;
  501. display: block;
  502. margin-right: 10px; }
  503. .sw-theme-dots > ul.step-anchor > li {
  504. margin-left: 20px;
  505. display: block;
  506. clear: both; }
  507. .sw-theme-dots > ul.step-anchor > li > a {
  508. text-align: left;
  509. margin-left: 0;
  510. display: block; }
  511. .sw-theme-dots > ul.step-anchor > li > a:before {
  512. top: 5px;
  513. left: -23px;
  514. margin-right: 10px;
  515. display: block; }
  516. .sw-theme-dots > ul.step-anchor > li > a:after {
  517. top: -38px;
  518. left: -31px;
  519. margin-right: 10px;
  520. display: block; } }
  521. /*# sourceMappingURL=smartwizard.css.map */