step.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Color
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Border
  20. -------------------------- */
  21. /* Fill
  22. -------------------------- */
  23. /* Typography
  24. -------------------------- */
  25. /* Size
  26. -------------------------- */
  27. /* z-index
  28. -------------------------- */
  29. /* Disable base
  30. -------------------------- */
  31. /* Icon
  32. -------------------------- */
  33. /* Checkbox
  34. -------------------------- */
  35. /* Radio
  36. -------------------------- */
  37. /* Select
  38. -------------------------- */
  39. /* Alert
  40. -------------------------- */
  41. /* MessageBox
  42. -------------------------- */
  43. /* Message
  44. -------------------------- */
  45. /* Notification
  46. -------------------------- */
  47. /* Input
  48. -------------------------- */
  49. /* Cascader
  50. -------------------------- */
  51. /* Group
  52. -------------------------- */
  53. /* Tab
  54. -------------------------- */
  55. /* Button
  56. -------------------------- */
  57. /* cascader
  58. -------------------------- */
  59. /* Switch
  60. -------------------------- */
  61. /* Dialog
  62. -------------------------- */
  63. /* Table
  64. -------------------------- */
  65. /* Pagination
  66. -------------------------- */
  67. /* Popup
  68. -------------------------- */
  69. /* Popover
  70. -------------------------- */
  71. /* Tooltip
  72. -------------------------- */
  73. /* Tag
  74. -------------------------- */
  75. /* Tree
  76. -------------------------- */
  77. /* Dropdown
  78. -------------------------- */
  79. /* Badge
  80. -------------------------- */
  81. /* Card
  82. --------------------------*/
  83. /* Slider
  84. --------------------------*/
  85. /* Steps
  86. --------------------------*/
  87. /* Menu
  88. --------------------------*/
  89. /* Rate
  90. --------------------------*/
  91. /* DatePicker
  92. --------------------------*/
  93. /* Loading
  94. --------------------------*/
  95. /* Scrollbar
  96. --------------------------*/
  97. /* Carousel
  98. --------------------------*/
  99. /* Collapse
  100. --------------------------*/
  101. /* Transfer
  102. --------------------------*/
  103. /* Header
  104. --------------------------*/
  105. /* Footer
  106. --------------------------*/
  107. /* Main
  108. --------------------------*/
  109. /* Timeline
  110. --------------------------*/
  111. /* Backtop
  112. --------------------------*/
  113. /* Link
  114. --------------------------*/
  115. /* Calendar
  116. --------------------------*/
  117. /* Form
  118. -------------------------- */
  119. /* Avatar
  120. --------------------------*/
  121. /* Break-point
  122. --------------------------*/
  123. /* Break-points
  124. -------------------------- */
  125. /* Scrollbar
  126. -------------------------- */
  127. /* Placeholder
  128. -------------------------- */
  129. /* BEM
  130. -------------------------- */
  131. /* Element Chalk Variables */
  132. /* Transition
  133. -------------------------- */
  134. /* Color
  135. -------------------------- */
  136. /* 53a8ff */
  137. /* 66b1ff */
  138. /* 79bbff */
  139. /* 8cc5ff */
  140. /* a0cfff */
  141. /* b3d8ff */
  142. /* c6e2ff */
  143. /* d9ecff */
  144. /* ecf5ff */
  145. /* Link
  146. -------------------------- */
  147. /* Border
  148. -------------------------- */
  149. /* Fill
  150. -------------------------- */
  151. /* Typography
  152. -------------------------- */
  153. /* Size
  154. -------------------------- */
  155. /* z-index
  156. -------------------------- */
  157. /* Disable base
  158. -------------------------- */
  159. /* Icon
  160. -------------------------- */
  161. /* Checkbox
  162. -------------------------- */
  163. /* Radio
  164. -------------------------- */
  165. /* Select
  166. -------------------------- */
  167. /* Alert
  168. -------------------------- */
  169. /* MessageBox
  170. -------------------------- */
  171. /* Message
  172. -------------------------- */
  173. /* Notification
  174. -------------------------- */
  175. /* Input
  176. -------------------------- */
  177. /* Cascader
  178. -------------------------- */
  179. /* Group
  180. -------------------------- */
  181. /* Tab
  182. -------------------------- */
  183. /* Button
  184. -------------------------- */
  185. /* cascader
  186. -------------------------- */
  187. /* Switch
  188. -------------------------- */
  189. /* Dialog
  190. -------------------------- */
  191. /* Table
  192. -------------------------- */
  193. /* Pagination
  194. -------------------------- */
  195. /* Popup
  196. -------------------------- */
  197. /* Popover
  198. -------------------------- */
  199. /* Tooltip
  200. -------------------------- */
  201. /* Tag
  202. -------------------------- */
  203. /* Tree
  204. -------------------------- */
  205. /* Dropdown
  206. -------------------------- */
  207. /* Badge
  208. -------------------------- */
  209. /* Card
  210. --------------------------*/
  211. /* Slider
  212. --------------------------*/
  213. /* Steps
  214. --------------------------*/
  215. /* Menu
  216. --------------------------*/
  217. /* Rate
  218. --------------------------*/
  219. /* DatePicker
  220. --------------------------*/
  221. /* Loading
  222. --------------------------*/
  223. /* Scrollbar
  224. --------------------------*/
  225. /* Carousel
  226. --------------------------*/
  227. /* Collapse
  228. --------------------------*/
  229. /* Transfer
  230. --------------------------*/
  231. /* Header
  232. --------------------------*/
  233. /* Footer
  234. --------------------------*/
  235. /* Main
  236. --------------------------*/
  237. /* Timeline
  238. --------------------------*/
  239. /* Backtop
  240. --------------------------*/
  241. /* Link
  242. --------------------------*/
  243. /* Calendar
  244. --------------------------*/
  245. /* Form
  246. -------------------------- */
  247. /* Avatar
  248. --------------------------*/
  249. /* Break-point
  250. --------------------------*/
  251. .el-step {
  252. position: relative;
  253. -ms-flex-negative: 1;
  254. flex-shrink: 1; }
  255. .el-step:last-of-type .el-step__line {
  256. display: none; }
  257. .el-step:last-of-type.is-flex {
  258. -ms-flex-preferred-size: auto !important;
  259. flex-basis: auto !important;
  260. -ms-flex-negative: 0;
  261. flex-shrink: 0;
  262. -webkit-box-flex: 0;
  263. -ms-flex-positive: 0;
  264. flex-grow: 0; }
  265. .el-step:last-of-type .el-step__main, .el-step:last-of-type .el-step__description {
  266. padding-right: 0; }
  267. .el-step__head {
  268. position: relative;
  269. width: 100%; }
  270. .el-step__head.is-process {
  271. color: #303133;
  272. border-color: #303133; }
  273. .el-step__head.is-wait {
  274. color: #C0C4CC;
  275. border-color: #C0C4CC; }
  276. .el-step__head.is-success {
  277. color: #67C23A;
  278. border-color: #67C23A; }
  279. .el-step__head.is-error {
  280. color: #e7304e;
  281. border-color: #e7304e; }
  282. .el-step__head.is-finish {
  283. color: #2D74E7;
  284. border-color: #2D74E7; }
  285. .el-step__icon {
  286. position: relative;
  287. z-index: 1;
  288. display: -webkit-inline-box;
  289. display: -ms-inline-flexbox;
  290. display: inline-flex;
  291. -webkit-box-pack: center;
  292. -ms-flex-pack: center;
  293. justify-content: center;
  294. -webkit-box-align: center;
  295. -ms-flex-align: center;
  296. align-items: center;
  297. width: 24px;
  298. height: 24px;
  299. font-size: 14px;
  300. -webkit-box-sizing: border-box;
  301. box-sizing: border-box;
  302. background: #FFFFFF;
  303. -webkit-transition: .15s ease-out;
  304. transition: .15s ease-out; }
  305. .el-step__icon.is-text {
  306. border-radius: 50%;
  307. border: 2px solid;
  308. border-color: inherit; }
  309. .el-step__icon.is-icon {
  310. width: 40px; }
  311. .el-step__icon-inner {
  312. display: inline-block;
  313. -webkit-user-select: none;
  314. -moz-user-select: none;
  315. -ms-user-select: none;
  316. user-select: none;
  317. text-align: center;
  318. font-weight: bold;
  319. line-height: 1;
  320. color: inherit; }
  321. .el-step__icon-inner[class*=el-icon]:not(.is-status) {
  322. font-size: 25px;
  323. font-weight: normal; }
  324. .el-step__icon-inner.is-status {
  325. -webkit-transform: translateY(1px);
  326. transform: translateY(1px); }
  327. .el-step__line {
  328. position: absolute;
  329. border-color: inherit;
  330. background-color: #C0C4CC; }
  331. .el-step__line-inner {
  332. display: block;
  333. border-width: 1px;
  334. border-style: solid;
  335. border-color: inherit;
  336. -webkit-transition: .15s ease-out;
  337. transition: .15s ease-out;
  338. -webkit-box-sizing: border-box;
  339. box-sizing: border-box;
  340. width: 0;
  341. height: 0; }
  342. .el-step__main {
  343. white-space: normal;
  344. text-align: left; }
  345. .el-step__title {
  346. font-size: 16px;
  347. line-height: 38px; }
  348. .el-step__title.is-process {
  349. font-weight: bold;
  350. color: #303133; }
  351. .el-step__title.is-wait {
  352. color: #C0C4CC; }
  353. .el-step__title.is-success {
  354. color: #67C23A; }
  355. .el-step__title.is-error {
  356. color: #e7304e; }
  357. .el-step__title.is-finish {
  358. color: #2D74E7; }
  359. .el-step__description {
  360. padding-right: 10%;
  361. margin-top: -5px;
  362. font-size: 12px;
  363. line-height: 20px;
  364. font-weight: normal; }
  365. .el-step__description.is-process {
  366. color: #303133; }
  367. .el-step__description.is-wait {
  368. color: #C0C4CC; }
  369. .el-step__description.is-success {
  370. color: #67C23A; }
  371. .el-step__description.is-error {
  372. color: #e7304e; }
  373. .el-step__description.is-finish {
  374. color: #2D74E7; }
  375. .el-step.is-horizontal {
  376. display: inline-block; }
  377. .el-step.is-horizontal .el-step__line {
  378. height: 2px;
  379. top: 11px;
  380. left: 0;
  381. right: 0; }
  382. .el-step.is-vertical {
  383. display: -webkit-box;
  384. display: -ms-flexbox;
  385. display: flex; }
  386. .el-step.is-vertical .el-step__head {
  387. -webkit-box-flex: 0;
  388. -ms-flex-positive: 0;
  389. flex-grow: 0;
  390. width: 24px; }
  391. .el-step.is-vertical .el-step__main {
  392. padding-left: 10px;
  393. -webkit-box-flex: 1;
  394. -ms-flex-positive: 1;
  395. flex-grow: 1; }
  396. .el-step.is-vertical .el-step__title {
  397. line-height: 24px;
  398. padding-bottom: 8px; }
  399. .el-step.is-vertical .el-step__line {
  400. width: 2px;
  401. top: 0;
  402. bottom: 0;
  403. left: 11px; }
  404. .el-step.is-vertical .el-step__icon.is-icon {
  405. width: 24px; }
  406. .el-step.is-center .el-step__head {
  407. text-align: center; }
  408. .el-step.is-center .el-step__main {
  409. text-align: center; }
  410. .el-step.is-center .el-step__description {
  411. padding-left: 20%;
  412. padding-right: 20%; }
  413. .el-step.is-center .el-step__line {
  414. left: 50%;
  415. right: -50%; }
  416. .el-step.is-simple {
  417. display: -webkit-box;
  418. display: -ms-flexbox;
  419. display: flex;
  420. -webkit-box-align: center;
  421. -ms-flex-align: center;
  422. align-items: center; }
  423. .el-step.is-simple .el-step__head {
  424. width: auto;
  425. font-size: 0;
  426. padding-right: 10px; }
  427. .el-step.is-simple .el-step__icon {
  428. background: transparent;
  429. width: 16px;
  430. height: 16px;
  431. font-size: 12px; }
  432. .el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status) {
  433. font-size: 18px; }
  434. .el-step.is-simple .el-step__icon-inner.is-status {
  435. -webkit-transform: scale(0.8) translateY(1px);
  436. transform: scale(0.8) translateY(1px); }
  437. .el-step.is-simple .el-step__main {
  438. position: relative;
  439. display: -webkit-box;
  440. display: -ms-flexbox;
  441. display: flex;
  442. -webkit-box-align: stretch;
  443. -ms-flex-align: stretch;
  444. align-items: stretch;
  445. -webkit-box-flex: 1;
  446. -ms-flex-positive: 1;
  447. flex-grow: 1; }
  448. .el-step.is-simple .el-step__title {
  449. font-size: 16px;
  450. line-height: 20px; }
  451. .el-step.is-simple:not(:last-of-type) .el-step__title {
  452. max-width: 50%;
  453. word-break: break-all; }
  454. .el-step.is-simple .el-step__arrow {
  455. -webkit-box-flex: 1;
  456. -ms-flex-positive: 1;
  457. flex-grow: 1;
  458. display: -webkit-box;
  459. display: -ms-flexbox;
  460. display: flex;
  461. -webkit-box-align: center;
  462. -ms-flex-align: center;
  463. align-items: center;
  464. -webkit-box-pack: center;
  465. -ms-flex-pack: center;
  466. justify-content: center; }
  467. .el-step.is-simple .el-step__arrow::before, .el-step.is-simple .el-step__arrow::after {
  468. content: '';
  469. display: inline-block;
  470. position: absolute;
  471. height: 15px;
  472. width: 1px;
  473. background: #C0C4CC; }
  474. .el-step.is-simple .el-step__arrow::before {
  475. -webkit-transform: rotate(-45deg) translateY(-4px);
  476. transform: rotate(-45deg) translateY(-4px);
  477. -webkit-transform-origin: 0 0;
  478. transform-origin: 0 0; }
  479. .el-step.is-simple .el-step__arrow::after {
  480. -webkit-transform: rotate(45deg) translateY(4px);
  481. transform: rotate(45deg) translateY(4px);
  482. -webkit-transform-origin: 100% 100%;
  483. transform-origin: 100% 100%; }
  484. .el-step.is-simple:last-of-type .el-step__arrow {
  485. display: none; }