checkbox.css 16 KB

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