index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  1. .rc-steps {
  2. font-size: 0;
  3. width: 100%;
  4. line-height: 1.5;
  5. display: flex;
  6. }
  7. .rc-steps,
  8. .rc-steps * {
  9. box-sizing: border-box;
  10. }
  11. .rc-steps-item {
  12. position: relative;
  13. display: inline-block;
  14. vertical-align: top;
  15. flex: 1;
  16. overflow: hidden;
  17. }
  18. .rc-steps-item-container[role='button'] {
  19. cursor: pointer;
  20. transition: opacity 0.3s;
  21. }
  22. .rc-steps-item-container[role='button']:hover {
  23. opacity: 0.7;
  24. }
  25. .rc-steps-item:last-child {
  26. flex: none;
  27. }
  28. .rc-steps-item:last-child .rc-steps-item-tail,
  29. .rc-steps-item:last-child .rc-steps-item-title:after {
  30. display: none;
  31. }
  32. .rc-steps-item-container {
  33. display: inline-block;
  34. }
  35. .rc-steps-item-icon,
  36. .rc-steps-item-content {
  37. display: inline-block;
  38. vertical-align: top;
  39. }
  40. .rc-steps-item-icon {
  41. border: 1px solid #ccc;
  42. width: 26px;
  43. height: 26px;
  44. line-height: 26px;
  45. text-align: center;
  46. border-radius: 26px;
  47. font-size: 14px;
  48. margin-right: 8px;
  49. transition: background-color 0.3s, border-color 0.3s;
  50. }
  51. .rc-steps-item-icon > .rc-steps-icon {
  52. line-height: 1;
  53. top: -1px;
  54. color: #108ee9;
  55. position: relative;
  56. }
  57. .rc-steps-item-icon > .rc-steps-icon.rcicon {
  58. font-size: 12px;
  59. position: relative;
  60. top: -2px;
  61. }
  62. .rc-steps-item-tail {
  63. position: absolute;
  64. left: 0;
  65. width: 100%;
  66. top: 12px;
  67. padding: 0 10px;
  68. }
  69. .rc-steps-item-tail:after {
  70. content: '';
  71. display: inline-block;
  72. background: #e9e9e9;
  73. height: 1px;
  74. border-radius: 1px;
  75. width: 100%;
  76. transition: background 0.3s;
  77. }
  78. .rc-steps-item-content {
  79. margin-top: 3px;
  80. }
  81. .rc-steps-item-title {
  82. font-size: 14px;
  83. margin-bottom: 4px;
  84. color: #666;
  85. font-weight: bold;
  86. display: inline-block;
  87. padding-right: 10px;
  88. position: relative;
  89. }
  90. .rc-steps-item-title:after {
  91. content: '';
  92. height: 1px;
  93. width: 1000px;
  94. background: #e9e9e9;
  95. display: block;
  96. position: absolute;
  97. top: 0.55em;
  98. left: 100%;
  99. }
  100. .rc-steps-item-subtitle {
  101. font-size: 12px;
  102. display: inline-block;
  103. color: #999;
  104. margin-left: 8px;
  105. }
  106. .rc-steps-item-description {
  107. font-size: 12px;
  108. color: #999;
  109. }
  110. .rc-steps-item-wait .rc-steps-item-icon {
  111. border-color: #ccc;
  112. background-color: #fff;
  113. }
  114. .rc-steps-item-wait .rc-steps-item-icon > .rc-steps-icon {
  115. color: #ccc;
  116. }
  117. .rc-steps-item-wait .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
  118. background: #ccc;
  119. }
  120. .rc-steps-item-wait .rc-steps-item-title {
  121. color: rgba(0, 0, 0, 0.43);
  122. }
  123. .rc-steps-item-wait .rc-steps-item-title:after {
  124. background-color: #e9e9e9;
  125. }
  126. .rc-steps-item-wait .rc-steps-item-description {
  127. color: rgba(0, 0, 0, 0.43);
  128. }
  129. .rc-steps-item-wait .rc-steps-item-tail:after {
  130. background-color: #e9e9e9;
  131. }
  132. .rc-steps-item-process .rc-steps-item-icon {
  133. border-color: #108ee9;
  134. background-color: #fff;
  135. }
  136. .rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon {
  137. color: #108ee9;
  138. }
  139. .rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
  140. background: #108ee9;
  141. }
  142. .rc-steps-item-process .rc-steps-item-title {
  143. color: rgba(0, 0, 0, 0.65);
  144. }
  145. .rc-steps-item-process .rc-steps-item-title:after {
  146. background-color: #e9e9e9;
  147. }
  148. .rc-steps-item-process .rc-steps-item-description {
  149. color: rgba(0, 0, 0, 0.65);
  150. }
  151. .rc-steps-item-process .rc-steps-item-tail:after {
  152. background-color: #e9e9e9;
  153. }
  154. .rc-steps-item-process .rc-steps-item-icon {
  155. background: #108ee9;
  156. }
  157. .rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon {
  158. color: #fff;
  159. }
  160. .rc-steps-item-finish .rc-steps-item-icon {
  161. border-color: #108ee9;
  162. background-color: #fff;
  163. }
  164. .rc-steps-item-finish .rc-steps-item-icon > .rc-steps-icon {
  165. color: #108ee9;
  166. }
  167. .rc-steps-item-finish .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
  168. background: #108ee9;
  169. }
  170. .rc-steps-item-finish .rc-steps-item-title {
  171. color: rgba(0, 0, 0, 0.43);
  172. }
  173. .rc-steps-item-finish .rc-steps-item-title:after {
  174. background-color: #108ee9;
  175. }
  176. .rc-steps-item-finish .rc-steps-item-description {
  177. color: rgba(0, 0, 0, 0.43);
  178. }
  179. .rc-steps-item-finish .rc-steps-item-tail:after {
  180. background-color: #108ee9;
  181. }
  182. .rc-steps-item-error .rc-steps-item-icon {
  183. border-color: #f50;
  184. background-color: #fff;
  185. }
  186. .rc-steps-item-error .rc-steps-item-icon > .rc-steps-icon {
  187. color: #f50;
  188. }
  189. .rc-steps-item-error .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
  190. background: #f50;
  191. }
  192. .rc-steps-item-error .rc-steps-item-title {
  193. color: #f50;
  194. }
  195. .rc-steps-item-error .rc-steps-item-title:after {
  196. background-color: #e9e9e9;
  197. }
  198. .rc-steps-item-error .rc-steps-item-description {
  199. color: #f50;
  200. }
  201. .rc-steps-item-error .rc-steps-item-tail:after {
  202. background-color: #e9e9e9;
  203. }
  204. .rc-steps-item.rc-steps-next-error .rc-steps-item-title:after {
  205. background: #f50;
  206. }
  207. .rc-steps-horizontal:not(.rc-steps-label-vertical) .rc-steps-item {
  208. margin-right: 10px;
  209. }
  210. .rc-steps-horizontal:not(.rc-steps-label-vertical) .rc-steps-item:last-child {
  211. margin-right: 0;
  212. }
  213. .rc-steps-horizontal:not(.rc-steps-label-vertical) .rc-steps-item-tail {
  214. display: none;
  215. }
  216. .rc-steps-horizontal:not(.rc-steps-label-vertical) .rc-steps-item-description {
  217. max-width: 100px;
  218. }
  219. .rc-steps-item-custom .rc-steps-item-icon {
  220. background: none;
  221. border: 0;
  222. width: auto;
  223. height: auto;
  224. }
  225. .rc-steps-item-custom .rc-steps-item-icon > .rc-steps-icon {
  226. font-size: 20px;
  227. top: 1px;
  228. width: 20px;
  229. height: 20px;
  230. }
  231. .rc-steps-item-custom.rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon {
  232. color: #108ee9;
  233. }
  234. .rc-steps-small .rc-steps-item-icon {
  235. width: 18px;
  236. height: 18px;
  237. line-height: 18px;
  238. text-align: center;
  239. border-radius: 18px;
  240. font-size: 12px;
  241. margin-right: 10px;
  242. }
  243. .rc-steps-small .rc-steps-item-icon > .rc-steps-icon {
  244. font-size: 12px;
  245. font-size: 9px \9;
  246. transform: scale(0.75);
  247. top: -1px;
  248. }
  249. .rc-steps-small .rc-steps-item-content {
  250. margin-top: 0;
  251. }
  252. .rc-steps-small .rc-steps-item-title {
  253. font-size: 12px;
  254. margin-bottom: 4px;
  255. color: #666;
  256. font-weight: bold;
  257. }
  258. .rc-steps-small .rc-steps-item-description {
  259. font-size: 12px;
  260. color: #999;
  261. }
  262. .rc-steps-small .rc-steps-item-tail {
  263. top: 8px;
  264. padding: 0 8px;
  265. }
  266. .rc-steps-small .rc-steps-item-tail:after {
  267. height: 1px;
  268. border-radius: 1px;
  269. width: 100%;
  270. }
  271. .rc-steps-small .rc-steps-item-custom .rc-steps-item-icon {
  272. width: inherit;
  273. height: inherit;
  274. line-height: inherit;
  275. border-radius: 0;
  276. border: 0;
  277. background: none;
  278. }
  279. .rc-steps-small .rc-steps-item-custom .rc-steps-item-icon > .rc-steps-icon {
  280. font-size: 20px;
  281. top: -2.5px;
  282. transform: none;
  283. }
  284. .rc-steps-vertical {
  285. display: block;
  286. }
  287. .rc-steps-vertical .rc-steps-item {
  288. display: block;
  289. overflow: visible;
  290. }
  291. .rc-steps-vertical .rc-steps-item-icon {
  292. float: left;
  293. }
  294. .rc-steps-vertical .rc-steps-item-icon-inner {
  295. margin-right: 16px;
  296. }
  297. .rc-steps-vertical .rc-steps-item-content {
  298. min-height: 48px;
  299. overflow: hidden;
  300. display: block;
  301. }
  302. .rc-steps-vertical .rc-steps-item-title {
  303. line-height: 26px;
  304. }
  305. .rc-steps-vertical .rc-steps-item-title:after {
  306. display: none;
  307. }
  308. .rc-steps-vertical .rc-steps-item-description {
  309. padding-bottom: 12px;
  310. }
  311. .rc-steps-vertical .rc-steps-item-tail {
  312. position: absolute;
  313. left: 13px;
  314. top: 0;
  315. height: 100%;
  316. width: 1px;
  317. padding: 30px 0 4px 0;
  318. }
  319. .rc-steps-vertical .rc-steps-item-tail:after {
  320. height: 100%;
  321. width: 1px;
  322. }
  323. .rc-steps-vertical.rc-steps-small .rc-steps-item-tail {
  324. position: absolute;
  325. left: 9px;
  326. top: 0;
  327. padding: 22px 0 4px 0;
  328. }
  329. .rc-steps-vertical.rc-steps-small .rc-steps-item-title {
  330. line-height: 18px;
  331. }
  332. .rc-steps-label-vertical .rc-steps-item {
  333. overflow: visible;
  334. }
  335. .rc-steps-label-vertical .rc-steps-item-tail {
  336. padding: 0px 24px;
  337. margin-left: 48px;
  338. }
  339. .rc-steps-label-vertical .rc-steps-item-content {
  340. display: block;
  341. text-align: center;
  342. margin-top: 8px;
  343. width: 100px;
  344. }
  345. .rc-steps-label-vertical .rc-steps-item-icon {
  346. display: inline-block;
  347. margin-left: 36px;
  348. }
  349. .rc-steps-label-vertical .rc-steps-item-title {
  350. padding-right: 0;
  351. }
  352. .rc-steps-label-vertical .rc-steps-item-title:after {
  353. display: none;
  354. }
  355. .rc-steps-label-vertical .rc-steps-item-description {
  356. text-align: left;
  357. }
  358. .rc-steps-dot .rc-steps-item-tail {
  359. width: 100%;
  360. top: 1px;
  361. margin: 0 0 0 50px;
  362. padding: 0;
  363. }
  364. .rc-steps-dot .rc-steps-item-tail:after {
  365. height: 3px;
  366. }
  367. .rc-steps-dot .rc-steps-item-icon {
  368. padding-right: 0;
  369. width: 5px;
  370. height: 5px;
  371. line-height: 5px;
  372. border: 0;
  373. margin-left: 48px;
  374. }
  375. .rc-steps-dot .rc-steps-item-icon .rc-steps-icon-dot {
  376. float: left;
  377. width: 100%;
  378. height: 100%;
  379. border-radius: 2.5px;
  380. }
  381. .rc-steps-dot .rc-steps-item-process .rc-steps-dot .rc-steps-item-icon {
  382. top: -1px;
  383. width: 7px;
  384. height: 7px;
  385. line-height: 7px;
  386. }
  387. .rc-steps-dot .rc-steps-item-process .rc-steps-dot .rc-steps-item-icon .rc-steps-icon-dot {
  388. border-radius: 3.5px;
  389. }
  390. .rc-steps-navigation {
  391. padding-top: 8px;
  392. }
  393. .rc-steps-navigation.rc-steps-horizontal .rc-steps-item-description {
  394. max-width: 140px;
  395. }
  396. .rc-steps-navigation .rc-steps-item {
  397. box-sizing: border-box;
  398. text-align: center;
  399. overflow: visible;
  400. }
  401. .rc-steps-navigation .rc-steps-item-container {
  402. text-align: left;
  403. padding-bottom: 8px;
  404. outline: none;
  405. }
  406. .rc-steps-navigation .rc-steps-item-title {
  407. max-width: 140px;
  408. white-space: nowrap;
  409. overflow: hidden;
  410. text-overflow: ellipsis;
  411. }
  412. .rc-steps-navigation .rc-steps-item-title:after {
  413. display: none;
  414. }
  415. .rc-steps-navigation .rc-steps-item:last-child {
  416. flex: 1;
  417. }
  418. .rc-steps-navigation .rc-steps-item:last-child:after {
  419. display: none;
  420. }
  421. .rc-steps-navigation .rc-steps-item:after {
  422. content: '';
  423. display: inline-block;
  424. width: 16px;
  425. height: 16px;
  426. border: 1px solid #ccc;
  427. border-bottom: none;
  428. border-left: none;
  429. transform: rotate(45deg);
  430. position: absolute;
  431. top: 50%;
  432. left: 100%;
  433. margin-top: -12px;
  434. margin-left: -8px;
  435. }
  436. .rc-steps-navigation .rc-steps-item-active .rc-steps-item-container {
  437. padding-bottom: 5px;
  438. border-bottom: 3px solid #108ee9;
  439. }
  440. .rc-steps-inline {
  441. width: auto;
  442. display: inline-flex;
  443. }
  444. .rc-steps-inline .rc-steps-item {
  445. flex: none;
  446. }
  447. .rc-steps-inline .rc-steps-item-container {
  448. padding: 9px 4px 0;
  449. margin: 0 2px;
  450. border-radius: 4px;
  451. cursor: pointer;
  452. }
  453. .rc-steps-inline .rc-steps-item-container:hover {
  454. background: rgba(0, 0, 0, 0.04);
  455. }
  456. .rc-steps-inline .rc-steps-item-container[role='button']:hover {
  457. opacity: 1;
  458. }
  459. .rc-steps-inline .rc-steps-item-icon {
  460. width: 6px;
  461. height: 6px;
  462. margin-left: calc(50% - 3px);
  463. }
  464. .rc-steps-inline .rc-steps-item-icon > .rc-steps-icon {
  465. top: 0;
  466. }
  467. .rc-steps-inline .rc-steps-item-icon .rc-steps-icon-dot {
  468. border-radius: 3px;
  469. }
  470. .rc-steps-inline .rc-steps-item-content {
  471. width: auto;
  472. margin-top: 7px;
  473. }
  474. .rc-steps-inline .rc-steps-item-title {
  475. color: rgba(0, 0, 0, 0.25);
  476. font-size: 12px;
  477. line-height: 20px;
  478. font-weight: normal;
  479. margin-bottom: 2px;
  480. }
  481. .rc-steps-inline .rc-steps-item-description {
  482. display: none;
  483. }
  484. .rc-steps-inline .rc-steps-item-tail {
  485. margin-left: 0;
  486. top: 11px;
  487. }
  488. .rc-steps-inline .rc-steps-item-tail:after {
  489. height: 1px;
  490. }
  491. .rc-steps-inline .rc-steps-item:first-child .rc-steps-item-tail {
  492. width: 50%;
  493. margin-left: 50%;
  494. }
  495. .rc-steps-inline .rc-steps-item:last-child .rc-steps-item-tail {
  496. display: block;
  497. width: 50%;
  498. }
  499. .rc-steps-inline .rc-steps-item-finish .rc-steps-item-tail:after {
  500. background-color: #e9e9e9;
  501. }
  502. .rc-steps-inline .rc-steps-item-finish .rc-steps-item-icon .rc-steps-icon .rc-steps-icon-dot {
  503. background-color: #e9e9e9;
  504. }
  505. .rc-steps-inline .rc-steps-item-wait .rc-steps-item-icon .rc-steps-icon .rc-steps-icon-dot {
  506. background-color: #fff;
  507. border: 1px solid #e9e9e9;
  508. }