app模板、应用模板、组件模板、widget模板
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

972 lines
25 KiB

4 years ago
  1. [data-theme="blue"] {
  2. /* BEM support Func
  3. -------------------------- */
  4. /* Element Chalk Variables */
  5. /* Transition
  6. -------------------------- */
  7. /* Color
  8. -------------------------- */
  9. /* 53a8ff */
  10. /* 66b1ff */
  11. /* 79bbff */
  12. /* 8cc5ff */
  13. /* a0cfff */
  14. /* b3d8ff */
  15. /* c6e2ff */
  16. /* d9ecff */
  17. /* ecf5ff */
  18. /* Link
  19. -------------------------- */
  20. /* Border
  21. -------------------------- */
  22. /* Fill
  23. -------------------------- */
  24. /* Typography
  25. -------------------------- */
  26. /* Size
  27. -------------------------- */
  28. /* z-index
  29. -------------------------- */
  30. /* Disable base
  31. -------------------------- */
  32. /* Icon
  33. -------------------------- */
  34. /* Checkbox
  35. -------------------------- */
  36. /* Radio
  37. -------------------------- */
  38. /* Select
  39. -------------------------- */
  40. /* Alert
  41. -------------------------- */
  42. /* MessageBox
  43. -------------------------- */
  44. /* Message
  45. -------------------------- */
  46. /* Notification
  47. -------------------------- */
  48. /* Input
  49. -------------------------- */
  50. /* Cascader
  51. -------------------------- */
  52. /* Group
  53. -------------------------- */
  54. /* Tab
  55. -------------------------- */
  56. /* Button
  57. -------------------------- */
  58. /* cascader
  59. -------------------------- */
  60. /* Switch
  61. -------------------------- */
  62. /* Dialog
  63. -------------------------- */
  64. /* Table
  65. -------------------------- */
  66. /* Pagination
  67. -------------------------- */
  68. /* Popup
  69. -------------------------- */
  70. /* Popover
  71. -------------------------- */
  72. /* Tooltip
  73. -------------------------- */
  74. /* Tag
  75. -------------------------- */
  76. /* Tree
  77. -------------------------- */
  78. /* Dropdown
  79. -------------------------- */
  80. /* Badge
  81. -------------------------- */
  82. /* Card
  83. --------------------------*/
  84. /* Slider
  85. --------------------------*/
  86. /* Steps
  87. --------------------------*/
  88. /* Menu
  89. --------------------------*/
  90. /* Rate
  91. --------------------------*/
  92. /* DatePicker
  93. --------------------------*/
  94. /* Loading
  95. --------------------------*/
  96. /* Scrollbar
  97. --------------------------*/
  98. /* Carousel
  99. --------------------------*/
  100. /* Collapse
  101. --------------------------*/
  102. /* Transfer
  103. --------------------------*/
  104. /* Header
  105. --------------------------*/
  106. /* Footer
  107. --------------------------*/
  108. /* Main
  109. --------------------------*/
  110. /* Timeline
  111. --------------------------*/
  112. /* Backtop
  113. --------------------------*/
  114. /* Link
  115. --------------------------*/
  116. /* Calendar
  117. --------------------------*/
  118. /* Form
  119. -------------------------- */
  120. /* Avatar
  121. --------------------------*/
  122. /* Break-point
  123. --------------------------*/
  124. /* Break-points
  125. -------------------------- */
  126. /* Scrollbar
  127. -------------------------- */
  128. /* Placeholder
  129. -------------------------- */
  130. /* BEM
  131. -------------------------- */
  132. /* Element Chalk Variables */
  133. /* Transition
  134. -------------------------- */
  135. /* Color
  136. -------------------------- */
  137. /* 53a8ff */
  138. /* 66b1ff */
  139. /* 79bbff */
  140. /* 8cc5ff */
  141. /* a0cfff */
  142. /* b3d8ff */
  143. /* c6e2ff */
  144. /* d9ecff */
  145. /* ecf5ff */
  146. /* Link
  147. -------------------------- */
  148. /* Border
  149. -------------------------- */
  150. /* Fill
  151. -------------------------- */
  152. /* Typography
  153. -------------------------- */
  154. /* Size
  155. -------------------------- */
  156. /* z-index
  157. -------------------------- */
  158. /* Disable base
  159. -------------------------- */
  160. /* Icon
  161. -------------------------- */
  162. /* Checkbox
  163. -------------------------- */
  164. /* Radio
  165. -------------------------- */
  166. /* Select
  167. -------------------------- */
  168. /* Alert
  169. -------------------------- */
  170. /* MessageBox
  171. -------------------------- */
  172. /* Message
  173. -------------------------- */
  174. /* Notification
  175. -------------------------- */
  176. /* Input
  177. -------------------------- */
  178. /* Cascader
  179. -------------------------- */
  180. /* Group
  181. -------------------------- */
  182. /* Tab
  183. -------------------------- */
  184. /* Button
  185. -------------------------- */
  186. /* cascader
  187. -------------------------- */
  188. /* Switch
  189. -------------------------- */
  190. /* Dialog
  191. -------------------------- */
  192. /* Table
  193. -------------------------- */
  194. /* Pagination
  195. -------------------------- */
  196. /* Popup
  197. -------------------------- */
  198. /* Popover
  199. -------------------------- */
  200. /* Tooltip
  201. -------------------------- */
  202. /* Tag
  203. -------------------------- */
  204. /* Tree
  205. -------------------------- */
  206. /* Dropdown
  207. -------------------------- */
  208. /* Badge
  209. -------------------------- */
  210. /* Card
  211. --------------------------*/
  212. /* Slider
  213. --------------------------*/
  214. /* Steps
  215. --------------------------*/
  216. /* Menu
  217. --------------------------*/
  218. /* Rate
  219. --------------------------*/
  220. /* DatePicker
  221. --------------------------*/
  222. /* Loading
  223. --------------------------*/
  224. /* Scrollbar
  225. --------------------------*/
  226. /* Carousel
  227. --------------------------*/
  228. /* Collapse
  229. --------------------------*/
  230. /* Transfer
  231. --------------------------*/
  232. /* Header
  233. --------------------------*/
  234. /* Footer
  235. --------------------------*/
  236. /* Main
  237. --------------------------*/
  238. /* Timeline
  239. --------------------------*/
  240. /* Backtop
  241. --------------------------*/
  242. /* Link
  243. --------------------------*/
  244. /* Calendar
  245. --------------------------*/
  246. /* Form
  247. -------------------------- */
  248. /* Avatar
  249. --------------------------*/
  250. /* Break-point
  251. --------------------------*/ }
  252. [data-theme="blue"] .el-step {
  253. position: relative;
  254. -ms-flex-negative: 1;
  255. flex-shrink: 1; }
  256. [data-theme="blue"] .el-step:last-of-type .el-step__line {
  257. display: none; }
  258. [data-theme="blue"] .el-step:last-of-type.is-flex {
  259. -ms-flex-preferred-size: auto !important;
  260. flex-basis: auto !important;
  261. -ms-flex-negative: 0;
  262. flex-shrink: 0;
  263. -webkit-box-flex: 0;
  264. -ms-flex-positive: 0;
  265. flex-grow: 0; }
  266. [data-theme="blue"] .el-step:last-of-type .el-step__main, [data-theme="blue"] .el-step:last-of-type .el-step__description {
  267. padding-right: 0; }
  268. .el-step__head {
  269. position: relative;
  270. width: 100%; }
  271. .el-step__head.is-process {
  272. color: #aaa;
  273. border-color: #000000; }
  274. .el-step__head.is-wait {
  275. color: rgba(255, 255, 255, 0.5);
  276. border-color: rgba(255, 255, 255, 0.5); }
  277. .el-step__head.is-success {
  278. color: #92D9FF;
  279. border-color: #92D9FF; }
  280. .el-step__head.is-error {
  281. color: #FF6D6D;
  282. border-color: #FF6D6D; }
  283. .el-step__head.is-finish {
  284. color: #92D9FF;
  285. border-color: #92D9FF; }
  286. .el-step__icon {
  287. position: relative;
  288. z-index: 1;
  289. display: -webkit-inline-box;
  290. display: -ms-inline-flexbox;
  291. display: inline-flex;
  292. -webkit-box-pack: center;
  293. -ms-flex-pack: center;
  294. justify-content: center;
  295. -webkit-box-align: center;
  296. -ms-flex-align: center;
  297. align-items: center;
  298. width: 24px;
  299. height: 24px;
  300. font-size: 14px;
  301. -webkit-box-sizing: border-box;
  302. box-sizing: border-box;
  303. background: #000000;
  304. -webkit-transition: .15s ease-out;
  305. transition: .15s ease-out; }
  306. .el-step__icon.is-text {
  307. border-radius: 50%;
  308. border: 2px solid;
  309. border-color: inherit; }
  310. .el-step__icon.is-icon {
  311. width: 40px; }
  312. .el-step__icon-inner {
  313. display: inline-block;
  314. -webkit-user-select: none;
  315. -moz-user-select: none;
  316. -ms-user-select: none;
  317. user-select: none;
  318. text-align: center;
  319. font-weight: bold;
  320. line-height: 1;
  321. color: inherit; }
  322. .el-step__icon-inner[class*=el-icon]:not(.is-status) {
  323. font-size: 25px;
  324. font-weight: normal; }
  325. .el-step__icon-inner.is-status {
  326. -webkit-transform: translateY(1px);
  327. transform: translateY(1px); }
  328. .el-step__line {
  329. position: absolute;
  330. border-color: inherit;
  331. background-color: rgba(255, 255, 255, 0.5); }
  332. .el-step__line-inner {
  333. display: block;
  334. border-width: 1px;
  335. border-style: solid;
  336. border-color: inherit;
  337. -webkit-transition: .15s ease-out;
  338. transition: .15s ease-out;
  339. -webkit-box-sizing: border-box;
  340. box-sizing: border-box;
  341. width: 0;
  342. height: 0; }
  343. .el-step__main {
  344. white-space: normal;
  345. text-align: left; }
  346. .el-step__title {
  347. font-size: 16px;
  348. line-height: 38px; }
  349. .el-step__title.is-process {
  350. font-weight: bold;
  351. color: #aaa; }
  352. .el-step__title.is-wait {
  353. color: rgba(255, 255, 255, 0.5); }
  354. .el-step__title.is-success {
  355. color: #92D9FF; }
  356. .el-step__title.is-error {
  357. color: #FF6D6D; }
  358. .el-step__title.is-finish {
  359. color: #92D9FF; }
  360. .el-step__description {
  361. padding-right: 10%;
  362. margin-top: -5px;
  363. font-size: 12px;
  364. line-height: 20px;
  365. font-weight: normal; }
  366. .el-step__description.is-process {
  367. color: #aaa; }
  368. .el-step__description.is-wait {
  369. color: rgba(255, 255, 255, 0.5); }
  370. .el-step__description.is-success {
  371. color: #92D9FF; }
  372. .el-step__description.is-error {
  373. color: #FF6D6D; }
  374. .el-step__description.is-finish {
  375. color: #92D9FF; }
  376. [data-theme="blue"] .el-step.is-horizontal {
  377. display: inline-block; }
  378. [data-theme="blue"] .el-step.is-horizontal .el-step__line {
  379. height: 2px;
  380. top: 11px;
  381. left: 0;
  382. right: 0; }
  383. [data-theme="blue"] .el-step.is-vertical {
  384. display: -webkit-box;
  385. display: -ms-flexbox;
  386. display: flex; }
  387. [data-theme="blue"] .el-step.is-vertical .el-step__head {
  388. -webkit-box-flex: 0;
  389. -ms-flex-positive: 0;
  390. flex-grow: 0;
  391. width: 24px; }
  392. [data-theme="blue"] .el-step.is-vertical .el-step__main {
  393. padding-left: 10px;
  394. -webkit-box-flex: 1;
  395. -ms-flex-positive: 1;
  396. flex-grow: 1; }
  397. [data-theme="blue"] .el-step.is-vertical .el-step__title {
  398. line-height: 24px;
  399. padding-bottom: 8px; }
  400. [data-theme="blue"] .el-step.is-vertical .el-step__line {
  401. width: 2px;
  402. top: 0;
  403. bottom: 0;
  404. left: 11px; }
  405. [data-theme="blue"] .el-step.is-vertical .el-step__icon.is-icon {
  406. width: 24px; }
  407. [data-theme="blue"] .el-step.is-center .el-step__head {
  408. text-align: center; }
  409. [data-theme="blue"] .el-step.is-center .el-step__main {
  410. text-align: center; }
  411. [data-theme="blue"] .el-step.is-center .el-step__description {
  412. padding-left: 20%;
  413. padding-right: 20%; }
  414. [data-theme="blue"] .el-step.is-center .el-step__line {
  415. left: 50%;
  416. right: -50%; }
  417. [data-theme="blue"] .el-step.is-simple {
  418. display: -webkit-box;
  419. display: -ms-flexbox;
  420. display: flex;
  421. -webkit-box-align: center;
  422. -ms-flex-align: center;
  423. align-items: center; }
  424. [data-theme="blue"] .el-step.is-simple .el-step__head {
  425. width: auto;
  426. font-size: 0;
  427. padding-right: 10px; }
  428. [data-theme="blue"] .el-step.is-simple .el-step__icon {
  429. background: transparent;
  430. width: 16px;
  431. height: 16px;
  432. font-size: 12px; }
  433. [data-theme="blue"] .el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status) {
  434. font-size: 18px; }
  435. [data-theme="blue"] .el-step.is-simple .el-step__icon-inner.is-status {
  436. -webkit-transform: scale(0.8) translateY(1px);
  437. transform: scale(0.8) translateY(1px); }
  438. [data-theme="blue"] .el-step.is-simple .el-step__main {
  439. position: relative;
  440. display: -webkit-box;
  441. display: -ms-flexbox;
  442. display: flex;
  443. -webkit-box-align: stretch;
  444. -ms-flex-align: stretch;
  445. align-items: stretch;
  446. -webkit-box-flex: 1;
  447. -ms-flex-positive: 1;
  448. flex-grow: 1; }
  449. [data-theme="blue"] .el-step.is-simple .el-step__title {
  450. font-size: 16px;
  451. line-height: 20px; }
  452. [data-theme="blue"] .el-step.is-simple:not(:last-of-type) .el-step__title {
  453. max-width: 50%;
  454. word-break: break-all; }
  455. [data-theme="blue"] .el-step.is-simple .el-step__arrow {
  456. -webkit-box-flex: 1;
  457. -ms-flex-positive: 1;
  458. flex-grow: 1;
  459. display: -webkit-box;
  460. display: -ms-flexbox;
  461. display: flex;
  462. -webkit-box-align: center;
  463. -ms-flex-align: center;
  464. align-items: center;
  465. -webkit-box-pack: center;
  466. -ms-flex-pack: center;
  467. justify-content: center; }
  468. [data-theme="blue"] .el-step.is-simple .el-step__arrow::before, [data-theme="blue"] .el-step.is-simple .el-step__arrow::after {
  469. content: '';
  470. display: inline-block;
  471. position: absolute;
  472. height: 15px;
  473. width: 1px;
  474. background: rgba(255, 255, 255, 0.5); }
  475. [data-theme="blue"] .el-step.is-simple .el-step__arrow::before {
  476. -webkit-transform: rotate(-45deg) translateY(-4px);
  477. transform: rotate(-45deg) translateY(-4px);
  478. -webkit-transform-origin: 0 0;
  479. transform-origin: 0 0; }
  480. [data-theme="blue"] .el-step.is-simple .el-step__arrow::after {
  481. -webkit-transform: rotate(45deg) translateY(4px);
  482. transform: rotate(45deg) translateY(4px);
  483. -webkit-transform-origin: 100% 100%;
  484. transform-origin: 100% 100%; }
  485. [data-theme="blue"] .el-step.is-simple:last-of-type .el-step__arrow {
  486. display: none; }
  487. /* BEM support Func
  488. -------------------------- */
  489. /* Element Chalk Variables */
  490. /* Transition
  491. -------------------------- */
  492. /* Color
  493. -------------------------- */
  494. /* 53a8ff */
  495. /* 66b1ff */
  496. /* 79bbff */
  497. /* 8cc5ff */
  498. /* a0cfff */
  499. /* b3d8ff */
  500. /* c6e2ff */
  501. /* d9ecff */
  502. /* ecf5ff */
  503. /* Link
  504. -------------------------- */
  505. /* Border
  506. -------------------------- */
  507. /* Fill
  508. -------------------------- */
  509. /* Typography
  510. -------------------------- */
  511. /* Size
  512. -------------------------- */
  513. /* z-index
  514. -------------------------- */
  515. /* Disable base
  516. -------------------------- */
  517. /* Icon
  518. -------------------------- */
  519. /* Checkbox
  520. -------------------------- */
  521. /* Radio
  522. -------------------------- */
  523. /* Select
  524. -------------------------- */
  525. /* Alert
  526. -------------------------- */
  527. /* MessageBox
  528. -------------------------- */
  529. /* Message
  530. -------------------------- */
  531. /* Notification
  532. -------------------------- */
  533. /* Input
  534. -------------------------- */
  535. /* Cascader
  536. -------------------------- */
  537. /* Group
  538. -------------------------- */
  539. /* Tab
  540. -------------------------- */
  541. /* Button
  542. -------------------------- */
  543. /* cascader
  544. -------------------------- */
  545. /* Switch
  546. -------------------------- */
  547. /* Dialog
  548. -------------------------- */
  549. /* Table
  550. -------------------------- */
  551. /* Pagination
  552. -------------------------- */
  553. /* Popup
  554. -------------------------- */
  555. /* Popover
  556. -------------------------- */
  557. /* Tooltip
  558. -------------------------- */
  559. /* Tag
  560. -------------------------- */
  561. /* Tree
  562. -------------------------- */
  563. /* Dropdown
  564. -------------------------- */
  565. /* Badge
  566. -------------------------- */
  567. /* Card
  568. --------------------------*/
  569. /* Slider
  570. --------------------------*/
  571. /* Steps
  572. --------------------------*/
  573. /* Menu
  574. --------------------------*/
  575. /* Rate
  576. --------------------------*/
  577. /* DatePicker
  578. --------------------------*/
  579. /* Loading
  580. --------------------------*/
  581. /* Scrollbar
  582. --------------------------*/
  583. /* Carousel
  584. --------------------------*/
  585. /* Collapse
  586. --------------------------*/
  587. /* Transfer
  588. --------------------------*/
  589. /* Header
  590. --------------------------*/
  591. /* Footer
  592. --------------------------*/
  593. /* Main
  594. --------------------------*/
  595. /* Timeline
  596. --------------------------*/
  597. /* Backtop
  598. --------------------------*/
  599. /* Link
  600. --------------------------*/
  601. /* Calendar
  602. --------------------------*/
  603. /* Form
  604. -------------------------- */
  605. /* Avatar
  606. --------------------------*/
  607. /* Break-point
  608. --------------------------*/
  609. /* Break-points
  610. -------------------------- */
  611. /* Scrollbar
  612. -------------------------- */
  613. /* Placeholder
  614. -------------------------- */
  615. /* BEM
  616. -------------------------- */
  617. /* Element Chalk Variables */
  618. /* Transition
  619. -------------------------- */
  620. /* Color
  621. -------------------------- */
  622. /* 53a8ff */
  623. /* 66b1ff */
  624. /* 79bbff */
  625. /* 8cc5ff */
  626. /* a0cfff */
  627. /* b3d8ff */
  628. /* c6e2ff */
  629. /* d9ecff */
  630. /* ecf5ff */
  631. /* Link
  632. -------------------------- */
  633. /* Border
  634. -------------------------- */
  635. /* Fill
  636. -------------------------- */
  637. /* Typography
  638. -------------------------- */
  639. /* Size
  640. -------------------------- */
  641. /* z-index
  642. -------------------------- */
  643. /* Disable base
  644. -------------------------- */
  645. /* Icon
  646. -------------------------- */
  647. /* Checkbox
  648. -------------------------- */
  649. /* Radio
  650. -------------------------- */
  651. /* Select
  652. -------------------------- */
  653. /* Alert
  654. -------------------------- */
  655. /* MessageBox
  656. -------------------------- */
  657. /* Message
  658. -------------------------- */
  659. /* Notification
  660. -------------------------- */
  661. /* Input
  662. -------------------------- */
  663. /* Cascader
  664. -------------------------- */
  665. /* Group
  666. -------------------------- */
  667. /* Tab
  668. -------------------------- */
  669. /* Button
  670. -------------------------- */
  671. /* cascader
  672. -------------------------- */
  673. /* Switch
  674. -------------------------- */
  675. /* Dialog
  676. -------------------------- */
  677. /* Table
  678. -------------------------- */
  679. /* Pagination
  680. -------------------------- */
  681. /* Popup
  682. -------------------------- */
  683. /* Popover
  684. -------------------------- */
  685. /* Tooltip
  686. -------------------------- */
  687. /* Tag
  688. -------------------------- */
  689. /* Tree
  690. -------------------------- */
  691. /* Dropdown
  692. -------------------------- */
  693. /* Badge
  694. -------------------------- */
  695. /* Card
  696. --------------------------*/
  697. /* Slider
  698. --------------------------*/
  699. /* Steps
  700. --------------------------*/
  701. /* Menu
  702. --------------------------*/
  703. /* Rate
  704. --------------------------*/
  705. /* DatePicker
  706. --------------------------*/
  707. /* Loading
  708. --------------------------*/
  709. /* Scrollbar
  710. --------------------------*/
  711. /* Carousel
  712. --------------------------*/
  713. /* Collapse
  714. --------------------------*/
  715. /* Transfer
  716. --------------------------*/
  717. /* Header
  718. --------------------------*/
  719. /* Footer
  720. --------------------------*/
  721. /* Main
  722. --------------------------*/
  723. /* Timeline
  724. --------------------------*/
  725. /* Backtop
  726. --------------------------*/
  727. /* Link
  728. --------------------------*/
  729. /* Calendar
  730. --------------------------*/
  731. /* Form
  732. -------------------------- */
  733. /* Avatar
  734. --------------------------*/
  735. /* Break-point
  736. --------------------------*/
  737. .el-step {
  738. position: relative;
  739. -ms-flex-negative: 1;
  740. flex-shrink: 1; }
  741. .el-step:last-of-type .el-step__line {
  742. display: none; }
  743. .el-step:last-of-type.is-flex {
  744. -ms-flex-preferred-size: auto !important;
  745. flex-basis: auto !important;
  746. -ms-flex-negative: 0;
  747. flex-shrink: 0;
  748. -webkit-box-flex: 0;
  749. -ms-flex-positive: 0;
  750. flex-grow: 0; }
  751. .el-step:last-of-type .el-step__main, .el-step:last-of-type .el-step__description {
  752. padding-right: 0; }
  753. .el-step__head {
  754. position: relative;
  755. width: 100%; }
  756. .el-step__head.is-process {
  757. color: #aaa;
  758. border-color: #000000; }
  759. .el-step__head.is-wait {
  760. color: rgba(255, 255, 255, 0.5);
  761. border-color: rgba(255, 255, 255, 0.5); }
  762. .el-step__head.is-success {
  763. color: #92D9FF;
  764. border-color: #92D9FF; }
  765. .el-step__head.is-error {
  766. color: #FF6D6D;
  767. border-color: #FF6D6D; }
  768. .el-step__head.is-finish {
  769. color: #92D9FF;
  770. border-color: #92D9FF; }
  771. .el-step__icon {
  772. position: relative;
  773. z-index: 1;
  774. display: -webkit-inline-box;
  775. display: -ms-inline-flexbox;
  776. display: inline-flex;
  777. -webkit-box-pack: center;
  778. -ms-flex-pack: center;
  779. justify-content: center;
  780. -webkit-box-align: center;
  781. -ms-flex-align: center;
  782. align-items: center;
  783. width: 24px;
  784. height: 24px;
  785. font-size: 14px;
  786. -webkit-box-sizing: border-box;
  787. box-sizing: border-box;
  788. background: #000000;
  789. -webkit-transition: .15s ease-out;
  790. transition: .15s ease-out; }
  791. .el-step__icon.is-text {
  792. border-radius: 50%;
  793. border: 2px solid;
  794. border-color: inherit; }
  795. .el-step__icon.is-icon {
  796. width: 40px; }
  797. .el-step__icon-inner {
  798. display: inline-block;
  799. -webkit-user-select: none;
  800. -moz-user-select: none;
  801. -ms-user-select: none;
  802. user-select: none;
  803. text-align: center;
  804. font-weight: bold;
  805. line-height: 1;
  806. color: inherit; }
  807. .el-step__icon-inner[class*=el-icon]:not(.is-status) {
  808. font-size: 25px;
  809. font-weight: normal; }
  810. .el-step__icon-inner.is-status {
  811. -webkit-transform: translateY(1px);
  812. transform: translateY(1px); }
  813. .el-step__line {
  814. position: absolute;
  815. border-color: inherit;
  816. background-color: rgba(255, 255, 255, 0.5); }
  817. .el-step__line-inner {
  818. display: block;
  819. border-width: 1px;
  820. border-style: solid;
  821. border-color: inherit;
  822. -webkit-transition: .15s ease-out;
  823. transition: .15s ease-out;
  824. -webkit-box-sizing: border-box;
  825. box-sizing: border-box;
  826. width: 0;
  827. height: 0; }
  828. .el-step__main {
  829. white-space: normal;
  830. text-align: left; }
  831. .el-step__title {
  832. font-size: 16px;
  833. line-height: 38px; }
  834. .el-step__title.is-process {
  835. font-weight: bold;
  836. color: #aaa; }
  837. .el-step__title.is-wait {
  838. color: rgba(255, 255, 255, 0.5); }
  839. .el-step__title.is-success {
  840. color: #92D9FF; }
  841. .el-step__title.is-error {
  842. color: #FF6D6D; }
  843. .el-step__title.is-finish {
  844. color: #92D9FF; }
  845. .el-step__description {
  846. padding-right: 10%;
  847. margin-top: -5px;
  848. font-size: 12px;
  849. line-height: 20px;
  850. font-weight: normal; }
  851. .el-step__description.is-process {
  852. color: #aaa; }
  853. .el-step__description.is-wait {
  854. color: rgba(255, 255, 255, 0.5); }
  855. .el-step__description.is-success {
  856. color: #92D9FF; }
  857. .el-step__description.is-error {
  858. color: #FF6D6D; }
  859. .el-step__description.is-finish {
  860. color: #92D9FF; }
  861. .el-step.is-horizontal {
  862. display: inline-block; }
  863. .el-step.is-horizontal .el-step__line {
  864. height: 2px;
  865. top: 11px;
  866. left: 0;
  867. right: 0; }
  868. .el-step.is-vertical {
  869. display: -webkit-box;
  870. display: -ms-flexbox;
  871. display: flex; }
  872. .el-step.is-vertical .el-step__head {
  873. -webkit-box-flex: 0;
  874. -ms-flex-positive: 0;
  875. flex-grow: 0;
  876. width: 24px; }
  877. .el-step.is-vertical .el-step__main {
  878. padding-left: 10px;
  879. -webkit-box-flex: 1;
  880. -ms-flex-positive: 1;
  881. flex-grow: 1; }
  882. .el-step.is-vertical .el-step__title {
  883. line-height: 24px;
  884. padding-bottom: 8px; }
  885. .el-step.is-vertical .el-step__line {
  886. width: 2px;
  887. top: 0;
  888. bottom: 0;
  889. left: 11px; }
  890. .el-step.is-vertical .el-step__icon.is-icon {
  891. width: 24px; }
  892. .el-step.is-center .el-step__head {
  893. text-align: center; }
  894. .el-step.is-center .el-step__main {
  895. text-align: center; }
  896. .el-step.is-center .el-step__description {
  897. padding-left: 20%;
  898. padding-right: 20%; }
  899. .el-step.is-center .el-step__line {
  900. left: 50%;
  901. right: -50%; }
  902. .el-step.is-simple {
  903. display: -webkit-box;
  904. display: -ms-flexbox;
  905. display: flex;
  906. -webkit-box-align: center;
  907. -ms-flex-align: center;
  908. align-items: center; }
  909. .el-step.is-simple .el-step__head {
  910. width: auto;
  911. font-size: 0;
  912. padding-right: 10px; }
  913. .el-step.is-simple .el-step__icon {
  914. background: transparent;
  915. width: 16px;
  916. height: 16px;
  917. font-size: 12px; }
  918. .el-step.is-simple .el-step__icon-inner[class*=el-icon]:not(.is-status) {
  919. font-size: 18px; }
  920. .el-step.is-simple .el-step__icon-inner.is-status {
  921. -webkit-transform: scale(0.8) translateY(1px);
  922. transform: scale(0.8) translateY(1px); }
  923. .el-step.is-simple .el-step__main {
  924. position: relative;
  925. display: -webkit-box;
  926. display: -ms-flexbox;
  927. display: flex;
  928. -webkit-box-align: stretch;
  929. -ms-flex-align: stretch;
  930. align-items: stretch;
  931. -webkit-box-flex: 1;
  932. -ms-flex-positive: 1;
  933. flex-grow: 1; }
  934. .el-step.is-simple .el-step__title {
  935. font-size: 16px;
  936. line-height: 20px; }
  937. .el-step.is-simple:not(:last-of-type) .el-step__title {
  938. max-width: 50%;
  939. word-break: break-all; }
  940. .el-step.is-simple .el-step__arrow {
  941. -webkit-box-flex: 1;
  942. -ms-flex-positive: 1;
  943. flex-grow: 1;
  944. display: -webkit-box;
  945. display: -ms-flexbox;
  946. display: flex;
  947. -webkit-box-align: center;
  948. -ms-flex-align: center;
  949. align-items: center;
  950. -webkit-box-pack: center;
  951. -ms-flex-pack: center;
  952. justify-content: center; }
  953. .el-step.is-simple .el-step__arrow::before, .el-step.is-simple .el-step__arrow::after {
  954. content: '';
  955. display: inline-block;
  956. position: absolute;
  957. height: 15px;
  958. width: 1px;
  959. background: rgba(255, 255, 255, 0.5); }
  960. .el-step.is-simple .el-step__arrow::before {
  961. -webkit-transform: rotate(-45deg) translateY(-4px);
  962. transform: rotate(-45deg) translateY(-4px);
  963. -webkit-transform-origin: 0 0;
  964. transform-origin: 0 0; }
  965. .el-step.is-simple .el-step__arrow::after {
  966. -webkit-transform: rotate(45deg) translateY(4px);
  967. transform: rotate(45deg) translateY(4px);
  968. -webkit-transform-origin: 100% 100%;
  969. transform-origin: 100% 100%; }
  970. .el-step.is-simple:last-of-type .el-step__arrow {
  971. display: none; }