框架源码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1554 lines
51 KiB

4 years ago
  1. [data-theme="blue"] {
  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. .el-tabs__header {
  253. padding: 0;
  254. position: relative;
  255. margin: 0 0 15px; }
  256. .el-tabs__active-bar {
  257. position: absolute;
  258. bottom: 0;
  259. left: 0;
  260. height: 2px;
  261. background-color: #92D9FF;
  262. z-index: 1;
  263. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  264. transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  265. transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  266. transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  267. list-style: none; }
  268. .el-tabs__new-tab {
  269. float: right;
  270. border: 1px solid #d3dce6;
  271. height: 18px;
  272. width: 18px;
  273. line-height: 18px;
  274. margin: 12px 0 9px 10px;
  275. border-radius: 3px;
  276. text-align: center;
  277. font-size: 12px;
  278. color: #d3dce6;
  279. cursor: pointer;
  280. -webkit-transition: all .15s;
  281. transition: all .15s; }
  282. .el-tabs__new-tab .el-icon-plus {
  283. -webkit-transform: scale(0.8, 0.8);
  284. transform: scale(0.8, 0.8); }
  285. .el-tabs__new-tab:hover {
  286. color: #92D9FF; }
  287. .el-tabs__nav-wrap {
  288. overflow: hidden;
  289. margin-bottom: -1px;
  290. position: relative; }
  291. .el-tabs__nav-wrap::after {
  292. content: "";
  293. position: absolute;
  294. left: 0;
  295. bottom: 0;
  296. width: 100%;
  297. height: 2px;
  298. background-color: #E4E7ED;
  299. z-index: 1; }
  300. .el-tabs__nav-wrap.is-scrollable {
  301. padding: 0 20px;
  302. -webkit-box-sizing: border-box;
  303. box-sizing: border-box; }
  304. .el-tabs__nav-scroll {
  305. overflow: hidden; }
  306. .el-tabs__nav-next, .el-tabs__nav-prev {
  307. position: absolute;
  308. cursor: pointer;
  309. line-height: 44px;
  310. font-size: 12px;
  311. color: #909399; }
  312. .el-tabs__nav-next {
  313. right: 0; }
  314. .el-tabs__nav-prev {
  315. left: 0; }
  316. .el-tabs__nav {
  317. white-space: nowrap;
  318. position: relative;
  319. -webkit-transition: -webkit-transform .3s;
  320. transition: -webkit-transform .3s;
  321. transition: transform .3s;
  322. transition: transform .3s, -webkit-transform .3s;
  323. float: left;
  324. z-index: 2; }
  325. .el-tabs__nav.is-stretch {
  326. min-width: 100%;
  327. display: -webkit-box;
  328. display: -ms-flexbox;
  329. display: flex; }
  330. .el-tabs__nav.is-stretch > * {
  331. -webkit-box-flex: 1;
  332. -ms-flex: 1;
  333. flex: 1;
  334. text-align: center; }
  335. .el-tabs__item {
  336. padding: 0 20px;
  337. height: 40px;
  338. -webkit-box-sizing: border-box;
  339. box-sizing: border-box;
  340. line-height: 40px;
  341. display: inline-block;
  342. list-style: none;
  343. font-size: 14px;
  344. font-weight: 500;
  345. color: #fff;
  346. position: relative; }
  347. .el-tabs__item:focus, .el-tabs__item:focus:active {
  348. outline: none; }
  349. .el-tabs__item:focus.is-active.is-focus:not(:active) {
  350. -webkit-box-shadow: 0 0 2px 2px #92D9FF inset;
  351. box-shadow: 0 0 2px 2px #92D9FF inset;
  352. border-radius: 3px; }
  353. .el-tabs__item .el-icon-close {
  354. border-radius: 50%;
  355. text-align: center;
  356. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  357. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  358. margin-left: 5px; }
  359. .el-tabs__item .el-icon-close:before {
  360. -webkit-transform: scale(0.9);
  361. transform: scale(0.9);
  362. display: inline-block; }
  363. .el-tabs__item .el-icon-close:hover {
  364. background-color: rgba(255, 255, 255, 0.5);
  365. color: #000000; }
  366. .el-tabs__item.is-active {
  367. color: #92D9FF; }
  368. .el-tabs__item:hover {
  369. color: #92D9FF;
  370. cursor: pointer; }
  371. .el-tabs__item.is-disabled {
  372. color: rgba(255, 255, 255, 0.5);
  373. cursor: default; }
  374. .el-tabs__content {
  375. overflow: hidden;
  376. position: relative; }
  377. [data-theme="blue"] .el-tabs--card > .el-tabs__header {
  378. border-bottom: 1px solid #E4E7ED; }
  379. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
  380. content: none; }
  381. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__nav {
  382. border: 1px solid #E4E7ED;
  383. border-bottom: none;
  384. border-radius: 4px 4px 0 0;
  385. -webkit-box-sizing: border-box;
  386. box-sizing: border-box; }
  387. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__active-bar {
  388. display: none; }
  389. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
  390. position: relative;
  391. font-size: 12px;
  392. width: 0;
  393. height: 14px;
  394. vertical-align: middle;
  395. line-height: 15px;
  396. overflow: hidden;
  397. top: -1px;
  398. right: -2px;
  399. -webkit-transform-origin: 100% 50%;
  400. transform-origin: 100% 50%; }
  401. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item {
  402. border-bottom: 1px solid transparent;
  403. border-left: 1px solid #E4E7ED;
  404. -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  405. transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
  406. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  407. border-left: none; }
  408. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
  409. padding-left: 13px;
  410. padding-right: 13px; }
  411. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
  412. width: 14px; }
  413. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  414. border-bottom-color: #000000; }
  415. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  416. padding-left: 20px;
  417. padding-right: 20px; }
  418. [data-theme="blue"] .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
  419. width: 14px; }
  420. [data-theme="blue"] .el-tabs--border-card {
  421. background: #000000;
  422. border: 1px solid #DCDFE6;
  423. -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  424. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); }
  425. [data-theme="blue"] .el-tabs--border-card > .el-tabs__content {
  426. padding: 15px; }
  427. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header {
  428. background-color: rgba(255, 255, 255, 0.15);
  429. border-bottom: 1px solid #E4E7ED;
  430. margin: 0; }
  431. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
  432. content: none; }
  433. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  434. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  435. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  436. border: 1px solid transparent;
  437. margin-top: -1px;
  438. color: #fff; }
  439. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  440. margin-left: -1px; }
  441. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
  442. margin-left: -1px; }
  443. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  444. color: #92D9FF;
  445. background-color: #000000;
  446. border-right-color: #DCDFE6;
  447. border-left-color: #DCDFE6; }
  448. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  449. color: #92D9FF; }
  450. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
  451. color: rgba(255, 255, 255, 0.5); }
  452. [data-theme="blue"] .el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
  453. margin-left: 0; }
  454. [data-theme="blue"] .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  455. [data-theme="blue"] .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), [data-theme="blue"] .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  456. [data-theme="blue"] .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
  457. padding-left: 0; }
  458. [data-theme="blue"] .el-tabs--top .el-tabs__item.is-top:last-child,
  459. [data-theme="blue"] .el-tabs--top .el-tabs__item.is-bottom:last-child, [data-theme="blue"] .el-tabs--bottom .el-tabs__item.is-top:last-child,
  460. [data-theme="blue"] .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
  461. padding-right: 0; }
  462. [data-theme="blue"] .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), [data-theme="blue"] .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
  463. [data-theme="blue"] .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), [data-theme="blue"] .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), [data-theme="blue"] .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), [data-theme="blue"] .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
  464. [data-theme="blue"] .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), [data-theme="blue"] .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
  465. padding-left: 20px; }
  466. [data-theme="blue"] .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, [data-theme="blue"] .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
  467. [data-theme="blue"] .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, [data-theme="blue"] .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, [data-theme="blue"] .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, [data-theme="blue"] .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
  468. [data-theme="blue"] .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, [data-theme="blue"] .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
  469. padding-right: 20px; }
  470. [data-theme="blue"] .el-tabs--bottom .el-tabs__header.is-bottom {
  471. margin-bottom: 0;
  472. margin-top: 10px; }
  473. [data-theme="blue"] .el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
  474. border-bottom: 0;
  475. border-top: 1px solid #DCDFE6; }
  476. [data-theme="blue"] .el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
  477. margin-top: -1px;
  478. margin-bottom: 0; }
  479. [data-theme="blue"] .el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) {
  480. border: 1px solid transparent; }
  481. [data-theme="blue"] .el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom {
  482. margin: 0 -1px -1px -1px; }
  483. [data-theme="blue"] .el-tabs--left, [data-theme="blue"] .el-tabs--right {
  484. overflow: hidden; }
  485. [data-theme="blue"] .el-tabs--left .el-tabs__header.is-left,
  486. [data-theme="blue"] .el-tabs--left .el-tabs__header.is-right,
  487. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left,
  488. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right,
  489. [data-theme="blue"] .el-tabs--left .el-tabs__nav-scroll, [data-theme="blue"] .el-tabs--right .el-tabs__header.is-left,
  490. [data-theme="blue"] .el-tabs--right .el-tabs__header.is-right,
  491. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left,
  492. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right,
  493. [data-theme="blue"] .el-tabs--right .el-tabs__nav-scroll {
  494. height: 100%; }
  495. [data-theme="blue"] .el-tabs--left .el-tabs__active-bar.is-left,
  496. [data-theme="blue"] .el-tabs--left .el-tabs__active-bar.is-right, [data-theme="blue"] .el-tabs--right .el-tabs__active-bar.is-left,
  497. [data-theme="blue"] .el-tabs--right .el-tabs__active-bar.is-right {
  498. top: 0;
  499. bottom: auto;
  500. width: 2px;
  501. height: auto; }
  502. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left,
  503. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left,
  504. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right {
  505. margin-bottom: 0; }
  506. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  507. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  508. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
  509. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  510. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  511. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
  512. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
  513. height: 30px;
  514. line-height: 30px;
  515. width: 100%;
  516. text-align: center;
  517. cursor: pointer; }
  518. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
  519. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
  520. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
  521. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
  522. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
  523. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
  524. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
  525. -webkit-transform: rotateZ(90deg);
  526. transform: rotateZ(90deg); }
  527. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  528. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  529. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
  530. left: auto;
  531. top: 0; }
  532. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  533. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  534. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
  535. right: auto;
  536. bottom: 0; }
  537. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
  538. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
  539. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
  540. padding: 30px 0; }
  541. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left::after,
  542. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-right::after, [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-left::after,
  543. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right::after {
  544. height: 100%;
  545. width: 2px;
  546. bottom: auto;
  547. top: 0; }
  548. [data-theme="blue"] .el-tabs--left .el-tabs__nav.is-left,
  549. [data-theme="blue"] .el-tabs--left .el-tabs__nav.is-right, [data-theme="blue"] .el-tabs--right .el-tabs__nav.is-left,
  550. [data-theme="blue"] .el-tabs--right .el-tabs__nav.is-right {
  551. float: none; }
  552. [data-theme="blue"] .el-tabs--left .el-tabs__item.is-left,
  553. [data-theme="blue"] .el-tabs--left .el-tabs__item.is-right, [data-theme="blue"] .el-tabs--right .el-tabs__item.is-left,
  554. [data-theme="blue"] .el-tabs--right .el-tabs__item.is-right {
  555. display: block; }
  556. [data-theme="blue"] .el-tabs--left .el-tabs__header.is-left {
  557. float: left;
  558. margin-bottom: 0;
  559. margin-right: 10px; }
  560. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left {
  561. margin-right: -1px; }
  562. [data-theme="blue"] .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  563. left: auto;
  564. right: 0; }
  565. [data-theme="blue"] .el-tabs--left .el-tabs__active-bar.is-left {
  566. right: 0;
  567. left: auto; }
  568. [data-theme="blue"] .el-tabs--left .el-tabs__item.is-left {
  569. text-align: right; }
  570. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left {
  571. display: none; }
  572. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
  573. border-left: none;
  574. border-right: 1px solid #E4E7ED;
  575. border-bottom: none;
  576. border-top: 1px solid #E4E7ED;
  577. text-align: left; }
  578. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
  579. border-right: 1px solid #E4E7ED;
  580. border-top: none; }
  581. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
  582. border: 1px solid #E4E7ED;
  583. border-right-color: #fff;
  584. border-left: none;
  585. border-bottom: none; }
  586. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
  587. border-top: none; }
  588. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
  589. border-bottom: none; }
  590. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__nav {
  591. border-radius: 4px 0 0 4px;
  592. border-bottom: 1px solid #E4E7ED;
  593. border-right: none; }
  594. [data-theme="blue"] .el-tabs--left.el-tabs--card .el-tabs__new-tab {
  595. float: none; }
  596. [data-theme="blue"] .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
  597. border-right: 1px solid #dfe4ed; }
  598. [data-theme="blue"] .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
  599. border: 1px solid transparent;
  600. margin: -1px 0 -1px -1px; }
  601. [data-theme="blue"] .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
  602. border-color: transparent;
  603. border-top-color: #d1dbe5;
  604. border-bottom-color: #d1dbe5; }
  605. [data-theme="blue"] .el-tabs--right .el-tabs__header.is-right {
  606. float: right;
  607. margin-bottom: 0;
  608. margin-left: 10px; }
  609. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right {
  610. margin-left: -1px; }
  611. [data-theme="blue"] .el-tabs--right .el-tabs__nav-wrap.is-right::after {
  612. left: 0;
  613. right: auto; }
  614. [data-theme="blue"] .el-tabs--right .el-tabs__active-bar.is-right {
  615. left: 0; }
  616. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
  617. display: none; }
  618. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__item.is-right {
  619. border-bottom: none;
  620. border-top: 1px solid #E4E7ED; }
  621. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child {
  622. border-left: 1px solid #E4E7ED;
  623. border-top: none; }
  624. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
  625. border: 1px solid #E4E7ED;
  626. border-left-color: #fff;
  627. border-right: none;
  628. border-bottom: none; }
  629. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
  630. border-top: none; }
  631. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child {
  632. border-bottom: none; }
  633. [data-theme="blue"] .el-tabs--right.el-tabs--card .el-tabs__nav {
  634. border-radius: 0 4px 4px 0;
  635. border-bottom: 1px solid #E4E7ED;
  636. border-left: none; }
  637. [data-theme="blue"] .el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
  638. border-left: 1px solid #dfe4ed; }
  639. [data-theme="blue"] .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right {
  640. border: 1px solid transparent;
  641. margin: -1px -1px -1px 0; }
  642. [data-theme="blue"] .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
  643. border-color: transparent;
  644. border-top-color: #d1dbe5;
  645. border-bottom-color: #d1dbe5; }
  646. [data-theme="blue"] .slideInRight-transition,
  647. [data-theme="blue"] .slideInLeft-transition {
  648. display: inline-block; }
  649. [data-theme="blue"] .slideInRight-enter {
  650. -webkit-animation: slideInRight-enter .3s;
  651. animation: slideInRight-enter .3s; }
  652. [data-theme="blue"] .slideInRight-leave {
  653. position: absolute;
  654. left: 0;
  655. right: 0;
  656. -webkit-animation: slideInRight-leave .3s;
  657. animation: slideInRight-leave .3s; }
  658. [data-theme="blue"] .slideInLeft-enter {
  659. -webkit-animation: slideInLeft-enter .3s;
  660. animation: slideInLeft-enter .3s; }
  661. [data-theme="blue"] .slideInLeft-leave {
  662. position: absolute;
  663. left: 0;
  664. right: 0;
  665. -webkit-animation: slideInLeft-leave .3s;
  666. animation: slideInLeft-leave .3s; }
  667. @-webkit-keyframes slideInRight-enter {
  668. 0% {
  669. opacity: 0;
  670. -webkit-transform-origin: 0 0;
  671. transform-origin: 0 0;
  672. -webkit-transform: translateX(100%);
  673. transform: translateX(100%); }
  674. to {
  675. opacity: 1;
  676. -webkit-transform-origin: 0 0;
  677. transform-origin: 0 0;
  678. -webkit-transform: translateX(0);
  679. transform: translateX(0); } }
  680. @keyframes slideInRight-enter {
  681. 0% {
  682. opacity: 0;
  683. -webkit-transform-origin: 0 0;
  684. transform-origin: 0 0;
  685. -webkit-transform: translateX(100%);
  686. transform: translateX(100%); }
  687. to {
  688. opacity: 1;
  689. -webkit-transform-origin: 0 0;
  690. transform-origin: 0 0;
  691. -webkit-transform: translateX(0);
  692. transform: translateX(0); } }
  693. @-webkit-keyframes slideInRight-leave {
  694. 0% {
  695. -webkit-transform-origin: 0 0;
  696. transform-origin: 0 0;
  697. -webkit-transform: translateX(0);
  698. transform: translateX(0);
  699. opacity: 1; }
  700. 100% {
  701. -webkit-transform-origin: 0 0;
  702. transform-origin: 0 0;
  703. -webkit-transform: translateX(100%);
  704. transform: translateX(100%);
  705. opacity: 0; } }
  706. @keyframes slideInRight-leave {
  707. 0% {
  708. -webkit-transform-origin: 0 0;
  709. transform-origin: 0 0;
  710. -webkit-transform: translateX(0);
  711. transform: translateX(0);
  712. opacity: 1; }
  713. 100% {
  714. -webkit-transform-origin: 0 0;
  715. transform-origin: 0 0;
  716. -webkit-transform: translateX(100%);
  717. transform: translateX(100%);
  718. opacity: 0; } }
  719. @-webkit-keyframes slideInLeft-enter {
  720. 0% {
  721. opacity: 0;
  722. -webkit-transform-origin: 0 0;
  723. transform-origin: 0 0;
  724. -webkit-transform: translateX(-100%);
  725. transform: translateX(-100%); }
  726. to {
  727. opacity: 1;
  728. -webkit-transform-origin: 0 0;
  729. transform-origin: 0 0;
  730. -webkit-transform: translateX(0);
  731. transform: translateX(0); } }
  732. @keyframes slideInLeft-enter {
  733. 0% {
  734. opacity: 0;
  735. -webkit-transform-origin: 0 0;
  736. transform-origin: 0 0;
  737. -webkit-transform: translateX(-100%);
  738. transform: translateX(-100%); }
  739. to {
  740. opacity: 1;
  741. -webkit-transform-origin: 0 0;
  742. transform-origin: 0 0;
  743. -webkit-transform: translateX(0);
  744. transform: translateX(0); } }
  745. @-webkit-keyframes slideInLeft-leave {
  746. 0% {
  747. -webkit-transform-origin: 0 0;
  748. transform-origin: 0 0;
  749. -webkit-transform: translateX(0);
  750. transform: translateX(0);
  751. opacity: 1; }
  752. 100% {
  753. -webkit-transform-origin: 0 0;
  754. transform-origin: 0 0;
  755. -webkit-transform: translateX(-100%);
  756. transform: translateX(-100%);
  757. opacity: 0; } }
  758. @keyframes slideInLeft-leave {
  759. 0% {
  760. -webkit-transform-origin: 0 0;
  761. transform-origin: 0 0;
  762. -webkit-transform: translateX(0);
  763. transform: translateX(0);
  764. opacity: 1; }
  765. 100% {
  766. -webkit-transform-origin: 0 0;
  767. transform-origin: 0 0;
  768. -webkit-transform: translateX(-100%);
  769. transform: translateX(-100%);
  770. opacity: 0; } }
  771. /* BEM support Func
  772. -------------------------- */
  773. /* Element Chalk Variables */
  774. /* Transition
  775. -------------------------- */
  776. /* Color
  777. -------------------------- */
  778. /* 53a8ff */
  779. /* 66b1ff */
  780. /* 79bbff */
  781. /* 8cc5ff */
  782. /* a0cfff */
  783. /* b3d8ff */
  784. /* c6e2ff */
  785. /* d9ecff */
  786. /* ecf5ff */
  787. /* Link
  788. -------------------------- */
  789. /* Border
  790. -------------------------- */
  791. /* Fill
  792. -------------------------- */
  793. /* Typography
  794. -------------------------- */
  795. /* Size
  796. -------------------------- */
  797. /* z-index
  798. -------------------------- */
  799. /* Disable base
  800. -------------------------- */
  801. /* Icon
  802. -------------------------- */
  803. /* Checkbox
  804. -------------------------- */
  805. /* Radio
  806. -------------------------- */
  807. /* Select
  808. -------------------------- */
  809. /* Alert
  810. -------------------------- */
  811. /* MessageBox
  812. -------------------------- */
  813. /* Message
  814. -------------------------- */
  815. /* Notification
  816. -------------------------- */
  817. /* Input
  818. -------------------------- */
  819. /* Cascader
  820. -------------------------- */
  821. /* Group
  822. -------------------------- */
  823. /* Tab
  824. -------------------------- */
  825. /* Button
  826. -------------------------- */
  827. /* cascader
  828. -------------------------- */
  829. /* Switch
  830. -------------------------- */
  831. /* Dialog
  832. -------------------------- */
  833. /* Table
  834. -------------------------- */
  835. /* Pagination
  836. -------------------------- */
  837. /* Popup
  838. -------------------------- */
  839. /* Popover
  840. -------------------------- */
  841. /* Tooltip
  842. -------------------------- */
  843. /* Tag
  844. -------------------------- */
  845. /* Tree
  846. -------------------------- */
  847. /* Dropdown
  848. -------------------------- */
  849. /* Badge
  850. -------------------------- */
  851. /* Card
  852. --------------------------*/
  853. /* Slider
  854. --------------------------*/
  855. /* Steps
  856. --------------------------*/
  857. /* Menu
  858. --------------------------*/
  859. /* Rate
  860. --------------------------*/
  861. /* DatePicker
  862. --------------------------*/
  863. /* Loading
  864. --------------------------*/
  865. /* Scrollbar
  866. --------------------------*/
  867. /* Carousel
  868. --------------------------*/
  869. /* Collapse
  870. --------------------------*/
  871. /* Transfer
  872. --------------------------*/
  873. /* Header
  874. --------------------------*/
  875. /* Footer
  876. --------------------------*/
  877. /* Main
  878. --------------------------*/
  879. /* Timeline
  880. --------------------------*/
  881. /* Backtop
  882. --------------------------*/
  883. /* Link
  884. --------------------------*/
  885. /* Calendar
  886. --------------------------*/
  887. /* Form
  888. -------------------------- */
  889. /* Avatar
  890. --------------------------*/
  891. /* Break-point
  892. --------------------------*/
  893. /* Break-points
  894. -------------------------- */
  895. /* Scrollbar
  896. -------------------------- */
  897. /* Placeholder
  898. -------------------------- */
  899. /* BEM
  900. -------------------------- */
  901. /* Element Chalk Variables */
  902. /* Transition
  903. -------------------------- */
  904. /* Color
  905. -------------------------- */
  906. /* 53a8ff */
  907. /* 66b1ff */
  908. /* 79bbff */
  909. /* 8cc5ff */
  910. /* a0cfff */
  911. /* b3d8ff */
  912. /* c6e2ff */
  913. /* d9ecff */
  914. /* ecf5ff */
  915. /* Link
  916. -------------------------- */
  917. /* Border
  918. -------------------------- */
  919. /* Fill
  920. -------------------------- */
  921. /* Typography
  922. -------------------------- */
  923. /* Size
  924. -------------------------- */
  925. /* z-index
  926. -------------------------- */
  927. /* Disable base
  928. -------------------------- */
  929. /* Icon
  930. -------------------------- */
  931. /* Checkbox
  932. -------------------------- */
  933. /* Radio
  934. -------------------------- */
  935. /* Select
  936. -------------------------- */
  937. /* Alert
  938. -------------------------- */
  939. /* MessageBox
  940. -------------------------- */
  941. /* Message
  942. -------------------------- */
  943. /* Notification
  944. -------------------------- */
  945. /* Input
  946. -------------------------- */
  947. /* Cascader
  948. -------------------------- */
  949. /* Group
  950. -------------------------- */
  951. /* Tab
  952. -------------------------- */
  953. /* Button
  954. -------------------------- */
  955. /* cascader
  956. -------------------------- */
  957. /* Switch
  958. -------------------------- */
  959. /* Dialog
  960. -------------------------- */
  961. /* Table
  962. -------------------------- */
  963. /* Pagination
  964. -------------------------- */
  965. /* Popup
  966. -------------------------- */
  967. /* Popover
  968. -------------------------- */
  969. /* Tooltip
  970. -------------------------- */
  971. /* Tag
  972. -------------------------- */
  973. /* Tree
  974. -------------------------- */
  975. /* Dropdown
  976. -------------------------- */
  977. /* Badge
  978. -------------------------- */
  979. /* Card
  980. --------------------------*/
  981. /* Slider
  982. --------------------------*/
  983. /* Steps
  984. --------------------------*/
  985. /* Menu
  986. --------------------------*/
  987. /* Rate
  988. --------------------------*/
  989. /* DatePicker
  990. --------------------------*/
  991. /* Loading
  992. --------------------------*/
  993. /* Scrollbar
  994. --------------------------*/
  995. /* Carousel
  996. --------------------------*/
  997. /* Collapse
  998. --------------------------*/
  999. /* Transfer
  1000. --------------------------*/
  1001. /* Header
  1002. --------------------------*/
  1003. /* Footer
  1004. --------------------------*/
  1005. /* Main
  1006. --------------------------*/
  1007. /* Timeline
  1008. --------------------------*/
  1009. /* Backtop
  1010. --------------------------*/
  1011. /* Link
  1012. --------------------------*/
  1013. /* Calendar
  1014. --------------------------*/
  1015. /* Form
  1016. -------------------------- */
  1017. /* Avatar
  1018. --------------------------*/
  1019. /* Break-point
  1020. --------------------------*/
  1021. .el-tabs__header {
  1022. padding: 0;
  1023. position: relative;
  1024. margin: 0 0 15px; }
  1025. .el-tabs__active-bar {
  1026. position: absolute;
  1027. bottom: 0;
  1028. left: 0;
  1029. height: 2px;
  1030. background-color: #92D9FF;
  1031. z-index: 1;
  1032. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1033. transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1034. transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1035. transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1036. list-style: none; }
  1037. .el-tabs__new-tab {
  1038. float: right;
  1039. border: 1px solid #d3dce6;
  1040. height: 18px;
  1041. width: 18px;
  1042. line-height: 18px;
  1043. margin: 12px 0 9px 10px;
  1044. border-radius: 3px;
  1045. text-align: center;
  1046. font-size: 12px;
  1047. color: #d3dce6;
  1048. cursor: pointer;
  1049. -webkit-transition: all .15s;
  1050. transition: all .15s; }
  1051. .el-tabs__new-tab .el-icon-plus {
  1052. -webkit-transform: scale(0.8, 0.8);
  1053. transform: scale(0.8, 0.8); }
  1054. .el-tabs__new-tab:hover {
  1055. color: #92D9FF; }
  1056. .el-tabs__nav-wrap {
  1057. overflow: hidden;
  1058. margin-bottom: -1px;
  1059. position: relative; }
  1060. .el-tabs__nav-wrap::after {
  1061. content: "";
  1062. position: absolute;
  1063. left: 0;
  1064. bottom: 0;
  1065. width: 100%;
  1066. height: 2px;
  1067. background-color: #E4E7ED;
  1068. z-index: 1; }
  1069. .el-tabs__nav-wrap.is-scrollable {
  1070. padding: 0 20px;
  1071. -webkit-box-sizing: border-box;
  1072. box-sizing: border-box; }
  1073. .el-tabs__nav-scroll {
  1074. overflow: hidden; }
  1075. .el-tabs__nav-next, .el-tabs__nav-prev {
  1076. position: absolute;
  1077. cursor: pointer;
  1078. line-height: 44px;
  1079. font-size: 12px;
  1080. color: #909399; }
  1081. .el-tabs__nav-next {
  1082. right: 0; }
  1083. .el-tabs__nav-prev {
  1084. left: 0; }
  1085. .el-tabs__nav {
  1086. white-space: nowrap;
  1087. position: relative;
  1088. -webkit-transition: -webkit-transform .3s;
  1089. transition: -webkit-transform .3s;
  1090. transition: transform .3s;
  1091. transition: transform .3s, -webkit-transform .3s;
  1092. float: left;
  1093. z-index: 2; }
  1094. .el-tabs__nav.is-stretch {
  1095. min-width: 100%;
  1096. display: -webkit-box;
  1097. display: -ms-flexbox;
  1098. display: flex; }
  1099. .el-tabs__nav.is-stretch > * {
  1100. -webkit-box-flex: 1;
  1101. -ms-flex: 1;
  1102. flex: 1;
  1103. text-align: center; }
  1104. .el-tabs__item {
  1105. padding: 0 20px;
  1106. height: 40px;
  1107. -webkit-box-sizing: border-box;
  1108. box-sizing: border-box;
  1109. line-height: 40px;
  1110. display: inline-block;
  1111. list-style: none;
  1112. font-size: 14px;
  1113. font-weight: 500;
  1114. color: #fff;
  1115. position: relative; }
  1116. .el-tabs__item:focus, .el-tabs__item:focus:active {
  1117. outline: none; }
  1118. .el-tabs__item:focus.is-active.is-focus:not(:active) {
  1119. -webkit-box-shadow: 0 0 2px 2px #92D9FF inset;
  1120. box-shadow: 0 0 2px 2px #92D9FF inset;
  1121. border-radius: 3px; }
  1122. .el-tabs__item .el-icon-close {
  1123. border-radius: 50%;
  1124. text-align: center;
  1125. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1126. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1127. margin-left: 5px; }
  1128. .el-tabs__item .el-icon-close:before {
  1129. -webkit-transform: scale(0.9);
  1130. transform: scale(0.9);
  1131. display: inline-block; }
  1132. .el-tabs__item .el-icon-close:hover {
  1133. background-color: rgba(255, 255, 255, 0.5);
  1134. color: #000000; }
  1135. .el-tabs__item.is-active {
  1136. color: #92D9FF; }
  1137. .el-tabs__item:hover {
  1138. color: #92D9FF;
  1139. cursor: pointer; }
  1140. .el-tabs__item.is-disabled {
  1141. color: rgba(255, 255, 255, 0.5);
  1142. cursor: default; }
  1143. .el-tabs__content {
  1144. overflow: hidden;
  1145. position: relative; }
  1146. .el-tabs--card > .el-tabs__header {
  1147. border-bottom: 1px solid #E4E7ED; }
  1148. .el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
  1149. content: none; }
  1150. .el-tabs--card > .el-tabs__header .el-tabs__nav {
  1151. border: 1px solid #E4E7ED;
  1152. border-bottom: none;
  1153. border-radius: 4px 4px 0 0;
  1154. -webkit-box-sizing: border-box;
  1155. box-sizing: border-box; }
  1156. .el-tabs--card > .el-tabs__header .el-tabs__active-bar {
  1157. display: none; }
  1158. .el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
  1159. position: relative;
  1160. font-size: 12px;
  1161. width: 0;
  1162. height: 14px;
  1163. vertical-align: middle;
  1164. line-height: 15px;
  1165. overflow: hidden;
  1166. top: -1px;
  1167. right: -2px;
  1168. -webkit-transform-origin: 100% 50%;
  1169. transform-origin: 100% 50%; }
  1170. .el-tabs--card > .el-tabs__header .el-tabs__item {
  1171. border-bottom: 1px solid transparent;
  1172. border-left: 1px solid #E4E7ED;
  1173. -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1174. transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
  1175. .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  1176. border-left: none; }
  1177. .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
  1178. padding-left: 13px;
  1179. padding-right: 13px; }
  1180. .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
  1181. width: 14px; }
  1182. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  1183. border-bottom-color: #000000; }
  1184. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  1185. padding-left: 20px;
  1186. padding-right: 20px; }
  1187. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
  1188. width: 14px; }
  1189. .el-tabs--border-card {
  1190. background: #000000;
  1191. border: 1px solid #DCDFE6;
  1192. -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  1193. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); }
  1194. .el-tabs--border-card > .el-tabs__content {
  1195. padding: 15px; }
  1196. .el-tabs--border-card > .el-tabs__header {
  1197. background-color: rgba(255, 255, 255, 0.15);
  1198. border-bottom: 1px solid #E4E7ED;
  1199. margin: 0; }
  1200. .el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
  1201. content: none; }
  1202. .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  1203. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1204. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1205. border: 1px solid transparent;
  1206. margin-top: -1px;
  1207. color: #fff; }
  1208. .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  1209. margin-left: -1px; }
  1210. .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
  1211. margin-left: -1px; }
  1212. .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  1213. color: #92D9FF;
  1214. background-color: #000000;
  1215. border-right-color: #DCDFE6;
  1216. border-left-color: #DCDFE6; }
  1217. .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  1218. color: #92D9FF; }
  1219. .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
  1220. color: rgba(255, 255, 255, 0.5); }
  1221. .el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
  1222. margin-left: 0; }
  1223. .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  1224. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  1225. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
  1226. padding-left: 0; }
  1227. .el-tabs--top .el-tabs__item.is-top:last-child,
  1228. .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child,
  1229. .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
  1230. padding-right: 0; }
  1231. .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
  1232. .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
  1233. .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
  1234. padding-left: 20px; }
  1235. .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
  1236. .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
  1237. .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
  1238. padding-right: 20px; }
  1239. .el-tabs--bottom .el-tabs__header.is-bottom {
  1240. margin-bottom: 0;
  1241. margin-top: 10px; }
  1242. .el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
  1243. border-bottom: 0;
  1244. border-top: 1px solid #DCDFE6; }
  1245. .el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
  1246. margin-top: -1px;
  1247. margin-bottom: 0; }
  1248. .el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) {
  1249. border: 1px solid transparent; }
  1250. .el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom {
  1251. margin: 0 -1px -1px -1px; }
  1252. .el-tabs--left, .el-tabs--right {
  1253. overflow: hidden; }
  1254. .el-tabs--left .el-tabs__header.is-left,
  1255. .el-tabs--left .el-tabs__header.is-right,
  1256. .el-tabs--left .el-tabs__nav-wrap.is-left,
  1257. .el-tabs--left .el-tabs__nav-wrap.is-right,
  1258. .el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left,
  1259. .el-tabs--right .el-tabs__header.is-right,
  1260. .el-tabs--right .el-tabs__nav-wrap.is-left,
  1261. .el-tabs--right .el-tabs__nav-wrap.is-right,
  1262. .el-tabs--right .el-tabs__nav-scroll {
  1263. height: 100%; }
  1264. .el-tabs--left .el-tabs__active-bar.is-left,
  1265. .el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left,
  1266. .el-tabs--right .el-tabs__active-bar.is-right {
  1267. top: 0;
  1268. bottom: auto;
  1269. width: 2px;
  1270. height: auto; }
  1271. .el-tabs--left .el-tabs__nav-wrap.is-left,
  1272. .el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
  1273. .el-tabs--right .el-tabs__nav-wrap.is-right {
  1274. margin-bottom: 0; }
  1275. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  1276. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  1277. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
  1278. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  1279. .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  1280. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
  1281. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
  1282. height: 30px;
  1283. line-height: 30px;
  1284. width: 100%;
  1285. text-align: center;
  1286. cursor: pointer; }
  1287. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
  1288. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
  1289. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
  1290. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
  1291. .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
  1292. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
  1293. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
  1294. -webkit-transform: rotateZ(90deg);
  1295. transform: rotateZ(90deg); }
  1296. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  1297. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  1298. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
  1299. left: auto;
  1300. top: 0; }
  1301. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  1302. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  1303. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
  1304. right: auto;
  1305. bottom: 0; }
  1306. .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
  1307. .el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
  1308. .el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
  1309. padding: 30px 0; }
  1310. .el-tabs--left .el-tabs__nav-wrap.is-left::after,
  1311. .el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
  1312. .el-tabs--right .el-tabs__nav-wrap.is-right::after {
  1313. height: 100%;
  1314. width: 2px;
  1315. bottom: auto;
  1316. top: 0; }
  1317. .el-tabs--left .el-tabs__nav.is-left,
  1318. .el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
  1319. .el-tabs--right .el-tabs__nav.is-right {
  1320. float: none; }
  1321. .el-tabs--left .el-tabs__item.is-left,
  1322. .el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
  1323. .el-tabs--right .el-tabs__item.is-right {
  1324. display: block; }
  1325. .el-tabs--left .el-tabs__header.is-left {
  1326. float: left;
  1327. margin-bottom: 0;
  1328. margin-right: 10px; }
  1329. .el-tabs--left .el-tabs__nav-wrap.is-left {
  1330. margin-right: -1px; }
  1331. .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  1332. left: auto;
  1333. right: 0; }
  1334. .el-tabs--left .el-tabs__active-bar.is-left {
  1335. right: 0;
  1336. left: auto; }
  1337. .el-tabs--left .el-tabs__item.is-left {
  1338. text-align: right; }
  1339. .el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left {
  1340. display: none; }
  1341. .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
  1342. border-left: none;
  1343. border-right: 1px solid #E4E7ED;
  1344. border-bottom: none;
  1345. border-top: 1px solid #E4E7ED;
  1346. text-align: left; }
  1347. .el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
  1348. border-right: 1px solid #E4E7ED;
  1349. border-top: none; }
  1350. .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
  1351. border: 1px solid #E4E7ED;
  1352. border-right-color: #fff;
  1353. border-left: none;
  1354. border-bottom: none; }
  1355. .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
  1356. border-top: none; }
  1357. .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
  1358. border-bottom: none; }
  1359. .el-tabs--left.el-tabs--card .el-tabs__nav {
  1360. border-radius: 4px 0 0 4px;
  1361. border-bottom: 1px solid #E4E7ED;
  1362. border-right: none; }
  1363. .el-tabs--left.el-tabs--card .el-tabs__new-tab {
  1364. float: none; }
  1365. .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
  1366. border-right: 1px solid #dfe4ed; }
  1367. .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
  1368. border: 1px solid transparent;
  1369. margin: -1px 0 -1px -1px; }
  1370. .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
  1371. border-color: transparent;
  1372. border-top-color: #d1dbe5;
  1373. border-bottom-color: #d1dbe5; }
  1374. .el-tabs--right .el-tabs__header.is-right {
  1375. float: right;
  1376. margin-bottom: 0;
  1377. margin-left: 10px; }
  1378. .el-tabs--right .el-tabs__nav-wrap.is-right {
  1379. margin-left: -1px; }
  1380. .el-tabs--right .el-tabs__nav-wrap.is-right::after {
  1381. left: 0;
  1382. right: auto; }
  1383. .el-tabs--right .el-tabs__active-bar.is-right {
  1384. left: 0; }
  1385. .el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
  1386. display: none; }
  1387. .el-tabs--right.el-tabs--card .el-tabs__item.is-right {
  1388. border-bottom: none;
  1389. border-top: 1px solid #E4E7ED; }
  1390. .el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child {
  1391. border-left: 1px solid #E4E7ED;
  1392. border-top: none; }
  1393. .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
  1394. border: 1px solid #E4E7ED;
  1395. border-left-color: #fff;
  1396. border-right: none;
  1397. border-bottom: none; }
  1398. .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
  1399. border-top: none; }
  1400. .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child {
  1401. border-bottom: none; }
  1402. .el-tabs--right.el-tabs--card .el-tabs__nav {
  1403. border-radius: 0 4px 4px 0;
  1404. border-bottom: 1px solid #E4E7ED;
  1405. border-left: none; }
  1406. .el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
  1407. border-left: 1px solid #dfe4ed; }
  1408. .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right {
  1409. border: 1px solid transparent;
  1410. margin: -1px -1px -1px 0; }
  1411. .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
  1412. border-color: transparent;
  1413. border-top-color: #d1dbe5;
  1414. border-bottom-color: #d1dbe5; }
  1415. .slideInRight-transition,
  1416. .slideInLeft-transition {
  1417. display: inline-block; }
  1418. .slideInRight-enter {
  1419. -webkit-animation: slideInRight-enter .3s;
  1420. animation: slideInRight-enter .3s; }
  1421. .slideInRight-leave {
  1422. position: absolute;
  1423. left: 0;
  1424. right: 0;
  1425. -webkit-animation: slideInRight-leave .3s;
  1426. animation: slideInRight-leave .3s; }
  1427. .slideInLeft-enter {
  1428. -webkit-animation: slideInLeft-enter .3s;
  1429. animation: slideInLeft-enter .3s; }
  1430. .slideInLeft-leave {
  1431. position: absolute;
  1432. left: 0;
  1433. right: 0;
  1434. -webkit-animation: slideInLeft-leave .3s;
  1435. animation: slideInLeft-leave .3s; }
  1436. @keyframes slideInRight-enter {
  1437. 0% {
  1438. opacity: 0;
  1439. -webkit-transform-origin: 0 0;
  1440. transform-origin: 0 0;
  1441. -webkit-transform: translateX(100%);
  1442. transform: translateX(100%); }
  1443. to {
  1444. opacity: 1;
  1445. -webkit-transform-origin: 0 0;
  1446. transform-origin: 0 0;
  1447. -webkit-transform: translateX(0);
  1448. transform: translateX(0); } }
  1449. @keyframes slideInRight-leave {
  1450. 0% {
  1451. -webkit-transform-origin: 0 0;
  1452. transform-origin: 0 0;
  1453. -webkit-transform: translateX(0);
  1454. transform: translateX(0);
  1455. opacity: 1; }
  1456. 100% {
  1457. -webkit-transform-origin: 0 0;
  1458. transform-origin: 0 0;
  1459. -webkit-transform: translateX(100%);
  1460. transform: translateX(100%);
  1461. opacity: 0; } }
  1462. @keyframes slideInLeft-enter {
  1463. 0% {
  1464. opacity: 0;
  1465. -webkit-transform-origin: 0 0;
  1466. transform-origin: 0 0;
  1467. -webkit-transform: translateX(-100%);
  1468. transform: translateX(-100%); }
  1469. to {
  1470. opacity: 1;
  1471. -webkit-transform-origin: 0 0;
  1472. transform-origin: 0 0;
  1473. -webkit-transform: translateX(0);
  1474. transform: translateX(0); } }
  1475. @keyframes slideInLeft-leave {
  1476. 0% {
  1477. -webkit-transform-origin: 0 0;
  1478. transform-origin: 0 0;
  1479. -webkit-transform: translateX(0);
  1480. transform: translateX(0);
  1481. opacity: 1; }
  1482. 100% {
  1483. -webkit-transform-origin: 0 0;
  1484. transform-origin: 0 0;
  1485. -webkit-transform: translateX(-100%);
  1486. transform: translateX(-100%);
  1487. opacity: 0; } }