radio.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. @charset "UTF-8";
  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. /* Empty
  123. -------------------------- */
  124. /* Descriptions
  125. -------------------------- */
  126. /* Skeleton
  127. --------------------------*/
  128. /* Svg
  129. --------------- */
  130. /* Result
  131. -------------------------- */
  132. /* Break-point
  133. --------------------------*/
  134. /* Break-points
  135. -------------------------- */
  136. /* Scrollbar
  137. -------------------------- */
  138. /* Placeholder
  139. -------------------------- */
  140. /* BEM
  141. -------------------------- */
  142. /* Element Chalk Variables */
  143. /* Transition
  144. -------------------------- */
  145. /* Color
  146. -------------------------- */
  147. /* 53a8ff */
  148. /* 66b1ff */
  149. /* 79bbff */
  150. /* 8cc5ff */
  151. /* a0cfff */
  152. /* b3d8ff */
  153. /* c6e2ff */
  154. /* d9ecff */
  155. /* ecf5ff */
  156. /* Link
  157. -------------------------- */
  158. /* Border
  159. -------------------------- */
  160. /* Fill
  161. -------------------------- */
  162. /* Typography
  163. -------------------------- */
  164. /* Size
  165. -------------------------- */
  166. /* z-index
  167. -------------------------- */
  168. /* Disable base
  169. -------------------------- */
  170. /* Icon
  171. -------------------------- */
  172. /* Checkbox
  173. -------------------------- */
  174. /* Radio
  175. -------------------------- */
  176. /* Select
  177. -------------------------- */
  178. /* Alert
  179. -------------------------- */
  180. /* MessageBox
  181. -------------------------- */
  182. /* Message
  183. -------------------------- */
  184. /* Notification
  185. -------------------------- */
  186. /* Input
  187. -------------------------- */
  188. /* Cascader
  189. -------------------------- */
  190. /* Group
  191. -------------------------- */
  192. /* Tab
  193. -------------------------- */
  194. /* Button
  195. -------------------------- */
  196. /* cascader
  197. -------------------------- */
  198. /* Switch
  199. -------------------------- */
  200. /* Dialog
  201. -------------------------- */
  202. /* Table
  203. -------------------------- */
  204. /* Pagination
  205. -------------------------- */
  206. /* Popup
  207. -------------------------- */
  208. /* Popover
  209. -------------------------- */
  210. /* Tooltip
  211. -------------------------- */
  212. /* Tag
  213. -------------------------- */
  214. /* Tree
  215. -------------------------- */
  216. /* Dropdown
  217. -------------------------- */
  218. /* Badge
  219. -------------------------- */
  220. /* Card
  221. --------------------------*/
  222. /* Slider
  223. --------------------------*/
  224. /* Steps
  225. --------------------------*/
  226. /* Menu
  227. --------------------------*/
  228. /* Rate
  229. --------------------------*/
  230. /* DatePicker
  231. --------------------------*/
  232. /* Loading
  233. --------------------------*/
  234. /* Scrollbar
  235. --------------------------*/
  236. /* Carousel
  237. --------------------------*/
  238. /* Collapse
  239. --------------------------*/
  240. /* Transfer
  241. --------------------------*/
  242. /* Header
  243. --------------------------*/
  244. /* Footer
  245. --------------------------*/
  246. /* Main
  247. --------------------------*/
  248. /* Timeline
  249. --------------------------*/
  250. /* Backtop
  251. --------------------------*/
  252. /* Link
  253. --------------------------*/
  254. /* Calendar
  255. --------------------------*/
  256. /* Form
  257. -------------------------- */
  258. /* Avatar
  259. --------------------------*/
  260. /* Empty
  261. -------------------------- */
  262. /* Descriptions
  263. -------------------------- */
  264. /* Skeleton
  265. --------------------------*/
  266. /* Svg
  267. --------------- */
  268. /* Result
  269. -------------------------- */
  270. /* Break-point
  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-radio {
  403. color: #606266;
  404. font-weight: 500;
  405. line-height: 1;
  406. position: relative;
  407. cursor: pointer;
  408. display: inline-block;
  409. white-space: nowrap;
  410. outline: none;
  411. font-size: 14px;
  412. margin-right: 30px;
  413. -moz-user-select: none;
  414. -webkit-user-select: none;
  415. -ms-user-select: none; }
  416. .el-radio.is-bordered {
  417. padding: 12px 20px 0 10px;
  418. border-radius: 4px;
  419. border: 1px solid #DCDFE6;
  420. -webkit-box-sizing: border-box;
  421. box-sizing: border-box;
  422. height: 40px; }
  423. .el-radio.is-bordered.is-checked {
  424. border-color: #5075FC; }
  425. .el-radio.is-bordered.is-disabled {
  426. cursor: not-allowed;
  427. border-color: #EBEEF5; }
  428. .el-radio.is-bordered + .el-radio.is-bordered {
  429. margin-left: 10px; }
  430. .el-radio--medium.is-bordered {
  431. padding: 10px 20px 0 10px;
  432. border-radius: 4px;
  433. height: 36px; }
  434. .el-radio--medium.is-bordered .el-radio__label {
  435. font-size: 14px; }
  436. .el-radio--medium.is-bordered .el-radio__inner {
  437. height: 14px;
  438. width: 14px; }
  439. .el-radio--small.is-bordered {
  440. padding: 8px 15px 0 10px;
  441. border-radius: 3px;
  442. height: 32px; }
  443. .el-radio--small.is-bordered .el-radio__label {
  444. font-size: 12px; }
  445. .el-radio--small.is-bordered .el-radio__inner {
  446. height: 12px;
  447. width: 12px; }
  448. .el-radio--mini.is-bordered {
  449. padding: 6px 15px 0 10px;
  450. border-radius: 3px;
  451. height: 28px; }
  452. .el-radio--mini.is-bordered .el-radio__label {
  453. font-size: 12px; }
  454. .el-radio--mini.is-bordered .el-radio__inner {
  455. height: 12px;
  456. width: 12px; }
  457. .el-radio:last-child {
  458. margin-right: 0; }
  459. .el-radio__input {
  460. white-space: nowrap;
  461. cursor: pointer;
  462. outline: none;
  463. display: inline-block;
  464. line-height: 1;
  465. position: relative;
  466. vertical-align: middle; }
  467. .el-radio__input.is-disabled .el-radio__inner {
  468. background-color: #F5F7FA;
  469. border-color: #E4E7ED;
  470. cursor: not-allowed; }
  471. .el-radio__input.is-disabled .el-radio__inner::after {
  472. cursor: not-allowed;
  473. background-color: #F5F7FA; }
  474. .el-radio__input.is-disabled .el-radio__inner + .el-radio__label {
  475. cursor: not-allowed; }
  476. .el-radio__input.is-disabled.is-checked .el-radio__inner {
  477. background-color: #F5F7FA;
  478. border-color: #E4E7ED; }
  479. .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  480. background-color: #C0C4CC; }
  481. .el-radio__input.is-disabled + span.el-radio__label {
  482. color: #C0C4CC;
  483. cursor: not-allowed; }
  484. .el-radio__input.is-checked .el-radio__inner {
  485. border-color: #5075FC;
  486. background: #5075FC; }
  487. .el-radio__input.is-checked .el-radio__inner::after {
  488. -webkit-transform: translate(-50%, -50%) scale(1);
  489. transform: translate(-50%, -50%) scale(1); }
  490. .el-radio__input.is-checked + .el-radio__label {
  491. color: #5075FC; }
  492. .el-radio__input.is-focus .el-radio__inner {
  493. border-color: #5075FC; }
  494. .el-radio__inner {
  495. border: 1px solid #DCDFE6;
  496. border-radius: 100%;
  497. width: 14px;
  498. height: 14px;
  499. background-color: #FFFFFF;
  500. position: relative;
  501. cursor: pointer;
  502. display: inline-block;
  503. -webkit-box-sizing: border-box;
  504. box-sizing: border-box; }
  505. .el-radio__inner:hover {
  506. border-color: #5075FC; }
  507. .el-radio__inner::after {
  508. width: 4px;
  509. height: 4px;
  510. border-radius: 100%;
  511. background-color: #FFFFFF;
  512. content: "";
  513. position: absolute;
  514. left: 50%;
  515. top: 50%;
  516. -webkit-transform: translate(-50%, -50%) scale(0);
  517. transform: translate(-50%, -50%) scale(0);
  518. -webkit-transition: -webkit-transform .15s ease-in;
  519. transition: -webkit-transform .15s ease-in;
  520. transition: transform .15s ease-in;
  521. transition: transform .15s ease-in, -webkit-transform .15s ease-in; }
  522. .el-radio__original {
  523. opacity: 0;
  524. outline: none;
  525. position: absolute;
  526. z-index: -1;
  527. top: 0;
  528. left: 0;
  529. right: 0;
  530. bottom: 0;
  531. margin: 0; }
  532. .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) {
  533. /*获得焦点时 样式提醒*/ }
  534. .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  535. -webkit-box-shadow: 0 0 2px 2px #5075FC;
  536. box-shadow: 0 0 2px 2px #5075FC; }
  537. .el-radio__label {
  538. font-size: 14px;
  539. padding-left: 10px; }