checkbox.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  1. @charset "UTF-8";
  2. /* Element Chalk Variables */
  3. /* Transition
  4. -------------------------- */
  5. /* Color
  6. -------------------------- */
  7. /* 53a8ff */
  8. /* 66b1ff */
  9. /* 79bbff */
  10. /* 8cc5ff */
  11. /* a0cfff */
  12. /* b3d8ff */
  13. /* c6e2ff */
  14. /* d9ecff */
  15. /* ecf5ff */
  16. /* Link
  17. -------------------------- */
  18. /* Border
  19. -------------------------- */
  20. /* Fill
  21. -------------------------- */
  22. /* Typography
  23. -------------------------- */
  24. /* Size
  25. -------------------------- */
  26. /* z-index
  27. -------------------------- */
  28. /* Disable base
  29. -------------------------- */
  30. /* Icon
  31. -------------------------- */
  32. /* Checkbox
  33. -------------------------- */
  34. /* Radio
  35. -------------------------- */
  36. /* Select
  37. -------------------------- */
  38. /* Alert
  39. -------------------------- */
  40. /* MessageBox
  41. -------------------------- */
  42. /* Message
  43. -------------------------- */
  44. /* Notification
  45. -------------------------- */
  46. /* Input
  47. -------------------------- */
  48. /* Cascader
  49. -------------------------- */
  50. /* Group
  51. -------------------------- */
  52. /* Tab
  53. -------------------------- */
  54. /* Button
  55. -------------------------- */
  56. /* cascader
  57. -------------------------- */
  58. /* Switch
  59. -------------------------- */
  60. /* Dialog
  61. -------------------------- */
  62. /* Table
  63. -------------------------- */
  64. /* Pagination
  65. -------------------------- */
  66. /* Popup
  67. -------------------------- */
  68. /* Popover
  69. -------------------------- */
  70. /* Tooltip
  71. -------------------------- */
  72. /* Tag
  73. -------------------------- */
  74. /* Tree
  75. -------------------------- */
  76. /* Dropdown
  77. -------------------------- */
  78. /* Badge
  79. -------------------------- */
  80. /* Card
  81. --------------------------*/
  82. /* Slider
  83. --------------------------*/
  84. /* Steps
  85. --------------------------*/
  86. /* Menu
  87. --------------------------*/
  88. /* Rate
  89. --------------------------*/
  90. /* DatePicker
  91. --------------------------*/
  92. /* Loading
  93. --------------------------*/
  94. /* Scrollbar
  95. --------------------------*/
  96. /* Carousel
  97. --------------------------*/
  98. /* Collapse
  99. --------------------------*/
  100. /* Transfer
  101. --------------------------*/
  102. /* Header
  103. --------------------------*/
  104. /* Footer
  105. --------------------------*/
  106. /* Main
  107. --------------------------*/
  108. /* Timeline
  109. --------------------------*/
  110. /* Backtop
  111. --------------------------*/
  112. /* Link
  113. --------------------------*/
  114. /* Calendar
  115. --------------------------*/
  116. /* Form
  117. -------------------------- */
  118. /* Avatar
  119. --------------------------*/
  120. /* Empty
  121. -------------------------- */
  122. /* Descriptions
  123. -------------------------- */
  124. /* Skeleton
  125. --------------------------*/
  126. /* Svg
  127. --------------- */
  128. /* Result
  129. -------------------------- */
  130. /* Break-point
  131. --------------------------*/
  132. /* BEM support Func
  133. -------------------------- */
  134. /* Element Chalk Variables */
  135. /* Transition
  136. -------------------------- */
  137. /* Color
  138. -------------------------- */
  139. /* 53a8ff */
  140. /* 66b1ff */
  141. /* 79bbff */
  142. /* 8cc5ff */
  143. /* a0cfff */
  144. /* b3d8ff */
  145. /* c6e2ff */
  146. /* d9ecff */
  147. /* ecf5ff */
  148. /* Link
  149. -------------------------- */
  150. /* Border
  151. -------------------------- */
  152. /* Fill
  153. -------------------------- */
  154. /* Typography
  155. -------------------------- */
  156. /* Size
  157. -------------------------- */
  158. /* z-index
  159. -------------------------- */
  160. /* Disable base
  161. -------------------------- */
  162. /* Icon
  163. -------------------------- */
  164. /* Checkbox
  165. -------------------------- */
  166. /* Radio
  167. -------------------------- */
  168. /* Select
  169. -------------------------- */
  170. /* Alert
  171. -------------------------- */
  172. /* MessageBox
  173. -------------------------- */
  174. /* Message
  175. -------------------------- */
  176. /* Notification
  177. -------------------------- */
  178. /* Input
  179. -------------------------- */
  180. /* Cascader
  181. -------------------------- */
  182. /* Group
  183. -------------------------- */
  184. /* Tab
  185. -------------------------- */
  186. /* Button
  187. -------------------------- */
  188. /* cascader
  189. -------------------------- */
  190. /* Switch
  191. -------------------------- */
  192. /* Dialog
  193. -------------------------- */
  194. /* Table
  195. -------------------------- */
  196. /* Pagination
  197. -------------------------- */
  198. /* Popup
  199. -------------------------- */
  200. /* Popover
  201. -------------------------- */
  202. /* Tooltip
  203. -------------------------- */
  204. /* Tag
  205. -------------------------- */
  206. /* Tree
  207. -------------------------- */
  208. /* Dropdown
  209. -------------------------- */
  210. /* Badge
  211. -------------------------- */
  212. /* Card
  213. --------------------------*/
  214. /* Slider
  215. --------------------------*/
  216. /* Steps
  217. --------------------------*/
  218. /* Menu
  219. --------------------------*/
  220. /* Rate
  221. --------------------------*/
  222. /* DatePicker
  223. --------------------------*/
  224. /* Loading
  225. --------------------------*/
  226. /* Scrollbar
  227. --------------------------*/
  228. /* Carousel
  229. --------------------------*/
  230. /* Collapse
  231. --------------------------*/
  232. /* Transfer
  233. --------------------------*/
  234. /* Header
  235. --------------------------*/
  236. /* Footer
  237. --------------------------*/
  238. /* Main
  239. --------------------------*/
  240. /* Timeline
  241. --------------------------*/
  242. /* Backtop
  243. --------------------------*/
  244. /* Link
  245. --------------------------*/
  246. /* Calendar
  247. --------------------------*/
  248. /* Form
  249. -------------------------- */
  250. /* Avatar
  251. --------------------------*/
  252. /* Empty
  253. -------------------------- */
  254. /* Descriptions
  255. -------------------------- */
  256. /* Skeleton
  257. --------------------------*/
  258. /* Svg
  259. --------------- */
  260. /* Result
  261. -------------------------- */
  262. /* Break-point
  263. --------------------------*/
  264. /* Break-points
  265. -------------------------- */
  266. /* Scrollbar
  267. -------------------------- */
  268. /* Placeholder
  269. -------------------------- */
  270. /* BEM
  271. -------------------------- */
  272. /* Element Chalk Variables */
  273. /* Transition
  274. -------------------------- */
  275. /* Color
  276. -------------------------- */
  277. /* 53a8ff */
  278. /* 66b1ff */
  279. /* 79bbff */
  280. /* 8cc5ff */
  281. /* a0cfff */
  282. /* b3d8ff */
  283. /* c6e2ff */
  284. /* d9ecff */
  285. /* ecf5ff */
  286. /* Link
  287. -------------------------- */
  288. /* Border
  289. -------------------------- */
  290. /* Fill
  291. -------------------------- */
  292. /* Typography
  293. -------------------------- */
  294. /* Size
  295. -------------------------- */
  296. /* z-index
  297. -------------------------- */
  298. /* Disable base
  299. -------------------------- */
  300. /* Icon
  301. -------------------------- */
  302. /* Checkbox
  303. -------------------------- */
  304. /* Radio
  305. -------------------------- */
  306. /* Select
  307. -------------------------- */
  308. /* Alert
  309. -------------------------- */
  310. /* MessageBox
  311. -------------------------- */
  312. /* Message
  313. -------------------------- */
  314. /* Notification
  315. -------------------------- */
  316. /* Input
  317. -------------------------- */
  318. /* Cascader
  319. -------------------------- */
  320. /* Group
  321. -------------------------- */
  322. /* Tab
  323. -------------------------- */
  324. /* Button
  325. -------------------------- */
  326. /* cascader
  327. -------------------------- */
  328. /* Switch
  329. -------------------------- */
  330. /* Dialog
  331. -------------------------- */
  332. /* Table
  333. -------------------------- */
  334. /* Pagination
  335. -------------------------- */
  336. /* Popup
  337. -------------------------- */
  338. /* Popover
  339. -------------------------- */
  340. /* Tooltip
  341. -------------------------- */
  342. /* Tag
  343. -------------------------- */
  344. /* Tree
  345. -------------------------- */
  346. /* Dropdown
  347. -------------------------- */
  348. /* Badge
  349. -------------------------- */
  350. /* Card
  351. --------------------------*/
  352. /* Slider
  353. --------------------------*/
  354. /* Steps
  355. --------------------------*/
  356. /* Menu
  357. --------------------------*/
  358. /* Rate
  359. --------------------------*/
  360. /* DatePicker
  361. --------------------------*/
  362. /* Loading
  363. --------------------------*/
  364. /* Scrollbar
  365. --------------------------*/
  366. /* Carousel
  367. --------------------------*/
  368. /* Collapse
  369. --------------------------*/
  370. /* Transfer
  371. --------------------------*/
  372. /* Header
  373. --------------------------*/
  374. /* Footer
  375. --------------------------*/
  376. /* Main
  377. --------------------------*/
  378. /* Timeline
  379. --------------------------*/
  380. /* Backtop
  381. --------------------------*/
  382. /* Link
  383. --------------------------*/
  384. /* Calendar
  385. --------------------------*/
  386. /* Form
  387. -------------------------- */
  388. /* Avatar
  389. --------------------------*/
  390. /* Empty
  391. -------------------------- */
  392. /* Descriptions
  393. -------------------------- */
  394. /* Skeleton
  395. --------------------------*/
  396. /* Svg
  397. --------------- */
  398. /* Result
  399. -------------------------- */
  400. /* Break-point
  401. --------------------------*/
  402. .el-checkbox {
  403. color: #606266;
  404. font-weight: 500;
  405. font-size: 14px;
  406. position: relative;
  407. cursor: pointer;
  408. display: inline-block;
  409. white-space: nowrap;
  410. -webkit-user-select: none;
  411. -moz-user-select: none;
  412. -ms-user-select: none;
  413. user-select: none;
  414. margin-right: 30px; }
  415. .el-checkbox.is-bordered {
  416. padding: 9px 20px 9px 10px;
  417. border-radius: 4px;
  418. border: 1px solid #DCDFE6;
  419. -webkit-box-sizing: border-box;
  420. box-sizing: border-box;
  421. line-height: normal;
  422. height: 40px; }
  423. .el-checkbox.is-bordered.is-checked {
  424. border-color: #5075FC; }
  425. .el-checkbox.is-bordered.is-disabled {
  426. border-color: #EBEEF5;
  427. cursor: not-allowed; }
  428. .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  429. margin-left: 10px; }
  430. .el-checkbox.is-bordered.el-checkbox--medium {
  431. padding: 7px 20px 7px 10px;
  432. border-radius: 4px;
  433. height: 36px; }
  434. .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
  435. line-height: 17px;
  436. font-size: 14px; }
  437. .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner {
  438. height: 14px;
  439. width: 14px; }
  440. .el-checkbox.is-bordered.el-checkbox--small {
  441. padding: 5px 15px 5px 10px;
  442. border-radius: 3px;
  443. height: 32px; }
  444. .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__label {
  445. line-height: 15px;
  446. font-size: 12px; }
  447. .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner {
  448. height: 12px;
  449. width: 12px; }
  450. .el-checkbox.is-bordered.el-checkbox--small .el-checkbox__inner::after {
  451. height: 6px;
  452. width: 2px; }
  453. .el-checkbox.is-bordered.el-checkbox--mini {
  454. padding: 3px 15px 3px 10px;
  455. border-radius: 3px;
  456. height: 28px; }
  457. .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label {
  458. line-height: 12px;
  459. font-size: 12px; }
  460. .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner {
  461. height: 12px;
  462. width: 12px; }
  463. .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__inner::after {
  464. height: 6px;
  465. width: 2px; }
  466. .el-checkbox__input {
  467. white-space: nowrap;
  468. cursor: pointer;
  469. outline: none;
  470. display: inline-block;
  471. line-height: 1;
  472. position: relative;
  473. vertical-align: middle; }
  474. .el-checkbox__input.is-disabled .el-checkbox__inner {
  475. background-color: #edf2fc;
  476. border-color: #DCDFE6;
  477. cursor: not-allowed; }
  478. .el-checkbox__input.is-disabled .el-checkbox__inner::after {
  479. cursor: not-allowed;
  480. border-color: #C0C4CC; }
  481. .el-checkbox__input.is-disabled .el-checkbox__inner + .el-checkbox__label {
  482. cursor: not-allowed; }
  483. .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  484. background-color: #F2F6FC;
  485. border-color: #DCDFE6; }
  486. .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  487. border-color: #C0C4CC; }
  488. .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
  489. background-color: #F2F6FC;
  490. border-color: #DCDFE6; }
  491. .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner::before {
  492. background-color: #C0C4CC;
  493. border-color: #C0C4CC; }
  494. .el-checkbox__input.is-disabled + span.el-checkbox__label {
  495. color: #C0C4CC;
  496. cursor: not-allowed; }
  497. .el-checkbox__input.is-checked .el-checkbox__inner {
  498. background-color: #5075FC;
  499. border-color: #5075FC; }
  500. .el-checkbox__input.is-checked .el-checkbox__inner::after {
  501. -webkit-transform: rotate(45deg) scaleY(1);
  502. transform: rotate(45deg) scaleY(1); }
  503. .el-checkbox__input.is-checked + .el-checkbox__label {
  504. color: #5075FC; }
  505. .el-checkbox__input.is-focus {
  506. /*focus时 视觉上区分*/ }
  507. .el-checkbox__input.is-focus .el-checkbox__inner {
  508. border-color: #5075FC; }
  509. .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  510. background-color: #5075FC;
  511. border-color: #5075FC; }
  512. .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  513. content: '';
  514. position: absolute;
  515. display: block;
  516. background-color: #FFFFFF;
  517. height: 2px;
  518. -webkit-transform: scale(0.5);
  519. transform: scale(0.5);
  520. left: 0;
  521. right: 0;
  522. top: 5px; }
  523. .el-checkbox__input.is-indeterminate .el-checkbox__inner::after {
  524. display: none; }
  525. .el-checkbox__inner {
  526. display: inline-block;
  527. position: relative;
  528. border: 1px solid #DCDFE6;
  529. border-radius: 2px;
  530. -webkit-box-sizing: border-box;
  531. box-sizing: border-box;
  532. width: 14px;
  533. height: 14px;
  534. background-color: #FFFFFF;
  535. z-index: 1;
  536. -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  537. transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); }
  538. .el-checkbox__inner:hover {
  539. border-color: #5075FC; }
  540. .el-checkbox__inner::after {
  541. -webkit-box-sizing: content-box;
  542. box-sizing: content-box;
  543. content: "";
  544. border: 1px solid #FFFFFF;
  545. border-left: 0;
  546. border-top: 0;
  547. height: 7px;
  548. left: 4px;
  549. position: absolute;
  550. top: 1px;
  551. -webkit-transform: rotate(45deg) scaleY(0);
  552. transform: rotate(45deg) scaleY(0);
  553. width: 3px;
  554. -webkit-transition: -webkit-transform .15s ease-in .05s;
  555. transition: -webkit-transform .15s ease-in .05s;
  556. transition: transform .15s ease-in .05s;
  557. transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
  558. -webkit-transform-origin: center;
  559. transform-origin: center; }
  560. .el-checkbox__original {
  561. opacity: 0;
  562. outline: none;
  563. position: absolute;
  564. margin: 0;
  565. width: 0;
  566. height: 0;
  567. z-index: -1; }
  568. .el-checkbox__label {
  569. display: inline-block;
  570. padding-left: 10px;
  571. line-height: 19px;
  572. font-size: 14px; }
  573. .el-checkbox:last-of-type {
  574. margin-right: 0; }
  575. .el-checkbox-button {
  576. position: relative;
  577. display: inline-block; }
  578. .el-checkbox-button__inner {
  579. display: inline-block;
  580. line-height: 1;
  581. font-weight: 500;
  582. white-space: nowrap;
  583. vertical-align: middle;
  584. cursor: pointer;
  585. background: #FFFFFF;
  586. border: 1px solid #DCDFE6;
  587. border-left: 0;
  588. color: #606266;
  589. -webkit-appearance: none;
  590. text-align: center;
  591. -webkit-box-sizing: border-box;
  592. box-sizing: border-box;
  593. outline: none;
  594. margin: 0;
  595. position: relative;
  596. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  597. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  598. -moz-user-select: none;
  599. -webkit-user-select: none;
  600. -ms-user-select: none;
  601. padding: 12px 20px;
  602. font-size: 14px;
  603. border-radius: 0; }
  604. .el-checkbox-button__inner.is-round {
  605. padding: 12px 20px; }
  606. .el-checkbox-button__inner:hover {
  607. color: #5075FC; }
  608. .el-checkbox-button__inner [class*="el-icon-"] {
  609. line-height: 0.9; }
  610. .el-checkbox-button__inner [class*="el-icon-"] + span {
  611. margin-left: 5px; }
  612. .el-checkbox-button__original {
  613. opacity: 0;
  614. outline: none;
  615. position: absolute;
  616. margin: 0;
  617. z-index: -1; }
  618. .el-checkbox-button.is-checked .el-checkbox-button__inner {
  619. color: #FFFFFF;
  620. background-color: #5075FC;
  621. border-color: #5075FC;
  622. -webkit-box-shadow: -1px 0 0 0 #96acfd;
  623. box-shadow: -1px 0 0 0 #96acfd; }
  624. .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
  625. border-left-color: #5075FC; }
  626. .el-checkbox-button.is-disabled .el-checkbox-button__inner {
  627. color: #C0C4CC;
  628. cursor: not-allowed;
  629. background-image: none;
  630. background-color: #FFFFFF;
  631. border-color: #EBEEF5;
  632. -webkit-box-shadow: none;
  633. box-shadow: none; }
  634. .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner {
  635. border-left-color: #EBEEF5; }
  636. .el-checkbox-button:first-child .el-checkbox-button__inner {
  637. border-left: 1px solid #DCDFE6;
  638. border-radius: 4px 0 0 4px;
  639. -webkit-box-shadow: none !important;
  640. box-shadow: none !important; }
  641. .el-checkbox-button.is-focus .el-checkbox-button__inner {
  642. border-color: #5075FC; }
  643. .el-checkbox-button:last-child .el-checkbox-button__inner {
  644. border-radius: 0 4px 4px 0; }
  645. .el-checkbox-button--medium .el-checkbox-button__inner {
  646. padding: 10px 20px;
  647. font-size: 14px;
  648. border-radius: 0; }
  649. .el-checkbox-button--medium .el-checkbox-button__inner.is-round {
  650. padding: 10px 20px; }
  651. .el-checkbox-button--small .el-checkbox-button__inner {
  652. padding: 9px 15px;
  653. font-size: 12px;
  654. border-radius: 0; }
  655. .el-checkbox-button--small .el-checkbox-button__inner.is-round {
  656. padding: 9px 15px; }
  657. .el-checkbox-button--mini .el-checkbox-button__inner {
  658. padding: 7px 15px;
  659. font-size: 12px;
  660. border-radius: 0; }
  661. .el-checkbox-button--mini .el-checkbox-button__inner.is-round {
  662. padding: 7px 15px; }
  663. .el-checkbox-group {
  664. font-size: 0; }