slider.css 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Colors
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Background
  20. -------------------------- */
  21. /* Border
  22. -------------------------- */
  23. /* Box-shadow
  24. -------------------------- */
  25. /* Fill
  26. -------------------------- */
  27. /* Font
  28. -------------------------- */
  29. /* Size
  30. -------------------------- */
  31. /* z-index
  32. -------------------------- */
  33. /* Disable base
  34. -------------------------- */
  35. /* Icon
  36. -------------------------- */
  37. /* Checkbox
  38. -------------------------- */
  39. /* Radio
  40. -------------------------- */
  41. /* Select
  42. -------------------------- */
  43. /* Alert
  44. -------------------------- */
  45. /* Message Box
  46. -------------------------- */
  47. /* Message
  48. -------------------------- */
  49. /* Notification
  50. -------------------------- */
  51. /* Input
  52. -------------------------- */
  53. /* Cascader
  54. -------------------------- */
  55. /* Group
  56. -------------------------- */
  57. /* Tab
  58. -------------------------- */
  59. /* Button
  60. -------------------------- */
  61. /* cascader
  62. -------------------------- */
  63. /* Switch
  64. -------------------------- */
  65. /* Dialog
  66. -------------------------- */
  67. /* Table
  68. -------------------------- */
  69. /* Pagination
  70. -------------------------- */
  71. /* Popover
  72. -------------------------- */
  73. /* Tooltip
  74. -------------------------- */
  75. /* Tag
  76. -------------------------- */
  77. /* Tree
  78. -------------------------- */
  79. /* Dropdown
  80. -------------------------- */
  81. /* Badge
  82. -------------------------- */
  83. /* Card
  84. --------------------------*/
  85. /* Slider
  86. --------------------------*/
  87. /* Steps
  88. --------------------------*/
  89. /* Menu
  90. --------------------------*/
  91. /* Rate
  92. --------------------------*/
  93. /* DatePicker
  94. --------------------------*/
  95. /* Loading
  96. --------------------------*/
  97. /* Scrollbar
  98. --------------------------*/
  99. /* Carousel
  100. --------------------------*/
  101. /* Collapse
  102. --------------------------*/
  103. /* Transfer
  104. --------------------------*/
  105. /* Header
  106. --------------------------*/
  107. /* Footer
  108. --------------------------*/
  109. /* Main
  110. --------------------------*/
  111. /* Break-point
  112. --------------------------*/
  113. /* Break-points
  114. -------------------------- */
  115. /* Scrollbar
  116. -------------------------- */
  117. /* Placeholder
  118. -------------------------- */
  119. /* BEM
  120. -------------------------- */
  121. /* BEM support Func
  122. -------------------------- */
  123. /* Element Chalk Variables */
  124. /* Transition
  125. -------------------------- */
  126. /* Colors
  127. -------------------------- */
  128. /* 53a8ff */
  129. /* 66b1ff */
  130. /* 79bbff */
  131. /* 8cc5ff */
  132. /* a0cfff */
  133. /* b3d8ff */
  134. /* c6e2ff */
  135. /* d9ecff */
  136. /* ecf5ff */
  137. /* Link
  138. -------------------------- */
  139. /* Background
  140. -------------------------- */
  141. /* Border
  142. -------------------------- */
  143. /* Box-shadow
  144. -------------------------- */
  145. /* Fill
  146. -------------------------- */
  147. /* Font
  148. -------------------------- */
  149. /* Size
  150. -------------------------- */
  151. /* z-index
  152. -------------------------- */
  153. /* Disable base
  154. -------------------------- */
  155. /* Icon
  156. -------------------------- */
  157. /* Checkbox
  158. -------------------------- */
  159. /* Radio
  160. -------------------------- */
  161. /* Select
  162. -------------------------- */
  163. /* Alert
  164. -------------------------- */
  165. /* Message Box
  166. -------------------------- */
  167. /* Message
  168. -------------------------- */
  169. /* Notification
  170. -------------------------- */
  171. /* Input
  172. -------------------------- */
  173. /* Cascader
  174. -------------------------- */
  175. /* Group
  176. -------------------------- */
  177. /* Tab
  178. -------------------------- */
  179. /* Button
  180. -------------------------- */
  181. /* cascader
  182. -------------------------- */
  183. /* Switch
  184. -------------------------- */
  185. /* Dialog
  186. -------------------------- */
  187. /* Table
  188. -------------------------- */
  189. /* Pagination
  190. -------------------------- */
  191. /* Popover
  192. -------------------------- */
  193. /* Tooltip
  194. -------------------------- */
  195. /* Tag
  196. -------------------------- */
  197. /* Tree
  198. -------------------------- */
  199. /* Dropdown
  200. -------------------------- */
  201. /* Badge
  202. -------------------------- */
  203. /* Card
  204. --------------------------*/
  205. /* Slider
  206. --------------------------*/
  207. /* Steps
  208. --------------------------*/
  209. /* Menu
  210. --------------------------*/
  211. /* Rate
  212. --------------------------*/
  213. /* DatePicker
  214. --------------------------*/
  215. /* Loading
  216. --------------------------*/
  217. /* Scrollbar
  218. --------------------------*/
  219. /* Carousel
  220. --------------------------*/
  221. /* Collapse
  222. --------------------------*/
  223. /* Transfer
  224. --------------------------*/
  225. /* Header
  226. --------------------------*/
  227. /* Footer
  228. --------------------------*/
  229. /* Main
  230. --------------------------*/
  231. /* Break-point
  232. --------------------------*/
  233. /* Break-points
  234. -------------------------- */
  235. /* Scrollbar
  236. -------------------------- */
  237. /* Placeholder
  238. -------------------------- */
  239. /* BEM
  240. -------------------------- */
  241. /* Element Chalk Variables */
  242. /* Transition
  243. -------------------------- */
  244. /* Colors
  245. -------------------------- */
  246. /* 53a8ff */
  247. /* 66b1ff */
  248. /* 79bbff */
  249. /* 8cc5ff */
  250. /* a0cfff */
  251. /* b3d8ff */
  252. /* c6e2ff */
  253. /* d9ecff */
  254. /* ecf5ff */
  255. /* Link
  256. -------------------------- */
  257. /* Background
  258. -------------------------- */
  259. /* Border
  260. -------------------------- */
  261. /* Box-shadow
  262. -------------------------- */
  263. /* Fill
  264. -------------------------- */
  265. /* Font
  266. -------------------------- */
  267. /* Size
  268. -------------------------- */
  269. /* z-index
  270. -------------------------- */
  271. /* Disable base
  272. -------------------------- */
  273. /* Icon
  274. -------------------------- */
  275. /* Checkbox
  276. -------------------------- */
  277. /* Radio
  278. -------------------------- */
  279. /* Select
  280. -------------------------- */
  281. /* Alert
  282. -------------------------- */
  283. /* Message Box
  284. -------------------------- */
  285. /* Message
  286. -------------------------- */
  287. /* Notification
  288. -------------------------- */
  289. /* Input
  290. -------------------------- */
  291. /* Cascader
  292. -------------------------- */
  293. /* Group
  294. -------------------------- */
  295. /* Tab
  296. -------------------------- */
  297. /* Button
  298. -------------------------- */
  299. /* cascader
  300. -------------------------- */
  301. /* Switch
  302. -------------------------- */
  303. /* Dialog
  304. -------------------------- */
  305. /* Table
  306. -------------------------- */
  307. /* Pagination
  308. -------------------------- */
  309. /* Popover
  310. -------------------------- */
  311. /* Tooltip
  312. -------------------------- */
  313. /* Tag
  314. -------------------------- */
  315. /* Tree
  316. -------------------------- */
  317. /* Dropdown
  318. -------------------------- */
  319. /* Badge
  320. -------------------------- */
  321. /* Card
  322. --------------------------*/
  323. /* Slider
  324. --------------------------*/
  325. /* Steps
  326. --------------------------*/
  327. /* Menu
  328. --------------------------*/
  329. /* Rate
  330. --------------------------*/
  331. /* DatePicker
  332. --------------------------*/
  333. /* Loading
  334. --------------------------*/
  335. /* Scrollbar
  336. --------------------------*/
  337. /* Carousel
  338. --------------------------*/
  339. /* Collapse
  340. --------------------------*/
  341. /* Transfer
  342. --------------------------*/
  343. /* Header
  344. --------------------------*/
  345. /* Footer
  346. --------------------------*/
  347. /* Main
  348. --------------------------*/
  349. /* Break-point
  350. --------------------------*/
  351. /* BEM support Func
  352. -------------------------- */
  353. /* Element Chalk Variables */
  354. /* Transition
  355. -------------------------- */
  356. /* Colors
  357. -------------------------- */
  358. /* 53a8ff */
  359. /* 66b1ff */
  360. /* 79bbff */
  361. /* 8cc5ff */
  362. /* a0cfff */
  363. /* b3d8ff */
  364. /* c6e2ff */
  365. /* d9ecff */
  366. /* ecf5ff */
  367. /* Link
  368. -------------------------- */
  369. /* Background
  370. -------------------------- */
  371. /* Border
  372. -------------------------- */
  373. /* Box-shadow
  374. -------------------------- */
  375. /* Fill
  376. -------------------------- */
  377. /* Font
  378. -------------------------- */
  379. /* Size
  380. -------------------------- */
  381. /* z-index
  382. -------------------------- */
  383. /* Disable base
  384. -------------------------- */
  385. /* Icon
  386. -------------------------- */
  387. /* Checkbox
  388. -------------------------- */
  389. /* Radio
  390. -------------------------- */
  391. /* Select
  392. -------------------------- */
  393. /* Alert
  394. -------------------------- */
  395. /* Message Box
  396. -------------------------- */
  397. /* Message
  398. -------------------------- */
  399. /* Notification
  400. -------------------------- */
  401. /* Input
  402. -------------------------- */
  403. /* Cascader
  404. -------------------------- */
  405. /* Group
  406. -------------------------- */
  407. /* Tab
  408. -------------------------- */
  409. /* Button
  410. -------------------------- */
  411. /* cascader
  412. -------------------------- */
  413. /* Switch
  414. -------------------------- */
  415. /* Dialog
  416. -------------------------- */
  417. /* Table
  418. -------------------------- */
  419. /* Pagination
  420. -------------------------- */
  421. /* Popover
  422. -------------------------- */
  423. /* Tooltip
  424. -------------------------- */
  425. /* Tag
  426. -------------------------- */
  427. /* Tree
  428. -------------------------- */
  429. /* Dropdown
  430. -------------------------- */
  431. /* Badge
  432. -------------------------- */
  433. /* Card
  434. --------------------------*/
  435. /* Slider
  436. --------------------------*/
  437. /* Steps
  438. --------------------------*/
  439. /* Menu
  440. --------------------------*/
  441. /* Rate
  442. --------------------------*/
  443. /* DatePicker
  444. --------------------------*/
  445. /* Loading
  446. --------------------------*/
  447. /* Scrollbar
  448. --------------------------*/
  449. /* Carousel
  450. --------------------------*/
  451. /* Collapse
  452. --------------------------*/
  453. /* Transfer
  454. --------------------------*/
  455. /* Header
  456. --------------------------*/
  457. /* Footer
  458. --------------------------*/
  459. /* Main
  460. --------------------------*/
  461. /* Break-point
  462. --------------------------*/
  463. /* Break-points
  464. -------------------------- */
  465. /* Scrollbar
  466. -------------------------- */
  467. /* Placeholder
  468. -------------------------- */
  469. /* BEM
  470. -------------------------- */
  471. /* Element Chalk Variables */
  472. /* Transition
  473. -------------------------- */
  474. /* Colors
  475. -------------------------- */
  476. /* 53a8ff */
  477. /* 66b1ff */
  478. /* 79bbff */
  479. /* 8cc5ff */
  480. /* a0cfff */
  481. /* b3d8ff */
  482. /* c6e2ff */
  483. /* d9ecff */
  484. /* ecf5ff */
  485. /* Link
  486. -------------------------- */
  487. /* Background
  488. -------------------------- */
  489. /* Border
  490. -------------------------- */
  491. /* Box-shadow
  492. -------------------------- */
  493. /* Fill
  494. -------------------------- */
  495. /* Font
  496. -------------------------- */
  497. /* Size
  498. -------------------------- */
  499. /* z-index
  500. -------------------------- */
  501. /* Disable base
  502. -------------------------- */
  503. /* Icon
  504. -------------------------- */
  505. /* Checkbox
  506. -------------------------- */
  507. /* Radio
  508. -------------------------- */
  509. /* Select
  510. -------------------------- */
  511. /* Alert
  512. -------------------------- */
  513. /* Message Box
  514. -------------------------- */
  515. /* Message
  516. -------------------------- */
  517. /* Notification
  518. -------------------------- */
  519. /* Input
  520. -------------------------- */
  521. /* Cascader
  522. -------------------------- */
  523. /* Group
  524. -------------------------- */
  525. /* Tab
  526. -------------------------- */
  527. /* Button
  528. -------------------------- */
  529. /* cascader
  530. -------------------------- */
  531. /* Switch
  532. -------------------------- */
  533. /* Dialog
  534. -------------------------- */
  535. /* Table
  536. -------------------------- */
  537. /* Pagination
  538. -------------------------- */
  539. /* Popover
  540. -------------------------- */
  541. /* Tooltip
  542. -------------------------- */
  543. /* Tag
  544. -------------------------- */
  545. /* Tree
  546. -------------------------- */
  547. /* Dropdown
  548. -------------------------- */
  549. /* Badge
  550. -------------------------- */
  551. /* Card
  552. --------------------------*/
  553. /* Slider
  554. --------------------------*/
  555. /* Steps
  556. --------------------------*/
  557. /* Menu
  558. --------------------------*/
  559. /* Rate
  560. --------------------------*/
  561. /* DatePicker
  562. --------------------------*/
  563. /* Loading
  564. --------------------------*/
  565. /* Scrollbar
  566. --------------------------*/
  567. /* Carousel
  568. --------------------------*/
  569. /* Collapse
  570. --------------------------*/
  571. /* Transfer
  572. --------------------------*/
  573. /* Header
  574. --------------------------*/
  575. /* Footer
  576. --------------------------*/
  577. /* Main
  578. --------------------------*/
  579. /* Break-point
  580. --------------------------*/
  581. .el-textarea {
  582. display: inline-block;
  583. width: 100%;
  584. vertical-align: bottom;
  585. font-size: 14px; }
  586. .el-textarea__inner {
  587. display: block;
  588. resize: vertical;
  589. padding: 5px 15px;
  590. line-height: 1.5;
  591. -webkit-box-sizing: border-box;
  592. box-sizing: border-box;
  593. width: 100%;
  594. font-size: inherit;
  595. color: #606266;
  596. background-color: #fff;
  597. background-image: none;
  598. border: 1px solid #dcdfe6;
  599. border-radius: 4px;
  600. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  601. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  602. .el-textarea__inner::-webkit-input-placeholder {
  603. color: #c0c4cc; }
  604. .el-textarea__inner:-ms-input-placeholder {
  605. color: #c0c4cc; }
  606. .el-textarea__inner::-ms-input-placeholder {
  607. color: #c0c4cc; }
  608. .el-textarea__inner::placeholder {
  609. color: #c0c4cc; }
  610. .el-textarea__inner:hover {
  611. border-color: #c0c4cc; }
  612. .el-textarea__inner:focus {
  613. outline: none;
  614. border-color: #C8A063; }
  615. .el-textarea.is-disabled .el-textarea__inner {
  616. background-color: #f5f7fa;
  617. border-color: #e4e7ed;
  618. color: #c0c4cc;
  619. cursor: not-allowed; }
  620. .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  621. color: #c0c4cc; }
  622. .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder {
  623. color: #c0c4cc; }
  624. .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  625. color: #c0c4cc; }
  626. .el-textarea.is-disabled .el-textarea__inner::placeholder {
  627. color: #c0c4cc; }
  628. .el-input {
  629. position: relative;
  630. font-size: 14px;
  631. display: inline-block;
  632. width: 100%; }
  633. .el-input::-webkit-scrollbar {
  634. z-index: 11;
  635. width: 6px; }
  636. .el-input::-webkit-scrollbar:horizontal {
  637. height: 6px; }
  638. .el-input::-webkit-scrollbar-thumb {
  639. border-radius: 5px;
  640. width: 6px;
  641. background: #b4bccc; }
  642. .el-input::-webkit-scrollbar-corner {
  643. background: #fff; }
  644. .el-input::-webkit-scrollbar-track {
  645. background: #fff; }
  646. .el-input::-webkit-scrollbar-track-piece {
  647. background: #fff;
  648. width: 6px; }
  649. .el-input .el-input__clear {
  650. color: #c0c4cc;
  651. font-size: 14px;
  652. line-height: 16px;
  653. cursor: pointer;
  654. -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  655. transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  656. .el-input .el-input__clear:hover {
  657. color: #909399; }
  658. .el-input__inner {
  659. -webkit-appearance: none;
  660. background-color: #fff;
  661. background-image: none;
  662. border-radius: 4px;
  663. border: 1px solid #dcdfe6;
  664. -webkit-box-sizing: border-box;
  665. box-sizing: border-box;
  666. color: #606266;
  667. display: inline-block;
  668. font-size: inherit;
  669. height: 40px;
  670. line-height: 40px;
  671. outline: none;
  672. padding: 0 15px;
  673. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  674. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  675. width: 100%; }
  676. .el-input__inner::-webkit-input-placeholder {
  677. color: #c0c4cc; }
  678. .el-input__inner:-ms-input-placeholder {
  679. color: #c0c4cc; }
  680. .el-input__inner::-ms-input-placeholder {
  681. color: #c0c4cc; }
  682. .el-input__inner::placeholder {
  683. color: #c0c4cc; }
  684. .el-input__inner:hover {
  685. border-color: #c0c4cc; }
  686. .el-input__inner:focus {
  687. outline: none;
  688. border-color: #C8A063; }
  689. .el-input__suffix {
  690. position: absolute;
  691. height: 100%;
  692. right: 5px;
  693. top: 0;
  694. text-align: center;
  695. color: #c0c4cc;
  696. -webkit-transition: all .3s;
  697. transition: all .3s;
  698. pointer-events: none; }
  699. .el-input__suffix-inner {
  700. pointer-events: all; }
  701. .el-input__prefix {
  702. position: absolute;
  703. height: 100%;
  704. left: 5px;
  705. top: 0;
  706. text-align: center;
  707. color: #c0c4cc;
  708. -webkit-transition: all .3s;
  709. transition: all .3s; }
  710. .el-input__icon {
  711. height: 100%;
  712. width: 25px;
  713. text-align: center;
  714. -webkit-transition: all .3s;
  715. transition: all .3s;
  716. line-height: 40px; }
  717. .el-input__icon:after {
  718. content: '';
  719. height: 100%;
  720. width: 0;
  721. display: inline-block;
  722. vertical-align: middle; }
  723. .el-input__validateIcon {
  724. pointer-events: none; }
  725. .el-input.is-active .el-input__inner {
  726. outline: none;
  727. border-color: #C8A063; }
  728. .el-input.is-disabled .el-input__inner {
  729. background-color: #f5f7fa;
  730. border-color: #e4e7ed;
  731. color: #c0c4cc;
  732. cursor: not-allowed; }
  733. .el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  734. color: #c0c4cc; }
  735. .el-input.is-disabled .el-input__inner:-ms-input-placeholder {
  736. color: #c0c4cc; }
  737. .el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  738. color: #c0c4cc; }
  739. .el-input.is-disabled .el-input__inner::placeholder {
  740. color: #c0c4cc; }
  741. .el-input.is-disabled .el-input__icon {
  742. cursor: not-allowed; }
  743. .el-input--suffix .el-input__inner {
  744. padding-right: 30px; }
  745. .el-input--prefix .el-input__inner {
  746. padding-left: 30px; }
  747. .el-input--medium {
  748. font-size: 14px; }
  749. .el-input--medium .el-input__inner {
  750. height: 36px;
  751. line-height: 36px; }
  752. .el-input--medium .el-input__icon {
  753. line-height: 36px; }
  754. .el-input--small {
  755. font-size: 13px; }
  756. .el-input--small .el-input__inner {
  757. height: 32px;
  758. line-height: 32px; }
  759. .el-input--small .el-input__icon {
  760. line-height: 32px; }
  761. .el-input--mini {
  762. font-size: 12px; }
  763. .el-input--mini .el-input__inner {
  764. height: 28px;
  765. line-height: 28px; }
  766. .el-input--mini .el-input__icon {
  767. line-height: 28px; }
  768. .el-input-group {
  769. line-height: normal;
  770. display: inline-table;
  771. width: 100%;
  772. border-collapse: separate; }
  773. .el-input-group > .el-input__inner {
  774. vertical-align: middle;
  775. display: table-cell; }
  776. .el-input-group__append, .el-input-group__prepend {
  777. background-color: #f5f7fa;
  778. color: #68C7FF;
  779. vertical-align: middle;
  780. display: table-cell;
  781. position: relative;
  782. border: 1px solid #dcdfe6;
  783. border-radius: 4px;
  784. padding: 0 20px;
  785. width: 1px;
  786. white-space: nowrap; }
  787. .el-input-group__append:focus, .el-input-group__prepend:focus {
  788. outline: none; }
  789. .el-input-group__append .el-select,
  790. .el-input-group__append .el-button, .el-input-group__prepend .el-select,
  791. .el-input-group__prepend .el-button {
  792. display: inline-block;
  793. margin: -10px -20px; }
  794. .el-input-group__append button.el-button,
  795. .el-input-group__append div.el-select .el-input__inner,
  796. .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button,
  797. .el-input-group__prepend div.el-select .el-input__inner,
  798. .el-input-group__prepend div.el-select:hover .el-input__inner {
  799. border-color: transparent;
  800. background-color: transparent;
  801. color: inherit;
  802. border-top: 0;
  803. border-bottom: 0; }
  804. .el-input-group__append .el-button,
  805. .el-input-group__append .el-input, .el-input-group__prepend .el-button,
  806. .el-input-group__prepend .el-input {
  807. font-size: inherit; }
  808. .el-input-group__prepend {
  809. border-right: 0;
  810. border-top-right-radius: 0;
  811. border-bottom-right-radius: 0; }
  812. .el-input-group__append {
  813. border-left: 0;
  814. border-top-left-radius: 0;
  815. border-bottom-left-radius: 0; }
  816. .el-input-group--prepend .el-input__inner {
  817. border-top-left-radius: 0;
  818. border-bottom-left-radius: 0; }
  819. .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
  820. border-color: transparent; }
  821. .el-input-group--append .el-input__inner {
  822. border-top-right-radius: 0;
  823. border-bottom-right-radius: 0; }
  824. .el-input-group--append .el-select .el-input.is-focus .el-input__inner {
  825. border-color: transparent; }
  826. /** disalbe default clear on IE */
  827. .el-input__inner::-ms-clear {
  828. display: none;
  829. width: 0;
  830. height: 0; }
  831. .el-input-number {
  832. position: relative;
  833. display: inline-block;
  834. width: 180px;
  835. line-height: 38px; }
  836. .el-input-number .el-input {
  837. display: block; }
  838. .el-input-number .el-input__inner {
  839. -webkit-appearance: none;
  840. padding-left: 50px;
  841. padding-right: 50px;
  842. text-align: center; }
  843. .el-input-number__increase, .el-input-number__decrease {
  844. position: absolute;
  845. z-index: 1;
  846. top: 1px;
  847. width: 40px;
  848. height: auto;
  849. text-align: center;
  850. background: #f5f7fa;
  851. color: #606266;
  852. cursor: pointer;
  853. font-size: 13px; }
  854. .el-input-number__increase:hover, .el-input-number__decrease:hover {
  855. color: #C8A063; }
  856. .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
  857. border-color: #C8A063; }
  858. .el-input-number__increase.is-disabled, .el-input-number__decrease.is-disabled {
  859. color: #c0c4cc;
  860. cursor: not-allowed; }
  861. .el-input-number__increase {
  862. right: 1px;
  863. border-radius: 0 4px 4px 0;
  864. border-left: 1px solid #dcdfe6; }
  865. .el-input-number__decrease {
  866. left: 1px;
  867. border-radius: 4px 0 0 4px;
  868. border-right: 1px solid #dcdfe6; }
  869. .el-input-number.is-disabled .el-input-number__increase, .el-input-number.is-disabled .el-input-number__decrease {
  870. border-color: #e4e7ed;
  871. color: #e4e7ed; }
  872. .el-input-number.is-disabled .el-input-number__increase:hover, .el-input-number.is-disabled .el-input-number__decrease:hover {
  873. color: #e4e7ed;
  874. cursor: not-allowed; }
  875. .el-input-number--medium {
  876. width: 200px;
  877. line-height: 34px; }
  878. .el-input-number--medium .el-input-number__increase, .el-input-number--medium .el-input-number__decrease {
  879. width: 36px;
  880. font-size: 14px; }
  881. .el-input-number--medium .el-input__inner {
  882. padding-left: 43px;
  883. padding-right: 43px; }
  884. .el-input-number--small {
  885. width: 130px;
  886. line-height: 30px; }
  887. .el-input-number--small .el-input-number__increase, .el-input-number--small .el-input-number__decrease {
  888. width: 32px;
  889. font-size: 13px; }
  890. .el-input-number--small .el-input-number__increase [class*=el-icon], .el-input-number--small .el-input-number__decrease [class*=el-icon] {
  891. -webkit-transform: scale(0.9);
  892. transform: scale(0.9); }
  893. .el-input-number--small .el-input__inner {
  894. padding-left: 39px;
  895. padding-right: 39px; }
  896. .el-input-number--mini {
  897. width: 130px;
  898. line-height: 26px; }
  899. .el-input-number--mini .el-input-number__increase, .el-input-number--mini .el-input-number__decrease {
  900. width: 28px;
  901. font-size: 12px; }
  902. .el-input-number--mini .el-input-number__increase [class*=el-icon], .el-input-number--mini .el-input-number__decrease [class*=el-icon] {
  903. -webkit-transform: scale(0.8);
  904. transform: scale(0.8); }
  905. .el-input-number--mini .el-input__inner {
  906. padding-left: 35px;
  907. padding-right: 35px; }
  908. .el-input-number.is-without-controls .el-input__inner {
  909. padding-left: 15px;
  910. padding-right: 15px; }
  911. .el-input-number.is-controls-right .el-input__inner {
  912. padding-left: 15px;
  913. padding-right: 50px; }
  914. .el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease {
  915. height: auto;
  916. line-height: 19px; }
  917. .el-input-number.is-controls-right .el-input-number__increase [class*=el-icon], .el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon] {
  918. -webkit-transform: scale(0.8);
  919. transform: scale(0.8); }
  920. .el-input-number.is-controls-right .el-input-number__increase {
  921. border-radius: 0 4px 0 0;
  922. border-bottom: 1px solid #dcdfe6; }
  923. .el-input-number.is-controls-right .el-input-number__decrease {
  924. right: 1px;
  925. bottom: 1px;
  926. top: auto;
  927. left: auto;
  928. border-right: none;
  929. border-left: 1px solid #dcdfe6;
  930. border-radius: 0 0 4px 0; }
  931. .el-input-number.is-controls-right[class*=medium] [class*=increase], .el-input-number.is-controls-right[class*=medium] [class*=decrease] {
  932. line-height: 17px; }
  933. .el-input-number.is-controls-right[class*=small] [class*=increase], .el-input-number.is-controls-right[class*=small] [class*=decrease] {
  934. line-height: 15px; }
  935. .el-input-number.is-controls-right[class*=mini] [class*=increase], .el-input-number.is-controls-right[class*=mini] [class*=decrease] {
  936. line-height: 13px; }
  937. /* BEM support Func
  938. -------------------------- */
  939. /* Element Chalk Variables */
  940. /* Transition
  941. -------------------------- */
  942. /* Colors
  943. -------------------------- */
  944. /* 53a8ff */
  945. /* 66b1ff */
  946. /* 79bbff */
  947. /* 8cc5ff */
  948. /* a0cfff */
  949. /* b3d8ff */
  950. /* c6e2ff */
  951. /* d9ecff */
  952. /* ecf5ff */
  953. /* Link
  954. -------------------------- */
  955. /* Background
  956. -------------------------- */
  957. /* Border
  958. -------------------------- */
  959. /* Box-shadow
  960. -------------------------- */
  961. /* Fill
  962. -------------------------- */
  963. /* Font
  964. -------------------------- */
  965. /* Size
  966. -------------------------- */
  967. /* z-index
  968. -------------------------- */
  969. /* Disable base
  970. -------------------------- */
  971. /* Icon
  972. -------------------------- */
  973. /* Checkbox
  974. -------------------------- */
  975. /* Radio
  976. -------------------------- */
  977. /* Select
  978. -------------------------- */
  979. /* Alert
  980. -------------------------- */
  981. /* Message Box
  982. -------------------------- */
  983. /* Message
  984. -------------------------- */
  985. /* Notification
  986. -------------------------- */
  987. /* Input
  988. -------------------------- */
  989. /* Cascader
  990. -------------------------- */
  991. /* Group
  992. -------------------------- */
  993. /* Tab
  994. -------------------------- */
  995. /* Button
  996. -------------------------- */
  997. /* cascader
  998. -------------------------- */
  999. /* Switch
  1000. -------------------------- */
  1001. /* Dialog
  1002. -------------------------- */
  1003. /* Table
  1004. -------------------------- */
  1005. /* Pagination
  1006. -------------------------- */
  1007. /* Popover
  1008. -------------------------- */
  1009. /* Tooltip
  1010. -------------------------- */
  1011. /* Tag
  1012. -------------------------- */
  1013. /* Tree
  1014. -------------------------- */
  1015. /* Dropdown
  1016. -------------------------- */
  1017. /* Badge
  1018. -------------------------- */
  1019. /* Card
  1020. --------------------------*/
  1021. /* Slider
  1022. --------------------------*/
  1023. /* Steps
  1024. --------------------------*/
  1025. /* Menu
  1026. --------------------------*/
  1027. /* Rate
  1028. --------------------------*/
  1029. /* DatePicker
  1030. --------------------------*/
  1031. /* Loading
  1032. --------------------------*/
  1033. /* Scrollbar
  1034. --------------------------*/
  1035. /* Carousel
  1036. --------------------------*/
  1037. /* Collapse
  1038. --------------------------*/
  1039. /* Transfer
  1040. --------------------------*/
  1041. /* Header
  1042. --------------------------*/
  1043. /* Footer
  1044. --------------------------*/
  1045. /* Main
  1046. --------------------------*/
  1047. /* Break-point
  1048. --------------------------*/
  1049. /* Break-points
  1050. -------------------------- */
  1051. /* Scrollbar
  1052. -------------------------- */
  1053. /* Placeholder
  1054. -------------------------- */
  1055. /* BEM
  1056. -------------------------- */
  1057. /* Element Chalk Variables */
  1058. /* Transition
  1059. -------------------------- */
  1060. /* Colors
  1061. -------------------------- */
  1062. /* 53a8ff */
  1063. /* 66b1ff */
  1064. /* 79bbff */
  1065. /* 8cc5ff */
  1066. /* a0cfff */
  1067. /* b3d8ff */
  1068. /* c6e2ff */
  1069. /* d9ecff */
  1070. /* ecf5ff */
  1071. /* Link
  1072. -------------------------- */
  1073. /* Background
  1074. -------------------------- */
  1075. /* Border
  1076. -------------------------- */
  1077. /* Box-shadow
  1078. -------------------------- */
  1079. /* Fill
  1080. -------------------------- */
  1081. /* Font
  1082. -------------------------- */
  1083. /* Size
  1084. -------------------------- */
  1085. /* z-index
  1086. -------------------------- */
  1087. /* Disable base
  1088. -------------------------- */
  1089. /* Icon
  1090. -------------------------- */
  1091. /* Checkbox
  1092. -------------------------- */
  1093. /* Radio
  1094. -------------------------- */
  1095. /* Select
  1096. -------------------------- */
  1097. /* Alert
  1098. -------------------------- */
  1099. /* Message Box
  1100. -------------------------- */
  1101. /* Message
  1102. -------------------------- */
  1103. /* Notification
  1104. -------------------------- */
  1105. /* Input
  1106. -------------------------- */
  1107. /* Cascader
  1108. -------------------------- */
  1109. /* Group
  1110. -------------------------- */
  1111. /* Tab
  1112. -------------------------- */
  1113. /* Button
  1114. -------------------------- */
  1115. /* cascader
  1116. -------------------------- */
  1117. /* Switch
  1118. -------------------------- */
  1119. /* Dialog
  1120. -------------------------- */
  1121. /* Table
  1122. -------------------------- */
  1123. /* Pagination
  1124. -------------------------- */
  1125. /* Popover
  1126. -------------------------- */
  1127. /* Tooltip
  1128. -------------------------- */
  1129. /* Tag
  1130. -------------------------- */
  1131. /* Tree
  1132. -------------------------- */
  1133. /* Dropdown
  1134. -------------------------- */
  1135. /* Badge
  1136. -------------------------- */
  1137. /* Card
  1138. --------------------------*/
  1139. /* Slider
  1140. --------------------------*/
  1141. /* Steps
  1142. --------------------------*/
  1143. /* Menu
  1144. --------------------------*/
  1145. /* Rate
  1146. --------------------------*/
  1147. /* DatePicker
  1148. --------------------------*/
  1149. /* Loading
  1150. --------------------------*/
  1151. /* Scrollbar
  1152. --------------------------*/
  1153. /* Carousel
  1154. --------------------------*/
  1155. /* Collapse
  1156. --------------------------*/
  1157. /* Transfer
  1158. --------------------------*/
  1159. /* Header
  1160. --------------------------*/
  1161. /* Footer
  1162. --------------------------*/
  1163. /* Main
  1164. --------------------------*/
  1165. /* Break-point
  1166. --------------------------*/
  1167. .el-tooltip:focus:not(.focusing), .el-tooltip:focus:hover {
  1168. outline-width: 0; }
  1169. .el-tooltip__popper {
  1170. position: absolute;
  1171. border-radius: 4px;
  1172. padding: 10px;
  1173. z-index: 2000;
  1174. font-size: 12px;
  1175. line-height: 1.2; }
  1176. .el-tooltip__popper .popper__arrow,
  1177. .el-tooltip__popper .popper__arrow::after {
  1178. position: absolute;
  1179. display: block;
  1180. width: 0;
  1181. height: 0;
  1182. border-color: transparent;
  1183. border-style: solid; }
  1184. .el-tooltip__popper .popper__arrow {
  1185. border-width: 6px; }
  1186. .el-tooltip__popper .popper__arrow::after {
  1187. content: " ";
  1188. border-width: 5px; }
  1189. .el-tooltip__popper[x-placement^="top"] {
  1190. margin-bottom: 12px; }
  1191. .el-tooltip__popper[x-placement^="top"] .popper__arrow {
  1192. bottom: -6px;
  1193. border-top-color: #303133;
  1194. border-bottom-width: 0; }
  1195. .el-tooltip__popper[x-placement^="top"] .popper__arrow::after {
  1196. bottom: 1px;
  1197. margin-left: -5px;
  1198. border-top-color: #303133;
  1199. border-bottom-width: 0; }
  1200. .el-tooltip__popper[x-placement^="bottom"] {
  1201. margin-top: 12px; }
  1202. .el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  1203. top: -6px;
  1204. border-top-width: 0;
  1205. border-bottom-color: #303133; }
  1206. .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after {
  1207. top: 1px;
  1208. margin-left: -5px;
  1209. border-top-width: 0;
  1210. border-bottom-color: #303133; }
  1211. .el-tooltip__popper[x-placement^="right"] {
  1212. margin-left: 12px; }
  1213. .el-tooltip__popper[x-placement^="right"] .popper__arrow {
  1214. left: -6px;
  1215. border-right-color: #303133;
  1216. border-left-width: 0; }
  1217. .el-tooltip__popper[x-placement^="right"] .popper__arrow::after {
  1218. bottom: -5px;
  1219. left: 1px;
  1220. border-right-color: #303133;
  1221. border-left-width: 0; }
  1222. .el-tooltip__popper[x-placement^="left"] {
  1223. margin-right: 12px; }
  1224. .el-tooltip__popper[x-placement^="left"] .popper__arrow {
  1225. right: -6px;
  1226. border-right-width: 0;
  1227. border-left-color: #303133; }
  1228. .el-tooltip__popper[x-placement^="left"] .popper__arrow::after {
  1229. right: 1px;
  1230. bottom: -5px;
  1231. margin-left: -5px;
  1232. border-right-width: 0;
  1233. border-left-color: #303133; }
  1234. .el-tooltip__popper.is-dark {
  1235. background: #303133;
  1236. color: #fff; }
  1237. .el-tooltip__popper.is-light {
  1238. background: #fff;
  1239. border: 1px solid #303133; }
  1240. .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow {
  1241. border-top-color: #303133; }
  1242. .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after {
  1243. border-top-color: #fff; }
  1244. .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow {
  1245. border-bottom-color: #303133; }
  1246. .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after {
  1247. border-bottom-color: #fff; }
  1248. .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow {
  1249. border-left-color: #303133; }
  1250. .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow::after {
  1251. border-left-color: #fff; }
  1252. .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow {
  1253. border-right-color: #303133; }
  1254. .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow::after {
  1255. border-right-color: #fff; }
  1256. /* Element Chalk Variables */
  1257. /* Transition
  1258. -------------------------- */
  1259. /* Colors
  1260. -------------------------- */
  1261. /* 53a8ff */
  1262. /* 66b1ff */
  1263. /* 79bbff */
  1264. /* 8cc5ff */
  1265. /* a0cfff */
  1266. /* b3d8ff */
  1267. /* c6e2ff */
  1268. /* d9ecff */
  1269. /* ecf5ff */
  1270. /* Link
  1271. -------------------------- */
  1272. /* Background
  1273. -------------------------- */
  1274. /* Border
  1275. -------------------------- */
  1276. /* Box-shadow
  1277. -------------------------- */
  1278. /* Fill
  1279. -------------------------- */
  1280. /* Font
  1281. -------------------------- */
  1282. /* Size
  1283. -------------------------- */
  1284. /* z-index
  1285. -------------------------- */
  1286. /* Disable base
  1287. -------------------------- */
  1288. /* Icon
  1289. -------------------------- */
  1290. /* Checkbox
  1291. -------------------------- */
  1292. /* Radio
  1293. -------------------------- */
  1294. /* Select
  1295. -------------------------- */
  1296. /* Alert
  1297. -------------------------- */
  1298. /* Message Box
  1299. -------------------------- */
  1300. /* Message
  1301. -------------------------- */
  1302. /* Notification
  1303. -------------------------- */
  1304. /* Input
  1305. -------------------------- */
  1306. /* Cascader
  1307. -------------------------- */
  1308. /* Group
  1309. -------------------------- */
  1310. /* Tab
  1311. -------------------------- */
  1312. /* Button
  1313. -------------------------- */
  1314. /* cascader
  1315. -------------------------- */
  1316. /* Switch
  1317. -------------------------- */
  1318. /* Dialog
  1319. -------------------------- */
  1320. /* Table
  1321. -------------------------- */
  1322. /* Pagination
  1323. -------------------------- */
  1324. /* Popover
  1325. -------------------------- */
  1326. /* Tooltip
  1327. -------------------------- */
  1328. /* Tag
  1329. -------------------------- */
  1330. /* Tree
  1331. -------------------------- */
  1332. /* Dropdown
  1333. -------------------------- */
  1334. /* Badge
  1335. -------------------------- */
  1336. /* Card
  1337. --------------------------*/
  1338. /* Slider
  1339. --------------------------*/
  1340. /* Steps
  1341. --------------------------*/
  1342. /* Menu
  1343. --------------------------*/
  1344. /* Rate
  1345. --------------------------*/
  1346. /* DatePicker
  1347. --------------------------*/
  1348. /* Loading
  1349. --------------------------*/
  1350. /* Scrollbar
  1351. --------------------------*/
  1352. /* Carousel
  1353. --------------------------*/
  1354. /* Collapse
  1355. --------------------------*/
  1356. /* Transfer
  1357. --------------------------*/
  1358. /* Header
  1359. --------------------------*/
  1360. /* Footer
  1361. --------------------------*/
  1362. /* Main
  1363. --------------------------*/
  1364. /* Break-point
  1365. --------------------------*/
  1366. .el-slider::before,
  1367. .el-slider::after {
  1368. display: table;
  1369. content: ""; }
  1370. .el-slider::after {
  1371. clear: both; }
  1372. .el-slider__runway {
  1373. width: 100%;
  1374. height: 6px;
  1375. margin: 16px 0;
  1376. background-color: #e4e7ed;
  1377. border-radius: 3px;
  1378. position: relative;
  1379. cursor: pointer;
  1380. vertical-align: middle; }
  1381. .el-slider__runway.show-input {
  1382. margin-right: 160px;
  1383. width: auto; }
  1384. .el-slider__runway.disabled {
  1385. cursor: default; }
  1386. .el-slider__runway.disabled .el-slider__bar {
  1387. background-color: #c0c4cc; }
  1388. .el-slider__runway.disabled .el-slider__button {
  1389. border-color: #c0c4cc; }
  1390. .el-slider__runway.disabled .el-slider__button-wrapper:hover, .el-slider__runway.disabled .el-slider__button-wrapper.hover {
  1391. cursor: not-allowed; }
  1392. .el-slider__runway.disabled .el-slider__button-wrapper.dragging {
  1393. cursor: not-allowed; }
  1394. .el-slider__runway.disabled .el-slider__button:hover, .el-slider__runway.disabled .el-slider__button.hover, .el-slider__runway.disabled .el-slider__button.dragging {
  1395. -webkit-transform: scale(1);
  1396. transform: scale(1); }
  1397. .el-slider__runway.disabled .el-slider__button:hover, .el-slider__runway.disabled .el-slider__button.hover {
  1398. cursor: not-allowed; }
  1399. .el-slider__runway.disabled .el-slider__button.dragging {
  1400. cursor: not-allowed; }
  1401. .el-slider__input {
  1402. float: right;
  1403. margin-top: 3px;
  1404. width: 130px; }
  1405. .el-slider__input.el-input-number--mini {
  1406. margin-top: 5px; }
  1407. .el-slider__input.el-input-number--medium {
  1408. margin-top: 0; }
  1409. .el-slider__input.el-input-number--large {
  1410. margin-top: -2px; }
  1411. .el-slider__bar {
  1412. height: 6px;
  1413. background-color: #C8A063;
  1414. border-top-left-radius: 3px;
  1415. border-bottom-left-radius: 3px;
  1416. position: absolute; }
  1417. .el-slider__button-wrapper {
  1418. height: 36px;
  1419. width: 36px;
  1420. position: absolute;
  1421. z-index: 1001;
  1422. top: -15px;
  1423. -webkit-transform: translateX(-50%);
  1424. transform: translateX(-50%);
  1425. background-color: transparent;
  1426. text-align: center;
  1427. -webkit-user-select: none;
  1428. -moz-user-select: none;
  1429. -ms-user-select: none;
  1430. user-select: none;
  1431. line-height: normal; }
  1432. .el-slider__button-wrapper::after {
  1433. display: inline-block;
  1434. content: "";
  1435. height: 100%;
  1436. vertical-align: middle; }
  1437. .el-slider__button-wrapper .el-tooltip {
  1438. vertical-align: middle;
  1439. display: inline-block; }
  1440. .el-slider__button-wrapper:hover, .el-slider__button-wrapper.hover {
  1441. cursor: -webkit-grab;
  1442. cursor: grab; }
  1443. .el-slider__button-wrapper.dragging {
  1444. cursor: -webkit-grabbing;
  1445. cursor: grabbing; }
  1446. .el-slider__button {
  1447. width: 16px;
  1448. height: 16px;
  1449. border: solid 2px #C8A063;
  1450. background-color: #fff;
  1451. border-radius: 50%;
  1452. -webkit-transition: .2s;
  1453. transition: .2s;
  1454. -webkit-user-select: none;
  1455. -moz-user-select: none;
  1456. -ms-user-select: none;
  1457. user-select: none; }
  1458. .el-slider__button:hover, .el-slider__button.hover, .el-slider__button.dragging {
  1459. -webkit-transform: scale(1.2);
  1460. transform: scale(1.2); }
  1461. .el-slider__button:hover, .el-slider__button.hover {
  1462. cursor: -webkit-grab;
  1463. cursor: grab; }
  1464. .el-slider__button.dragging {
  1465. cursor: -webkit-grabbing;
  1466. cursor: grabbing; }
  1467. .el-slider__stop {
  1468. position: absolute;
  1469. height: 6px;
  1470. width: 6px;
  1471. border-radius: 100%;
  1472. background-color: #fff;
  1473. -webkit-transform: translateX(-50%);
  1474. transform: translateX(-50%); }
  1475. .el-slider.is-vertical {
  1476. position: relative; }
  1477. .el-slider.is-vertical .el-slider__runway {
  1478. width: 6px;
  1479. height: 100%;
  1480. margin: 0 16px; }
  1481. .el-slider.is-vertical .el-slider__bar {
  1482. width: 6px;
  1483. height: auto;
  1484. border-radius: 0 0 3px 3px; }
  1485. .el-slider.is-vertical .el-slider__button-wrapper {
  1486. top: auto;
  1487. left: -15px;
  1488. -webkit-transform: translateY(50%);
  1489. transform: translateY(50%); }
  1490. .el-slider.is-vertical .el-slider__stop {
  1491. -webkit-transform: translateY(50%);
  1492. transform: translateY(50%); }
  1493. .el-slider.is-vertical.el-slider--with-input {
  1494. padding-bottom: 58px; }
  1495. .el-slider.is-vertical.el-slider--with-input .el-slider__input {
  1496. overflow: visible;
  1497. float: none;
  1498. position: absolute;
  1499. bottom: 22px;
  1500. width: 36px;
  1501. margin-top: 15px; }
  1502. .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner {
  1503. text-align: center;
  1504. padding-left: 5px;
  1505. padding-right: 5px; }
  1506. .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,
  1507. .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase {
  1508. top: 32px;
  1509. margin-top: -1px;
  1510. border: 1px solid #dcdfe6;
  1511. line-height: 20px;
  1512. -webkit-box-sizing: border-box;
  1513. box-sizing: border-box;
  1514. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  1515. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  1516. .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease {
  1517. width: 18px;
  1518. right: 18px;
  1519. border-bottom-left-radius: 4px; }
  1520. .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase {
  1521. width: 19px;
  1522. border-bottom-right-radius: 4px; }
  1523. .el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase ~ .el-input .el-input__inner {
  1524. border-bottom-left-radius: 0;
  1525. border-bottom-right-radius: 0; }
  1526. .el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,
  1527. .el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase {
  1528. border-color: #c0c4cc; }
  1529. .el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,
  1530. .el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase {
  1531. border-color: #C8A063; }