radio.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  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. /* 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. /* 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-radio {
  373. color: #606266;
  374. font-weight: 500;
  375. line-height: 1;
  376. position: relative;
  377. cursor: pointer;
  378. display: inline-block;
  379. white-space: nowrap;
  380. outline: none;
  381. font-size: 14px;
  382. margin-right: 30px;
  383. -moz-user-select: none;
  384. -webkit-user-select: none;
  385. -ms-user-select: none; }
  386. .el-radio.is-bordered {
  387. padding: 12px 20px 0 10px;
  388. border-radius: 4px;
  389. border: 1px solid #DCDFE6;
  390. -webkit-box-sizing: border-box;
  391. box-sizing: border-box;
  392. height: 40px; }
  393. .el-radio.is-bordered.is-checked {
  394. border-color: #2D74E7; }
  395. .el-radio.is-bordered.is-disabled {
  396. cursor: not-allowed;
  397. border-color: #EBEEF5; }
  398. .el-radio.is-bordered + .el-radio.is-bordered {
  399. margin-left: 10px; }
  400. .el-radio--medium.is-bordered {
  401. padding: 10px 20px 0 10px;
  402. border-radius: 4px;
  403. height: 36px; }
  404. .el-radio--medium.is-bordered .el-radio__label {
  405. font-size: 14px; }
  406. .el-radio--medium.is-bordered .el-radio__inner {
  407. height: 14px;
  408. width: 14px; }
  409. .el-radio--small.is-bordered {
  410. padding: 8px 15px 0 10px;
  411. border-radius: 3px;
  412. height: 32px; }
  413. .el-radio--small.is-bordered .el-radio__label {
  414. font-size: 12px; }
  415. .el-radio--small.is-bordered .el-radio__inner {
  416. height: 12px;
  417. width: 12px; }
  418. .el-radio--mini.is-bordered {
  419. padding: 6px 15px 0 10px;
  420. border-radius: 3px;
  421. height: 28px; }
  422. .el-radio--mini.is-bordered .el-radio__label {
  423. font-size: 12px; }
  424. .el-radio--mini.is-bordered .el-radio__inner {
  425. height: 12px;
  426. width: 12px; }
  427. .el-radio:last-child {
  428. margin-right: 0; }
  429. .el-radio__input {
  430. white-space: nowrap;
  431. cursor: pointer;
  432. outline: none;
  433. display: inline-block;
  434. line-height: 1;
  435. position: relative;
  436. vertical-align: middle; }
  437. .el-radio__input.is-disabled .el-radio__inner {
  438. background-color: #F5F7FA;
  439. border-color: #E4E7ED;
  440. cursor: not-allowed; }
  441. .el-radio__input.is-disabled .el-radio__inner::after {
  442. cursor: not-allowed;
  443. background-color: #F5F7FA; }
  444. .el-radio__input.is-disabled .el-radio__inner + .el-radio__label {
  445. cursor: not-allowed; }
  446. .el-radio__input.is-disabled.is-checked .el-radio__inner {
  447. background-color: #F5F7FA;
  448. border-color: #E4E7ED; }
  449. .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  450. background-color: #C0C4CC; }
  451. .el-radio__input.is-disabled + span.el-radio__label {
  452. color: #C0C4CC;
  453. cursor: not-allowed; }
  454. .el-radio__input.is-checked .el-radio__inner {
  455. border-color: #2D74E7;
  456. background: #2D74E7; }
  457. .el-radio__input.is-checked .el-radio__inner::after {
  458. -webkit-transform: translate(-50%, -50%) scale(1);
  459. transform: translate(-50%, -50%) scale(1); }
  460. .el-radio__input.is-checked + .el-radio__label {
  461. color: #2D74E7; }
  462. .el-radio__input.is-focus .el-radio__inner {
  463. border-color: #2D74E7; }
  464. .el-radio__inner {
  465. border: 1px solid #DCDFE6;
  466. border-radius: 100%;
  467. width: 14px;
  468. height: 14px;
  469. background-color: #FFFFFF;
  470. position: relative;
  471. cursor: pointer;
  472. display: inline-block;
  473. -webkit-box-sizing: border-box;
  474. box-sizing: border-box; }
  475. .el-radio__inner:hover {
  476. border-color: #2D74E7; }
  477. .el-radio__inner::after {
  478. width: 4px;
  479. height: 4px;
  480. border-radius: 100%;
  481. background-color: #FFFFFF;
  482. content: "";
  483. position: absolute;
  484. left: 50%;
  485. top: 50%;
  486. -webkit-transform: translate(-50%, -50%) scale(0);
  487. transform: translate(-50%, -50%) scale(0);
  488. -webkit-transition: -webkit-transform .15s ease-in;
  489. transition: -webkit-transform .15s ease-in;
  490. transition: transform .15s ease-in;
  491. transition: transform .15s ease-in, -webkit-transform .15s ease-in; }
  492. .el-radio__original {
  493. opacity: 0;
  494. outline: none;
  495. position: absolute;
  496. z-index: -1;
  497. top: 0;
  498. left: 0;
  499. right: 0;
  500. bottom: 0;
  501. margin: 0; }
  502. .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) {
  503. /*获得焦点时 样式提醒*/ }
  504. .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  505. -webkit-box-shadow: 0 0 2px 2px #2D74E7;
  506. box-shadow: 0 0 2px 2px #2D74E7; }
  507. .el-radio__label {
  508. font-size: 14px;
  509. padding-left: 10px; }