框架源码
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.

668 lines
15 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-switch {
  253. display: -webkit-inline-box;
  254. display: -ms-inline-flexbox;
  255. display: inline-flex;
  256. -webkit-box-align: center;
  257. -ms-flex-align: center;
  258. align-items: center;
  259. position: relative;
  260. font-size: 14px;
  261. line-height: 20px;
  262. height: 20px;
  263. vertical-align: middle; }
  264. [data-theme="blue"] .el-switch.is-disabled .el-switch__core,
  265. [data-theme="blue"] .el-switch.is-disabled .el-switch__label {
  266. cursor: not-allowed; }
  267. .el-switch__label {
  268. -webkit-transition: .2s;
  269. transition: .2s;
  270. height: 20px;
  271. display: inline-block;
  272. font-size: 14px;
  273. font-weight: 500;
  274. cursor: pointer;
  275. vertical-align: middle;
  276. color: #aaaaaa; }
  277. .el-switch__label.is-active {
  278. color: #92D9FF; }
  279. .el-switch__label--left {
  280. margin-right: 10px; }
  281. .el-switch__label--right {
  282. margin-left: 10px; }
  283. .el-switch__label * {
  284. line-height: 1;
  285. font-size: 14px;
  286. display: inline-block; }
  287. .el-switch__input {
  288. position: absolute;
  289. width: 0;
  290. height: 0;
  291. opacity: 0;
  292. margin: 0; }
  293. .el-switch__core {
  294. margin: 0;
  295. display: inline-block;
  296. position: relative;
  297. width: 40px;
  298. height: 20px;
  299. border: 1px solid #DCDFE6;
  300. outline: none;
  301. border-radius: 10px;
  302. -webkit-box-sizing: border-box;
  303. box-sizing: border-box;
  304. background: #DCDFE6;
  305. cursor: pointer;
  306. -webkit-transition: border-color .3s, background-color .3s;
  307. transition: border-color .3s, background-color .3s;
  308. vertical-align: middle; }
  309. .el-switch__core:after {
  310. content: "";
  311. position: absolute;
  312. top: 1px;
  313. left: 1px;
  314. border-radius: 100%;
  315. -webkit-transition: all .3s;
  316. transition: all .3s;
  317. width: 16px;
  318. height: 16px;
  319. background-color: #000000; }
  320. [data-theme="blue"] .el-switch.is-checked .el-switch__core {
  321. border-color: #92D9FF;
  322. background-color: #92D9FF; }
  323. [data-theme="blue"] .el-switch.is-checked .el-switch__core::after {
  324. left: 100%;
  325. margin-left: -17px; }
  326. [data-theme="blue"] .el-switch.is-disabled {
  327. opacity: 0.6; }
  328. [data-theme="blue"] .el-switch--wide .el-switch__label.el-switch__label--left span {
  329. left: 10px; }
  330. [data-theme="blue"] .el-switch--wide .el-switch__label.el-switch__label--right span {
  331. right: 10px; }
  332. [data-theme="blue"] .el-switch .label-fade-enter,
  333. [data-theme="blue"] .el-switch .label-fade-leave-active {
  334. opacity: 0; }
  335. /* BEM support Func
  336. -------------------------- */
  337. /* Element Chalk Variables */
  338. /* Transition
  339. -------------------------- */
  340. /* Color
  341. -------------------------- */
  342. /* 53a8ff */
  343. /* 66b1ff */
  344. /* 79bbff */
  345. /* 8cc5ff */
  346. /* a0cfff */
  347. /* b3d8ff */
  348. /* c6e2ff */
  349. /* d9ecff */
  350. /* ecf5ff */
  351. /* Link
  352. -------------------------- */
  353. /* Border
  354. -------------------------- */
  355. /* Fill
  356. -------------------------- */
  357. /* Typography
  358. -------------------------- */
  359. /* Size
  360. -------------------------- */
  361. /* z-index
  362. -------------------------- */
  363. /* Disable base
  364. -------------------------- */
  365. /* Icon
  366. -------------------------- */
  367. /* Checkbox
  368. -------------------------- */
  369. /* Radio
  370. -------------------------- */
  371. /* Select
  372. -------------------------- */
  373. /* Alert
  374. -------------------------- */
  375. /* MessageBox
  376. -------------------------- */
  377. /* Message
  378. -------------------------- */
  379. /* Notification
  380. -------------------------- */
  381. /* Input
  382. -------------------------- */
  383. /* Cascader
  384. -------------------------- */
  385. /* Group
  386. -------------------------- */
  387. /* Tab
  388. -------------------------- */
  389. /* Button
  390. -------------------------- */
  391. /* cascader
  392. -------------------------- */
  393. /* Switch
  394. -------------------------- */
  395. /* Dialog
  396. -------------------------- */
  397. /* Table
  398. -------------------------- */
  399. /* Pagination
  400. -------------------------- */
  401. /* Popup
  402. -------------------------- */
  403. /* Popover
  404. -------------------------- */
  405. /* Tooltip
  406. -------------------------- */
  407. /* Tag
  408. -------------------------- */
  409. /* Tree
  410. -------------------------- */
  411. /* Dropdown
  412. -------------------------- */
  413. /* Badge
  414. -------------------------- */
  415. /* Card
  416. --------------------------*/
  417. /* Slider
  418. --------------------------*/
  419. /* Steps
  420. --------------------------*/
  421. /* Menu
  422. --------------------------*/
  423. /* Rate
  424. --------------------------*/
  425. /* DatePicker
  426. --------------------------*/
  427. /* Loading
  428. --------------------------*/
  429. /* Scrollbar
  430. --------------------------*/
  431. /* Carousel
  432. --------------------------*/
  433. /* Collapse
  434. --------------------------*/
  435. /* Transfer
  436. --------------------------*/
  437. /* Header
  438. --------------------------*/
  439. /* Footer
  440. --------------------------*/
  441. /* Main
  442. --------------------------*/
  443. /* Timeline
  444. --------------------------*/
  445. /* Backtop
  446. --------------------------*/
  447. /* Link
  448. --------------------------*/
  449. /* Calendar
  450. --------------------------*/
  451. /* Form
  452. -------------------------- */
  453. /* Avatar
  454. --------------------------*/
  455. /* Break-point
  456. --------------------------*/
  457. /* Break-points
  458. -------------------------- */
  459. /* Scrollbar
  460. -------------------------- */
  461. /* Placeholder
  462. -------------------------- */
  463. /* BEM
  464. -------------------------- */
  465. /* Element Chalk Variables */
  466. /* Transition
  467. -------------------------- */
  468. /* Color
  469. -------------------------- */
  470. /* 53a8ff */
  471. /* 66b1ff */
  472. /* 79bbff */
  473. /* 8cc5ff */
  474. /* a0cfff */
  475. /* b3d8ff */
  476. /* c6e2ff */
  477. /* d9ecff */
  478. /* ecf5ff */
  479. /* Link
  480. -------------------------- */
  481. /* Border
  482. -------------------------- */
  483. /* Fill
  484. -------------------------- */
  485. /* Typography
  486. -------------------------- */
  487. /* Size
  488. -------------------------- */
  489. /* z-index
  490. -------------------------- */
  491. /* Disable base
  492. -------------------------- */
  493. /* Icon
  494. -------------------------- */
  495. /* Checkbox
  496. -------------------------- */
  497. /* Radio
  498. -------------------------- */
  499. /* Select
  500. -------------------------- */
  501. /* Alert
  502. -------------------------- */
  503. /* MessageBox
  504. -------------------------- */
  505. /* Message
  506. -------------------------- */
  507. /* Notification
  508. -------------------------- */
  509. /* Input
  510. -------------------------- */
  511. /* Cascader
  512. -------------------------- */
  513. /* Group
  514. -------------------------- */
  515. /* Tab
  516. -------------------------- */
  517. /* Button
  518. -------------------------- */
  519. /* cascader
  520. -------------------------- */
  521. /* Switch
  522. -------------------------- */
  523. /* Dialog
  524. -------------------------- */
  525. /* Table
  526. -------------------------- */
  527. /* Pagination
  528. -------------------------- */
  529. /* Popup
  530. -------------------------- */
  531. /* Popover
  532. -------------------------- */
  533. /* Tooltip
  534. -------------------------- */
  535. /* Tag
  536. -------------------------- */
  537. /* Tree
  538. -------------------------- */
  539. /* Dropdown
  540. -------------------------- */
  541. /* Badge
  542. -------------------------- */
  543. /* Card
  544. --------------------------*/
  545. /* Slider
  546. --------------------------*/
  547. /* Steps
  548. --------------------------*/
  549. /* Menu
  550. --------------------------*/
  551. /* Rate
  552. --------------------------*/
  553. /* DatePicker
  554. --------------------------*/
  555. /* Loading
  556. --------------------------*/
  557. /* Scrollbar
  558. --------------------------*/
  559. /* Carousel
  560. --------------------------*/
  561. /* Collapse
  562. --------------------------*/
  563. /* Transfer
  564. --------------------------*/
  565. /* Header
  566. --------------------------*/
  567. /* Footer
  568. --------------------------*/
  569. /* Main
  570. --------------------------*/
  571. /* Timeline
  572. --------------------------*/
  573. /* Backtop
  574. --------------------------*/
  575. /* Link
  576. --------------------------*/
  577. /* Calendar
  578. --------------------------*/
  579. /* Form
  580. -------------------------- */
  581. /* Avatar
  582. --------------------------*/
  583. /* Break-point
  584. --------------------------*/
  585. .el-switch {
  586. display: -webkit-inline-box;
  587. display: -ms-inline-flexbox;
  588. display: inline-flex;
  589. -webkit-box-align: center;
  590. -ms-flex-align: center;
  591. align-items: center;
  592. position: relative;
  593. font-size: 14px;
  594. line-height: 20px;
  595. height: 20px;
  596. vertical-align: middle; }
  597. .el-switch.is-disabled .el-switch__core,
  598. .el-switch.is-disabled .el-switch__label {
  599. cursor: not-allowed; }
  600. .el-switch__label {
  601. -webkit-transition: .2s;
  602. transition: .2s;
  603. height: 20px;
  604. display: inline-block;
  605. font-size: 14px;
  606. font-weight: 500;
  607. cursor: pointer;
  608. vertical-align: middle;
  609. color: #aaaaaa; }
  610. .el-switch__label.is-active {
  611. color: #92D9FF; }
  612. .el-switch__label--left {
  613. margin-right: 10px; }
  614. .el-switch__label--right {
  615. margin-left: 10px; }
  616. .el-switch__label * {
  617. line-height: 1;
  618. font-size: 14px;
  619. display: inline-block; }
  620. .el-switch__input {
  621. position: absolute;
  622. width: 0;
  623. height: 0;
  624. opacity: 0;
  625. margin: 0; }
  626. .el-switch__core {
  627. margin: 0;
  628. display: inline-block;
  629. position: relative;
  630. width: 40px;
  631. height: 20px;
  632. border: 1px solid #DCDFE6;
  633. outline: none;
  634. border-radius: 10px;
  635. -webkit-box-sizing: border-box;
  636. box-sizing: border-box;
  637. background: #DCDFE6;
  638. cursor: pointer;
  639. -webkit-transition: border-color .3s, background-color .3s;
  640. transition: border-color .3s, background-color .3s;
  641. vertical-align: middle; }
  642. .el-switch__core:after {
  643. content: "";
  644. position: absolute;
  645. top: 1px;
  646. left: 1px;
  647. border-radius: 100%;
  648. -webkit-transition: all .3s;
  649. transition: all .3s;
  650. width: 16px;
  651. height: 16px;
  652. background-color: #000000; }
  653. .el-switch.is-checked .el-switch__core {
  654. border-color: #92D9FF;
  655. background-color: #92D9FF; }
  656. .el-switch.is-checked .el-switch__core::after {
  657. left: 100%;
  658. margin-left: -17px; }
  659. .el-switch.is-disabled {
  660. opacity: 0.6; }
  661. .el-switch--wide .el-switch__label.el-switch__label--left span {
  662. left: 10px; }
  663. .el-switch--wide .el-switch__label.el-switch__label--right span {
  664. right: 10px; }
  665. .el-switch .label-fade-enter,
  666. .el-switch .label-fade-leave-active {
  667. opacity: 0; }