tabs.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851
  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-tabs__header {
  272. padding: 0;
  273. position: relative;
  274. margin: 0 0 15px; }
  275. .el-tabs__active-bar {
  276. position: absolute;
  277. bottom: 0;
  278. left: 0;
  279. height: 2px;
  280. background-color: #5075FC;
  281. z-index: 1;
  282. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  283. transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  284. transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  285. 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);
  286. list-style: none; }
  287. .el-tabs__new-tab {
  288. float: right;
  289. border: 1px solid #d3dce6;
  290. height: 18px;
  291. width: 18px;
  292. line-height: 18px;
  293. margin: 12px 0 9px 10px;
  294. border-radius: 3px;
  295. text-align: center;
  296. font-size: 12px;
  297. color: #d3dce6;
  298. cursor: pointer;
  299. -webkit-transition: all .15s;
  300. transition: all .15s; }
  301. .el-tabs__new-tab .el-icon-plus {
  302. -webkit-transform: scale(0.8, 0.8);
  303. transform: scale(0.8, 0.8); }
  304. .el-tabs__new-tab:hover {
  305. color: #5075FC; }
  306. .el-tabs__nav-wrap {
  307. overflow: hidden;
  308. margin-bottom: -1px;
  309. position: relative; }
  310. .el-tabs__nav-wrap::after {
  311. content: "";
  312. position: absolute;
  313. left: 0;
  314. bottom: 0;
  315. width: 100%;
  316. height: 2px;
  317. background-color: #E4E7ED;
  318. z-index: 1; }
  319. .el-tabs__nav-wrap.is-scrollable {
  320. padding: 0 20px;
  321. -webkit-box-sizing: border-box;
  322. box-sizing: border-box; }
  323. .el-tabs__nav-scroll {
  324. overflow: hidden; }
  325. .el-tabs__nav-next, .el-tabs__nav-prev {
  326. position: absolute;
  327. cursor: pointer;
  328. line-height: 44px;
  329. font-size: 12px;
  330. color: #909399; }
  331. .el-tabs__nav-next {
  332. right: 0; }
  333. .el-tabs__nav-prev {
  334. left: 0; }
  335. .el-tabs__nav {
  336. white-space: nowrap;
  337. position: relative;
  338. -webkit-transition: -webkit-transform .3s;
  339. transition: -webkit-transform .3s;
  340. transition: transform .3s;
  341. transition: transform .3s, -webkit-transform .3s;
  342. float: left;
  343. z-index: 2; }
  344. .el-tabs__nav.is-stretch {
  345. min-width: 100%;
  346. display: -webkit-box;
  347. display: -ms-flexbox;
  348. display: flex; }
  349. .el-tabs__nav.is-stretch > * {
  350. -webkit-box-flex: 1;
  351. -ms-flex: 1;
  352. flex: 1;
  353. text-align: center; }
  354. .el-tabs__item {
  355. padding: 0 20px;
  356. height: 40px;
  357. -webkit-box-sizing: border-box;
  358. box-sizing: border-box;
  359. line-height: 40px;
  360. display: inline-block;
  361. list-style: none;
  362. font-size: 14px;
  363. font-weight: 500;
  364. color: #303133;
  365. position: relative; }
  366. .el-tabs__item:focus, .el-tabs__item:focus:active {
  367. outline: none; }
  368. .el-tabs__item:focus.is-active.is-focus:not(:active) {
  369. -webkit-box-shadow: 0 0 2px 2px #5075FC inset;
  370. box-shadow: 0 0 2px 2px #5075FC inset;
  371. border-radius: 3px; }
  372. .el-tabs__item .el-icon-close {
  373. border-radius: 50%;
  374. text-align: center;
  375. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  376. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  377. margin-left: 5px; }
  378. .el-tabs__item .el-icon-close:before {
  379. -webkit-transform: scale(0.9);
  380. transform: scale(0.9);
  381. display: inline-block; }
  382. .el-tabs__item .el-icon-close:hover {
  383. background-color: #C0C4CC;
  384. color: #FFFFFF; }
  385. .el-tabs__item.is-active {
  386. color: #5075FC; }
  387. .el-tabs__item:hover {
  388. color: #5075FC;
  389. cursor: pointer; }
  390. .el-tabs__item.is-disabled {
  391. color: #C0C4CC;
  392. cursor: default; }
  393. .el-tabs__content {
  394. overflow: hidden;
  395. position: relative; }
  396. .el-tabs--card > .el-tabs__header {
  397. border-bottom: 1px solid #E4E7ED; }
  398. .el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
  399. content: none; }
  400. .el-tabs--card > .el-tabs__header .el-tabs__nav {
  401. border: 1px solid #E4E7ED;
  402. border-bottom: none;
  403. border-radius: 4px 4px 0 0;
  404. -webkit-box-sizing: border-box;
  405. box-sizing: border-box; }
  406. .el-tabs--card > .el-tabs__header .el-tabs__active-bar {
  407. display: none; }
  408. .el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
  409. position: relative;
  410. font-size: 12px;
  411. width: 0;
  412. height: 14px;
  413. vertical-align: middle;
  414. line-height: 15px;
  415. overflow: hidden;
  416. top: -1px;
  417. right: -2px;
  418. -webkit-transform-origin: 100% 50%;
  419. transform-origin: 100% 50%; }
  420. .el-tabs--card > .el-tabs__header .el-tabs__item {
  421. border-bottom: 1px solid transparent;
  422. border-left: 1px solid #E4E7ED;
  423. -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);
  424. 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); }
  425. .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  426. border-left: none; }
  427. .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
  428. padding-left: 13px;
  429. padding-right: 13px; }
  430. .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
  431. width: 14px; }
  432. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  433. border-bottom-color: #FFFFFF; }
  434. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  435. padding-left: 20px;
  436. padding-right: 20px; }
  437. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
  438. width: 14px; }
  439. .el-tabs--border-card {
  440. background: #FFFFFF;
  441. border: 1px solid #DCDFE6;
  442. -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  443. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); }
  444. .el-tabs--border-card > .el-tabs__content {
  445. padding: 15px; }
  446. .el-tabs--border-card > .el-tabs__header {
  447. background-color: #F5F7FA;
  448. border-bottom: 1px solid #E4E7ED;
  449. margin: 0; }
  450. .el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
  451. content: none; }
  452. .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  453. -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  454. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  455. border: 1px solid transparent;
  456. margin-top: -1px;
  457. color: #909399; }
  458. .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  459. margin-left: -1px; }
  460. .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
  461. margin-left: -1px; }
  462. .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  463. color: #5075FC;
  464. background-color: #FFFFFF;
  465. border-right-color: #DCDFE6;
  466. border-left-color: #DCDFE6; }
  467. .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  468. color: #5075FC; }
  469. .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
  470. color: #C0C4CC; }
  471. .el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
  472. margin-left: 0; }
  473. .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  474. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  475. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
  476. padding-left: 0; }
  477. .el-tabs--top .el-tabs__item.is-top:last-child,
  478. .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child,
  479. .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
  480. padding-right: 0; }
  481. .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),
  482. .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),
  483. .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) {
  484. padding-left: 20px; }
  485. .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,
  486. .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,
  487. .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 {
  488. padding-right: 20px; }
  489. .el-tabs--bottom .el-tabs__header.is-bottom {
  490. margin-bottom: 0;
  491. margin-top: 10px; }
  492. .el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
  493. border-bottom: 0;
  494. border-top: 1px solid #DCDFE6; }
  495. .el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
  496. margin-top: -1px;
  497. margin-bottom: 0; }
  498. .el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) {
  499. border: 1px solid transparent; }
  500. .el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom {
  501. margin: 0 -1px -1px -1px; }
  502. .el-tabs--left, .el-tabs--right {
  503. overflow: hidden; }
  504. .el-tabs--left .el-tabs__header.is-left,
  505. .el-tabs--left .el-tabs__header.is-right,
  506. .el-tabs--left .el-tabs__nav-wrap.is-left,
  507. .el-tabs--left .el-tabs__nav-wrap.is-right,
  508. .el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left,
  509. .el-tabs--right .el-tabs__header.is-right,
  510. .el-tabs--right .el-tabs__nav-wrap.is-left,
  511. .el-tabs--right .el-tabs__nav-wrap.is-right,
  512. .el-tabs--right .el-tabs__nav-scroll {
  513. height: 100%; }
  514. .el-tabs--left .el-tabs__active-bar.is-left,
  515. .el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left,
  516. .el-tabs--right .el-tabs__active-bar.is-right {
  517. top: 0;
  518. bottom: auto;
  519. width: 2px;
  520. height: auto; }
  521. .el-tabs--left .el-tabs__nav-wrap.is-left,
  522. .el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
  523. .el-tabs--right .el-tabs__nav-wrap.is-right {
  524. margin-bottom: 0; }
  525. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  526. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  527. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
  528. .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,
  529. .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  530. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
  531. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
  532. height: 30px;
  533. line-height: 30px;
  534. width: 100%;
  535. text-align: center;
  536. cursor: pointer; }
  537. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
  538. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
  539. .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
  540. .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,
  541. .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
  542. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
  543. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
  544. -webkit-transform: rotateZ(90deg);
  545. transform: rotateZ(90deg); }
  546. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
  547. .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,
  548. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
  549. left: auto;
  550. top: 0; }
  551. .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
  552. .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,
  553. .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
  554. right: auto;
  555. bottom: 0; }
  556. .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
  557. .el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
  558. .el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
  559. padding: 30px 0; }
  560. .el-tabs--left .el-tabs__nav-wrap.is-left::after,
  561. .el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
  562. .el-tabs--right .el-tabs__nav-wrap.is-right::after {
  563. height: 100%;
  564. width: 2px;
  565. bottom: auto;
  566. top: 0; }
  567. .el-tabs--left .el-tabs__nav.is-left,
  568. .el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
  569. .el-tabs--right .el-tabs__nav.is-right {
  570. float: none; }
  571. .el-tabs--left .el-tabs__item.is-left,
  572. .el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
  573. .el-tabs--right .el-tabs__item.is-right {
  574. display: block; }
  575. .el-tabs--left .el-tabs__header.is-left {
  576. float: left;
  577. margin-bottom: 0;
  578. margin-right: 10px; }
  579. .el-tabs--left .el-tabs__nav-wrap.is-left {
  580. margin-right: -1px; }
  581. .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  582. left: auto;
  583. right: 0; }
  584. .el-tabs--left .el-tabs__active-bar.is-left {
  585. right: 0;
  586. left: auto; }
  587. .el-tabs--left .el-tabs__item.is-left {
  588. text-align: right; }
  589. .el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left {
  590. display: none; }
  591. .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
  592. border-left: none;
  593. border-right: 1px solid #E4E7ED;
  594. border-bottom: none;
  595. border-top: 1px solid #E4E7ED;
  596. text-align: left; }
  597. .el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
  598. border-right: 1px solid #E4E7ED;
  599. border-top: none; }
  600. .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
  601. border: 1px solid #E4E7ED;
  602. border-right-color: #fff;
  603. border-left: none;
  604. border-bottom: none; }
  605. .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
  606. border-top: none; }
  607. .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
  608. border-bottom: none; }
  609. .el-tabs--left.el-tabs--card .el-tabs__nav {
  610. border-radius: 4px 0 0 4px;
  611. border-bottom: 1px solid #E4E7ED;
  612. border-right: none; }
  613. .el-tabs--left.el-tabs--card .el-tabs__new-tab {
  614. float: none; }
  615. .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
  616. border-right: 1px solid #dfe4ed; }
  617. .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
  618. border: 1px solid transparent;
  619. margin: -1px 0 -1px -1px; }
  620. .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
  621. border-color: transparent;
  622. border-top-color: #d1dbe5;
  623. border-bottom-color: #d1dbe5; }
  624. .el-tabs--right .el-tabs__header.is-right {
  625. float: right;
  626. margin-bottom: 0;
  627. margin-left: 10px; }
  628. .el-tabs--right .el-tabs__nav-wrap.is-right {
  629. margin-left: -1px; }
  630. .el-tabs--right .el-tabs__nav-wrap.is-right::after {
  631. left: 0;
  632. right: auto; }
  633. .el-tabs--right .el-tabs__active-bar.is-right {
  634. left: 0; }
  635. .el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
  636. display: none; }
  637. .el-tabs--right.el-tabs--card .el-tabs__item.is-right {
  638. border-bottom: none;
  639. border-top: 1px solid #E4E7ED; }
  640. .el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child {
  641. border-left: 1px solid #E4E7ED;
  642. border-top: none; }
  643. .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
  644. border: 1px solid #E4E7ED;
  645. border-left-color: #fff;
  646. border-right: none;
  647. border-bottom: none; }
  648. .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
  649. border-top: none; }
  650. .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child {
  651. border-bottom: none; }
  652. .el-tabs--right.el-tabs--card .el-tabs__nav {
  653. border-radius: 0 4px 4px 0;
  654. border-bottom: 1px solid #E4E7ED;
  655. border-left: none; }
  656. .el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
  657. border-left: 1px solid #dfe4ed; }
  658. .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right {
  659. border: 1px solid transparent;
  660. margin: -1px -1px -1px 0; }
  661. .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
  662. border-color: transparent;
  663. border-top-color: #d1dbe5;
  664. border-bottom-color: #d1dbe5; }
  665. .slideInRight-transition,
  666. .slideInLeft-transition {
  667. display: inline-block; }
  668. .slideInRight-enter {
  669. -webkit-animation: slideInRight-enter .3s;
  670. animation: slideInRight-enter .3s; }
  671. .slideInRight-leave {
  672. position: absolute;
  673. left: 0;
  674. right: 0;
  675. -webkit-animation: slideInRight-leave .3s;
  676. animation: slideInRight-leave .3s; }
  677. .slideInLeft-enter {
  678. -webkit-animation: slideInLeft-enter .3s;
  679. animation: slideInLeft-enter .3s; }
  680. .slideInLeft-leave {
  681. position: absolute;
  682. left: 0;
  683. right: 0;
  684. -webkit-animation: slideInLeft-leave .3s;
  685. animation: slideInLeft-leave .3s; }
  686. @-webkit-keyframes slideInRight-enter {
  687. 0% {
  688. opacity: 0;
  689. -webkit-transform-origin: 0 0;
  690. transform-origin: 0 0;
  691. -webkit-transform: translateX(100%);
  692. transform: translateX(100%); }
  693. to {
  694. opacity: 1;
  695. -webkit-transform-origin: 0 0;
  696. transform-origin: 0 0;
  697. -webkit-transform: translateX(0);
  698. transform: translateX(0); } }
  699. @keyframes slideInRight-enter {
  700. 0% {
  701. opacity: 0;
  702. -webkit-transform-origin: 0 0;
  703. transform-origin: 0 0;
  704. -webkit-transform: translateX(100%);
  705. transform: translateX(100%); }
  706. to {
  707. opacity: 1;
  708. -webkit-transform-origin: 0 0;
  709. transform-origin: 0 0;
  710. -webkit-transform: translateX(0);
  711. transform: translateX(0); } }
  712. @-webkit-keyframes slideInRight-leave {
  713. 0% {
  714. -webkit-transform-origin: 0 0;
  715. transform-origin: 0 0;
  716. -webkit-transform: translateX(0);
  717. transform: translateX(0);
  718. opacity: 1; }
  719. 100% {
  720. -webkit-transform-origin: 0 0;
  721. transform-origin: 0 0;
  722. -webkit-transform: translateX(100%);
  723. transform: translateX(100%);
  724. opacity: 0; } }
  725. @keyframes slideInRight-leave {
  726. 0% {
  727. -webkit-transform-origin: 0 0;
  728. transform-origin: 0 0;
  729. -webkit-transform: translateX(0);
  730. transform: translateX(0);
  731. opacity: 1; }
  732. 100% {
  733. -webkit-transform-origin: 0 0;
  734. transform-origin: 0 0;
  735. -webkit-transform: translateX(100%);
  736. transform: translateX(100%);
  737. opacity: 0; } }
  738. @-webkit-keyframes slideInLeft-enter {
  739. 0% {
  740. opacity: 0;
  741. -webkit-transform-origin: 0 0;
  742. transform-origin: 0 0;
  743. -webkit-transform: translateX(-100%);
  744. transform: translateX(-100%); }
  745. to {
  746. opacity: 1;
  747. -webkit-transform-origin: 0 0;
  748. transform-origin: 0 0;
  749. -webkit-transform: translateX(0);
  750. transform: translateX(0); } }
  751. @keyframes slideInLeft-enter {
  752. 0% {
  753. opacity: 0;
  754. -webkit-transform-origin: 0 0;
  755. transform-origin: 0 0;
  756. -webkit-transform: translateX(-100%);
  757. transform: translateX(-100%); }
  758. to {
  759. opacity: 1;
  760. -webkit-transform-origin: 0 0;
  761. transform-origin: 0 0;
  762. -webkit-transform: translateX(0);
  763. transform: translateX(0); } }
  764. @-webkit-keyframes slideInLeft-leave {
  765. 0% {
  766. -webkit-transform-origin: 0 0;
  767. transform-origin: 0 0;
  768. -webkit-transform: translateX(0);
  769. transform: translateX(0);
  770. opacity: 1; }
  771. 100% {
  772. -webkit-transform-origin: 0 0;
  773. transform-origin: 0 0;
  774. -webkit-transform: translateX(-100%);
  775. transform: translateX(-100%);
  776. opacity: 0; } }
  777. @keyframes slideInLeft-leave {
  778. 0% {
  779. -webkit-transform-origin: 0 0;
  780. transform-origin: 0 0;
  781. -webkit-transform: translateX(0);
  782. transform: translateX(0);
  783. opacity: 1; }
  784. 100% {
  785. -webkit-transform-origin: 0 0;
  786. transform-origin: 0 0;
  787. -webkit-transform: translateX(-100%);
  788. transform: translateX(-100%);
  789. opacity: 0; } }