radio-button.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  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-button {
  373. position: relative;
  374. display: inline-block;
  375. outline: none; }
  376. .el-radio-button__inner {
  377. display: inline-block;
  378. line-height: 1;
  379. white-space: nowrap;
  380. vertical-align: middle;
  381. background: #FFFFFF;
  382. border: 1px solid #DCDFE6;
  383. font-weight: 500;
  384. border-left: 0;
  385. color: #606266;
  386. -webkit-appearance: none;
  387. text-align: center;
  388. -webkit-box-sizing: border-box;
  389. box-sizing: border-box;
  390. outline: none;
  391. margin: 0;
  392. position: relative;
  393. cursor: pointer;
  394. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  395. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  396. padding: 12px 20px;
  397. font-size: 14px;
  398. border-radius: 0; }
  399. .el-radio-button__inner.is-round {
  400. padding: 12px 20px; }
  401. .el-radio-button__inner:hover {
  402. color: #2D74E7; }
  403. .el-radio-button__inner [class*="el-icon-"] {
  404. line-height: 0.9; }
  405. .el-radio-button__inner [class*="el-icon-"] + span {
  406. margin-left: 5px; }
  407. .el-radio-button:first-child .el-radio-button__inner {
  408. border-left: 1px solid #DCDFE6;
  409. border-radius: 4px 0 0 4px;
  410. -webkit-box-shadow: none !important;
  411. box-shadow: none !important; }
  412. .el-radio-button__orig-radio {
  413. opacity: 0;
  414. outline: none;
  415. position: absolute;
  416. z-index: -1; }
  417. .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  418. color: #FFFFFF;
  419. background-color: #2D74E7;
  420. border-color: #2D74E7;
  421. -webkit-box-shadow: -1px 0 0 0 #2D74E7;
  422. box-shadow: -1px 0 0 0 #2D74E7; }
  423. .el-radio-button__orig-radio:disabled + .el-radio-button__inner {
  424. color: #C0C4CC;
  425. cursor: not-allowed;
  426. background-image: none;
  427. background-color: #FFFFFF;
  428. border-color: #EBEEF5;
  429. -webkit-box-shadow: none;
  430. box-shadow: none; }
  431. .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
  432. background-color: #F2F6FC; }
  433. .el-radio-button:last-child .el-radio-button__inner {
  434. border-radius: 0 4px 4px 0; }
  435. .el-radio-button:first-child:last-child .el-radio-button__inner {
  436. border-radius: 4px; }
  437. .el-radio-button--medium .el-radio-button__inner {
  438. padding: 10px 20px;
  439. font-size: 14px;
  440. border-radius: 0; }
  441. .el-radio-button--medium .el-radio-button__inner.is-round {
  442. padding: 10px 20px; }
  443. .el-radio-button--small .el-radio-button__inner {
  444. padding: 9px 15px;
  445. font-size: 12px;
  446. border-radius: 0; }
  447. .el-radio-button--small .el-radio-button__inner.is-round {
  448. padding: 9px 15px; }
  449. .el-radio-button--mini .el-radio-button__inner {
  450. padding: 7px 15px;
  451. font-size: 12px;
  452. border-radius: 0; }
  453. .el-radio-button--mini .el-radio-button__inner.is-round {
  454. padding: 7px 15px; }
  455. .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  456. /*获得焦点时 样式提醒*/
  457. -webkit-box-shadow: 0 0 2px 2px #2D74E7;
  458. box-shadow: 0 0 2px 2px #2D74E7; }