tag.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Color
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Border
  20. -------------------------- */
  21. /* Fill
  22. -------------------------- */
  23. /* Typography
  24. -------------------------- */
  25. /* Size
  26. -------------------------- */
  27. /* z-index
  28. -------------------------- */
  29. /* Disable base
  30. -------------------------- */
  31. /* Icon
  32. -------------------------- */
  33. /* Checkbox
  34. -------------------------- */
  35. /* Radio
  36. -------------------------- */
  37. /* Select
  38. -------------------------- */
  39. /* Alert
  40. -------------------------- */
  41. /* MessageBox
  42. -------------------------- */
  43. /* Message
  44. -------------------------- */
  45. /* Notification
  46. -------------------------- */
  47. /* Input
  48. -------------------------- */
  49. /* Cascader
  50. -------------------------- */
  51. /* Group
  52. -------------------------- */
  53. /* Tab
  54. -------------------------- */
  55. /* Button
  56. -------------------------- */
  57. /* cascader
  58. -------------------------- */
  59. /* Switch
  60. -------------------------- */
  61. /* Dialog
  62. -------------------------- */
  63. /* Table
  64. -------------------------- */
  65. /* Pagination
  66. -------------------------- */
  67. /* Popup
  68. -------------------------- */
  69. /* Popover
  70. -------------------------- */
  71. /* Tooltip
  72. -------------------------- */
  73. /* Tag
  74. -------------------------- */
  75. /* Tree
  76. -------------------------- */
  77. /* Dropdown
  78. -------------------------- */
  79. /* Badge
  80. -------------------------- */
  81. /* Card
  82. --------------------------*/
  83. /* Slider
  84. --------------------------*/
  85. /* Steps
  86. --------------------------*/
  87. /* Menu
  88. --------------------------*/
  89. /* Rate
  90. --------------------------*/
  91. /* DatePicker
  92. --------------------------*/
  93. /* Loading
  94. --------------------------*/
  95. /* Scrollbar
  96. --------------------------*/
  97. /* Carousel
  98. --------------------------*/
  99. /* Collapse
  100. --------------------------*/
  101. /* Transfer
  102. --------------------------*/
  103. /* Header
  104. --------------------------*/
  105. /* Footer
  106. --------------------------*/
  107. /* Main
  108. --------------------------*/
  109. /* Timeline
  110. --------------------------*/
  111. /* Backtop
  112. --------------------------*/
  113. /* Link
  114. --------------------------*/
  115. /* Calendar
  116. --------------------------*/
  117. /* Form
  118. -------------------------- */
  119. /* Avatar
  120. --------------------------*/
  121. /* Empty
  122. -------------------------- */
  123. /* Descriptions
  124. -------------------------- */
  125. /* Skeleton
  126. --------------------------*/
  127. /* Svg
  128. --------------- */
  129. /* Result
  130. -------------------------- */
  131. /* Break-point
  132. --------------------------*/
  133. /* Break-points
  134. -------------------------- */
  135. /* Scrollbar
  136. -------------------------- */
  137. /* Placeholder
  138. -------------------------- */
  139. /* BEM
  140. -------------------------- */
  141. /* Element Chalk Variables */
  142. /* Transition
  143. -------------------------- */
  144. /* Color
  145. -------------------------- */
  146. /* 53a8ff */
  147. /* 66b1ff */
  148. /* 79bbff */
  149. /* 8cc5ff */
  150. /* a0cfff */
  151. /* b3d8ff */
  152. /* c6e2ff */
  153. /* d9ecff */
  154. /* ecf5ff */
  155. /* Link
  156. -------------------------- */
  157. /* Border
  158. -------------------------- */
  159. /* Fill
  160. -------------------------- */
  161. /* Typography
  162. -------------------------- */
  163. /* Size
  164. -------------------------- */
  165. /* z-index
  166. -------------------------- */
  167. /* Disable base
  168. -------------------------- */
  169. /* Icon
  170. -------------------------- */
  171. /* Checkbox
  172. -------------------------- */
  173. /* Radio
  174. -------------------------- */
  175. /* Select
  176. -------------------------- */
  177. /* Alert
  178. -------------------------- */
  179. /* MessageBox
  180. -------------------------- */
  181. /* Message
  182. -------------------------- */
  183. /* Notification
  184. -------------------------- */
  185. /* Input
  186. -------------------------- */
  187. /* Cascader
  188. -------------------------- */
  189. /* Group
  190. -------------------------- */
  191. /* Tab
  192. -------------------------- */
  193. /* Button
  194. -------------------------- */
  195. /* cascader
  196. -------------------------- */
  197. /* Switch
  198. -------------------------- */
  199. /* Dialog
  200. -------------------------- */
  201. /* Table
  202. -------------------------- */
  203. /* Pagination
  204. -------------------------- */
  205. /* Popup
  206. -------------------------- */
  207. /* Popover
  208. -------------------------- */
  209. /* Tooltip
  210. -------------------------- */
  211. /* Tag
  212. -------------------------- */
  213. /* Tree
  214. -------------------------- */
  215. /* Dropdown
  216. -------------------------- */
  217. /* Badge
  218. -------------------------- */
  219. /* Card
  220. --------------------------*/
  221. /* Slider
  222. --------------------------*/
  223. /* Steps
  224. --------------------------*/
  225. /* Menu
  226. --------------------------*/
  227. /* Rate
  228. --------------------------*/
  229. /* DatePicker
  230. --------------------------*/
  231. /* Loading
  232. --------------------------*/
  233. /* Scrollbar
  234. --------------------------*/
  235. /* Carousel
  236. --------------------------*/
  237. /* Collapse
  238. --------------------------*/
  239. /* Transfer
  240. --------------------------*/
  241. /* Header
  242. --------------------------*/
  243. /* Footer
  244. --------------------------*/
  245. /* Main
  246. --------------------------*/
  247. /* Timeline
  248. --------------------------*/
  249. /* Backtop
  250. --------------------------*/
  251. /* Link
  252. --------------------------*/
  253. /* Calendar
  254. --------------------------*/
  255. /* Form
  256. -------------------------- */
  257. /* Avatar
  258. --------------------------*/
  259. /* Empty
  260. -------------------------- */
  261. /* Descriptions
  262. -------------------------- */
  263. /* Skeleton
  264. --------------------------*/
  265. /* Svg
  266. --------------- */
  267. /* Result
  268. -------------------------- */
  269. /* Break-point
  270. --------------------------*/
  271. .el-tag {
  272. background-color: #eef1ff;
  273. border-color: #dce3fe;
  274. color: #5075fc;
  275. display: inline-block;
  276. height: 32px;
  277. padding: 0 10px;
  278. line-height: 30px;
  279. font-size: 12px;
  280. color: #5075FC;
  281. border-width: 1px;
  282. border-style: solid;
  283. border-radius: 4px;
  284. -webkit-box-sizing: border-box;
  285. box-sizing: border-box;
  286. white-space: nowrap; }
  287. .el-tag.is-hit {
  288. border-color: #5075FC; }
  289. .el-tag .el-tag__close {
  290. color: #5075fc; }
  291. .el-tag .el-tag__close:hover {
  292. color: #FFFFFF;
  293. background-color: #5075fc; }
  294. .el-tag.el-tag--info {
  295. background-color: #f4f4f5;
  296. border-color: #e9e9eb;
  297. color: #909399; }
  298. .el-tag.el-tag--info.is-hit {
  299. border-color: #909399; }
  300. .el-tag.el-tag--info .el-tag__close {
  301. color: #909399; }
  302. .el-tag.el-tag--info .el-tag__close:hover {
  303. color: #FFFFFF;
  304. background-color: #909399; }
  305. .el-tag.el-tag--success {
  306. background-color: #f0f9eb;
  307. border-color: #e1f3d8;
  308. color: #67c23a; }
  309. .el-tag.el-tag--success.is-hit {
  310. border-color: #67C23A; }
  311. .el-tag.el-tag--success .el-tag__close {
  312. color: #67c23a; }
  313. .el-tag.el-tag--success .el-tag__close:hover {
  314. color: #FFFFFF;
  315. background-color: #67c23a; }
  316. .el-tag.el-tag--warning {
  317. background-color: #fdf6ec;
  318. border-color: #faecd8;
  319. color: #e6a23c; }
  320. .el-tag.el-tag--warning.is-hit {
  321. border-color: #E6A23C; }
  322. .el-tag.el-tag--warning .el-tag__close {
  323. color: #e6a23c; }
  324. .el-tag.el-tag--warning .el-tag__close:hover {
  325. color: #FFFFFF;
  326. background-color: #e6a23c; }
  327. .el-tag.el-tag--danger {
  328. background-color: #fef0f0;
  329. border-color: #fde2e2;
  330. color: #f56c6c; }
  331. .el-tag.el-tag--danger.is-hit {
  332. border-color: #F56C6C; }
  333. .el-tag.el-tag--danger .el-tag__close {
  334. color: #f56c6c; }
  335. .el-tag.el-tag--danger .el-tag__close:hover {
  336. color: #FFFFFF;
  337. background-color: #f56c6c; }
  338. .el-tag .el-icon-close {
  339. border-radius: 50%;
  340. text-align: center;
  341. position: relative;
  342. cursor: pointer;
  343. font-size: 12px;
  344. height: 16px;
  345. width: 16px;
  346. line-height: 16px;
  347. vertical-align: middle;
  348. top: -1px;
  349. right: -5px; }
  350. .el-tag .el-icon-close::before {
  351. display: block; }
  352. .el-tag--dark {
  353. background-color: #5075fc;
  354. border-color: #5075fc;
  355. color: white; }
  356. .el-tag--dark.is-hit {
  357. border-color: #5075FC; }
  358. .el-tag--dark .el-tag__close {
  359. color: white; }
  360. .el-tag--dark .el-tag__close:hover {
  361. color: #FFFFFF;
  362. background-color: #7391fd; }
  363. .el-tag--dark.el-tag--info {
  364. background-color: #909399;
  365. border-color: #909399;
  366. color: white; }
  367. .el-tag--dark.el-tag--info.is-hit {
  368. border-color: #909399; }
  369. .el-tag--dark.el-tag--info .el-tag__close {
  370. color: white; }
  371. .el-tag--dark.el-tag--info .el-tag__close:hover {
  372. color: #FFFFFF;
  373. background-color: #a6a9ad; }
  374. .el-tag--dark.el-tag--success {
  375. background-color: #67c23a;
  376. border-color: #67c23a;
  377. color: white; }
  378. .el-tag--dark.el-tag--success.is-hit {
  379. border-color: #67C23A; }
  380. .el-tag--dark.el-tag--success .el-tag__close {
  381. color: white; }
  382. .el-tag--dark.el-tag--success .el-tag__close:hover {
  383. color: #FFFFFF;
  384. background-color: #85ce61; }
  385. .el-tag--dark.el-tag--warning {
  386. background-color: #e6a23c;
  387. border-color: #e6a23c;
  388. color: white; }
  389. .el-tag--dark.el-tag--warning.is-hit {
  390. border-color: #E6A23C; }
  391. .el-tag--dark.el-tag--warning .el-tag__close {
  392. color: white; }
  393. .el-tag--dark.el-tag--warning .el-tag__close:hover {
  394. color: #FFFFFF;
  395. background-color: #ebb563; }
  396. .el-tag--dark.el-tag--danger {
  397. background-color: #f56c6c;
  398. border-color: #f56c6c;
  399. color: white; }
  400. .el-tag--dark.el-tag--danger.is-hit {
  401. border-color: #F56C6C; }
  402. .el-tag--dark.el-tag--danger .el-tag__close {
  403. color: white; }
  404. .el-tag--dark.el-tag--danger .el-tag__close:hover {
  405. color: #FFFFFF;
  406. background-color: #f78989; }
  407. .el-tag--plain {
  408. background-color: white;
  409. border-color: #b9c8fe;
  410. color: #5075fc; }
  411. .el-tag--plain.is-hit {
  412. border-color: #5075FC; }
  413. .el-tag--plain .el-tag__close {
  414. color: #5075fc; }
  415. .el-tag--plain .el-tag__close:hover {
  416. color: #FFFFFF;
  417. background-color: #5075fc; }
  418. .el-tag--plain.el-tag--info {
  419. background-color: white;
  420. border-color: #d3d4d6;
  421. color: #909399; }
  422. .el-tag--plain.el-tag--info.is-hit {
  423. border-color: #909399; }
  424. .el-tag--plain.el-tag--info .el-tag__close {
  425. color: #909399; }
  426. .el-tag--plain.el-tag--info .el-tag__close:hover {
  427. color: #FFFFFF;
  428. background-color: #909399; }
  429. .el-tag--plain.el-tag--success {
  430. background-color: white;
  431. border-color: #c2e7b0;
  432. color: #67c23a; }
  433. .el-tag--plain.el-tag--success.is-hit {
  434. border-color: #67C23A; }
  435. .el-tag--plain.el-tag--success .el-tag__close {
  436. color: #67c23a; }
  437. .el-tag--plain.el-tag--success .el-tag__close:hover {
  438. color: #FFFFFF;
  439. background-color: #67c23a; }
  440. .el-tag--plain.el-tag--warning {
  441. background-color: white;
  442. border-color: #f5dab1;
  443. color: #e6a23c; }
  444. .el-tag--plain.el-tag--warning.is-hit {
  445. border-color: #E6A23C; }
  446. .el-tag--plain.el-tag--warning .el-tag__close {
  447. color: #e6a23c; }
  448. .el-tag--plain.el-tag--warning .el-tag__close:hover {
  449. color: #FFFFFF;
  450. background-color: #e6a23c; }
  451. .el-tag--plain.el-tag--danger {
  452. background-color: white;
  453. border-color: #fbc4c4;
  454. color: #f56c6c; }
  455. .el-tag--plain.el-tag--danger.is-hit {
  456. border-color: #F56C6C; }
  457. .el-tag--plain.el-tag--danger .el-tag__close {
  458. color: #f56c6c; }
  459. .el-tag--plain.el-tag--danger .el-tag__close:hover {
  460. color: #FFFFFF;
  461. background-color: #f56c6c; }
  462. .el-tag--medium {
  463. height: 28px;
  464. line-height: 26px; }
  465. .el-tag--medium .el-icon-close {
  466. -webkit-transform: scale(0.8);
  467. transform: scale(0.8); }
  468. .el-tag--small {
  469. height: 24px;
  470. padding: 0 8px;
  471. line-height: 22px; }
  472. .el-tag--small .el-icon-close {
  473. -webkit-transform: scale(0.8);
  474. transform: scale(0.8); }
  475. .el-tag--mini {
  476. height: 20px;
  477. padding: 0 5px;
  478. line-height: 19px; }
  479. .el-tag--mini .el-icon-close {
  480. margin-left: -3px;
  481. -webkit-transform: scale(0.7);
  482. transform: scale(0.7); }