Plat Admin

checkbox.css 15KB

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