radio-button.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  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-button {
  403. position: relative;
  404. display: inline-block;
  405. outline: none; }
  406. .el-radio-button__inner {
  407. display: inline-block;
  408. line-height: 1;
  409. white-space: nowrap;
  410. vertical-align: middle;
  411. background: #FFFFFF;
  412. border: 1px solid #DCDFE6;
  413. font-weight: 500;
  414. border-left: 0;
  415. color: #606266;
  416. -webkit-appearance: none;
  417. text-align: center;
  418. -webkit-box-sizing: border-box;
  419. box-sizing: border-box;
  420. outline: none;
  421. margin: 0;
  422. position: relative;
  423. cursor: pointer;
  424. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  425. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  426. padding: 12px 20px;
  427. font-size: 14px;
  428. border-radius: 0; }
  429. .el-radio-button__inner.is-round {
  430. padding: 12px 20px; }
  431. .el-radio-button__inner:hover {
  432. color: #5075FC; }
  433. .el-radio-button__inner [class*="el-icon-"] {
  434. line-height: 0.9; }
  435. .el-radio-button__inner [class*="el-icon-"] + span {
  436. margin-left: 5px; }
  437. .el-radio-button:first-child .el-radio-button__inner {
  438. border-left: 1px solid #DCDFE6;
  439. border-radius: 4px 0 0 4px;
  440. -webkit-box-shadow: none !important;
  441. box-shadow: none !important; }
  442. .el-radio-button__orig-radio {
  443. opacity: 0;
  444. outline: none;
  445. position: absolute;
  446. z-index: -1; }
  447. .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  448. color: #FFFFFF;
  449. background-color: #5075FC;
  450. border-color: #5075FC;
  451. -webkit-box-shadow: -1px 0 0 0 #5075FC;
  452. box-shadow: -1px 0 0 0 #5075FC; }
  453. .el-radio-button__orig-radio:disabled + .el-radio-button__inner {
  454. color: #C0C4CC;
  455. cursor: not-allowed;
  456. background-image: none;
  457. background-color: #FFFFFF;
  458. border-color: #EBEEF5;
  459. -webkit-box-shadow: none;
  460. box-shadow: none; }
  461. .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
  462. background-color: #F2F6FC; }
  463. .el-radio-button:last-child .el-radio-button__inner {
  464. border-radius: 0 4px 4px 0; }
  465. .el-radio-button:first-child:last-child .el-radio-button__inner {
  466. border-radius: 4px; }
  467. .el-radio-button--medium .el-radio-button__inner {
  468. padding: 10px 20px;
  469. font-size: 14px;
  470. border-radius: 0; }
  471. .el-radio-button--medium .el-radio-button__inner.is-round {
  472. padding: 10px 20px; }
  473. .el-radio-button--small .el-radio-button__inner {
  474. padding: 9px 15px;
  475. font-size: 12px;
  476. border-radius: 0; }
  477. .el-radio-button--small .el-radio-button__inner.is-round {
  478. padding: 9px 15px; }
  479. .el-radio-button--mini .el-radio-button__inner {
  480. padding: 7px 15px;
  481. font-size: 12px;
  482. border-radius: 0; }
  483. .el-radio-button--mini .el-radio-button__inner.is-round {
  484. padding: 7px 15px; }
  485. .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  486. /*获得焦点时 样式提醒*/
  487. -webkit-box-shadow: 0 0 2px 2px #5075FC;
  488. box-shadow: 0 0 2px 2px #5075FC; }