Plat Admin

collapse.css 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Colors
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Background
  20. -------------------------- */
  21. /* Border
  22. -------------------------- */
  23. /* Box-shadow
  24. -------------------------- */
  25. /* Fill
  26. -------------------------- */
  27. /* Font
  28. -------------------------- */
  29. /* Size
  30. -------------------------- */
  31. /* z-index
  32. -------------------------- */
  33. /* Disable base
  34. -------------------------- */
  35. /* Icon
  36. -------------------------- */
  37. /* Checkbox
  38. -------------------------- */
  39. /* Radio
  40. -------------------------- */
  41. /* Select
  42. -------------------------- */
  43. /* Alert
  44. -------------------------- */
  45. /* Message Box
  46. -------------------------- */
  47. /* Message
  48. -------------------------- */
  49. /* Notification
  50. -------------------------- */
  51. /* Input
  52. -------------------------- */
  53. /* Cascader
  54. -------------------------- */
  55. /* Group
  56. -------------------------- */
  57. /* Tab
  58. -------------------------- */
  59. /* Button
  60. -------------------------- */
  61. /* cascader
  62. -------------------------- */
  63. /* Switch
  64. -------------------------- */
  65. /* Dialog
  66. -------------------------- */
  67. /* Table
  68. -------------------------- */
  69. /* Pagination
  70. -------------------------- */
  71. /* Popover
  72. -------------------------- */
  73. /* Tooltip
  74. -------------------------- */
  75. /* Tag
  76. -------------------------- */
  77. /* Tree
  78. -------------------------- */
  79. /* Dropdown
  80. -------------------------- */
  81. /* Badge
  82. -------------------------- */
  83. /* Card
  84. --------------------------*/
  85. /* Slider
  86. --------------------------*/
  87. /* Steps
  88. --------------------------*/
  89. /* Menu
  90. --------------------------*/
  91. /* Rate
  92. --------------------------*/
  93. /* DatePicker
  94. --------------------------*/
  95. /* Loading
  96. --------------------------*/
  97. /* Scrollbar
  98. --------------------------*/
  99. /* Carousel
  100. --------------------------*/
  101. /* Collapse
  102. --------------------------*/
  103. /* Transfer
  104. --------------------------*/
  105. /* Header
  106. --------------------------*/
  107. /* Footer
  108. --------------------------*/
  109. /* Main
  110. --------------------------*/
  111. /* Break-point
  112. --------------------------*/
  113. /* Break-points
  114. -------------------------- */
  115. /* Scrollbar
  116. -------------------------- */
  117. /* Placeholder
  118. -------------------------- */
  119. /* BEM
  120. -------------------------- */
  121. /* Element Chalk Variables */
  122. /* Transition
  123. -------------------------- */
  124. /* Colors
  125. -------------------------- */
  126. /* 53a8ff */
  127. /* 66b1ff */
  128. /* 79bbff */
  129. /* 8cc5ff */
  130. /* a0cfff */
  131. /* b3d8ff */
  132. /* c6e2ff */
  133. /* d9ecff */
  134. /* ecf5ff */
  135. /* Link
  136. -------------------------- */
  137. /* Background
  138. -------------------------- */
  139. /* Border
  140. -------------------------- */
  141. /* Box-shadow
  142. -------------------------- */
  143. /* Fill
  144. -------------------------- */
  145. /* Font
  146. -------------------------- */
  147. /* Size
  148. -------------------------- */
  149. /* z-index
  150. -------------------------- */
  151. /* Disable base
  152. -------------------------- */
  153. /* Icon
  154. -------------------------- */
  155. /* Checkbox
  156. -------------------------- */
  157. /* Radio
  158. -------------------------- */
  159. /* Select
  160. -------------------------- */
  161. /* Alert
  162. -------------------------- */
  163. /* Message Box
  164. -------------------------- */
  165. /* Message
  166. -------------------------- */
  167. /* Notification
  168. -------------------------- */
  169. /* Input
  170. -------------------------- */
  171. /* Cascader
  172. -------------------------- */
  173. /* Group
  174. -------------------------- */
  175. /* Tab
  176. -------------------------- */
  177. /* Button
  178. -------------------------- */
  179. /* cascader
  180. -------------------------- */
  181. /* Switch
  182. -------------------------- */
  183. /* Dialog
  184. -------------------------- */
  185. /* Table
  186. -------------------------- */
  187. /* Pagination
  188. -------------------------- */
  189. /* Popover
  190. -------------------------- */
  191. /* Tooltip
  192. -------------------------- */
  193. /* Tag
  194. -------------------------- */
  195. /* Tree
  196. -------------------------- */
  197. /* Dropdown
  198. -------------------------- */
  199. /* Badge
  200. -------------------------- */
  201. /* Card
  202. --------------------------*/
  203. /* Slider
  204. --------------------------*/
  205. /* Steps
  206. --------------------------*/
  207. /* Menu
  208. --------------------------*/
  209. /* Rate
  210. --------------------------*/
  211. /* DatePicker
  212. --------------------------*/
  213. /* Loading
  214. --------------------------*/
  215. /* Scrollbar
  216. --------------------------*/
  217. /* Carousel
  218. --------------------------*/
  219. /* Collapse
  220. --------------------------*/
  221. /* Transfer
  222. --------------------------*/
  223. /* Header
  224. --------------------------*/
  225. /* Footer
  226. --------------------------*/
  227. /* Main
  228. --------------------------*/
  229. /* Break-point
  230. --------------------------*/
  231. /* Element Chalk Variables */
  232. /* Transition
  233. -------------------------- */
  234. /* Colors
  235. -------------------------- */
  236. /* 53a8ff */
  237. /* 66b1ff */
  238. /* 79bbff */
  239. /* 8cc5ff */
  240. /* a0cfff */
  241. /* b3d8ff */
  242. /* c6e2ff */
  243. /* d9ecff */
  244. /* ecf5ff */
  245. /* Link
  246. -------------------------- */
  247. /* Background
  248. -------------------------- */
  249. /* Border
  250. -------------------------- */
  251. /* Box-shadow
  252. -------------------------- */
  253. /* Fill
  254. -------------------------- */
  255. /* Font
  256. -------------------------- */
  257. /* Size
  258. -------------------------- */
  259. /* z-index
  260. -------------------------- */
  261. /* Disable base
  262. -------------------------- */
  263. /* Icon
  264. -------------------------- */
  265. /* Checkbox
  266. -------------------------- */
  267. /* Radio
  268. -------------------------- */
  269. /* Select
  270. -------------------------- */
  271. /* Alert
  272. -------------------------- */
  273. /* Message Box
  274. -------------------------- */
  275. /* Message
  276. -------------------------- */
  277. /* Notification
  278. -------------------------- */
  279. /* Input
  280. -------------------------- */
  281. /* Cascader
  282. -------------------------- */
  283. /* Group
  284. -------------------------- */
  285. /* Tab
  286. -------------------------- */
  287. /* Button
  288. -------------------------- */
  289. /* cascader
  290. -------------------------- */
  291. /* Switch
  292. -------------------------- */
  293. /* Dialog
  294. -------------------------- */
  295. /* Table
  296. -------------------------- */
  297. /* Pagination
  298. -------------------------- */
  299. /* Popover
  300. -------------------------- */
  301. /* Tooltip
  302. -------------------------- */
  303. /* Tag
  304. -------------------------- */
  305. /* Tree
  306. -------------------------- */
  307. /* Dropdown
  308. -------------------------- */
  309. /* Badge
  310. -------------------------- */
  311. /* Card
  312. --------------------------*/
  313. /* Slider
  314. --------------------------*/
  315. /* Steps
  316. --------------------------*/
  317. /* Menu
  318. --------------------------*/
  319. /* Rate
  320. --------------------------*/
  321. /* DatePicker
  322. --------------------------*/
  323. /* Loading
  324. --------------------------*/
  325. /* Scrollbar
  326. --------------------------*/
  327. /* Carousel
  328. --------------------------*/
  329. /* Collapse
  330. --------------------------*/
  331. /* Transfer
  332. --------------------------*/
  333. /* Header
  334. --------------------------*/
  335. /* Footer
  336. --------------------------*/
  337. /* Main
  338. --------------------------*/
  339. /* Break-point
  340. --------------------------*/
  341. .fade-in-linear-enter-active,
  342. .fade-in-linear-leave-active {
  343. -webkit-transition: opacity 200ms linear;
  344. transition: opacity 200ms linear; }
  345. .fade-in-linear-enter,
  346. .fade-in-linear-leave,
  347. .fade-in-linear-leave-active {
  348. opacity: 0; }
  349. .el-fade-in-linear-enter-active,
  350. .el-fade-in-linear-leave-active {
  351. -webkit-transition: opacity 200ms linear;
  352. transition: opacity 200ms linear; }
  353. .el-fade-in-linear-enter,
  354. .el-fade-in-linear-leave,
  355. .el-fade-in-linear-leave-active {
  356. opacity: 0; }
  357. .el-fade-in-enter-active,
  358. .el-fade-in-leave-active {
  359. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  360. transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  361. .el-fade-in-enter,
  362. .el-fade-in-leave-active {
  363. opacity: 0; }
  364. .el-zoom-in-center-enter-active,
  365. .el-zoom-in-center-leave-active {
  366. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  367. transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  368. .el-zoom-in-center-enter,
  369. .el-zoom-in-center-leave-active {
  370. opacity: 0;
  371. -webkit-transform: scaleX(0);
  372. transform: scaleX(0); }
  373. .el-zoom-in-top-enter-active,
  374. .el-zoom-in-top-leave-active {
  375. opacity: 1;
  376. -webkit-transform: scaleY(1);
  377. transform: scaleY(1);
  378. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  379. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  380. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  381. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  382. -webkit-transform-origin: center top;
  383. transform-origin: center top; }
  384. .el-zoom-in-top-enter,
  385. .el-zoom-in-top-leave-active {
  386. opacity: 0;
  387. -webkit-transform: scaleY(0);
  388. transform: scaleY(0); }
  389. .el-zoom-in-bottom-enter-active,
  390. .el-zoom-in-bottom-leave-active {
  391. opacity: 1;
  392. -webkit-transform: scaleY(1);
  393. transform: scaleY(1);
  394. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  395. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  396. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  397. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  398. -webkit-transform-origin: center bottom;
  399. transform-origin: center bottom; }
  400. .el-zoom-in-bottom-enter,
  401. .el-zoom-in-bottom-leave-active {
  402. opacity: 0;
  403. -webkit-transform: scaleY(0);
  404. transform: scaleY(0); }
  405. .el-zoom-in-left-enter-active,
  406. .el-zoom-in-left-leave-active {
  407. opacity: 1;
  408. -webkit-transform: scale(1, 1);
  409. transform: scale(1, 1);
  410. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  411. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  412. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  413. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  414. -webkit-transform-origin: top left;
  415. transform-origin: top left; }
  416. .el-zoom-in-left-enter,
  417. .el-zoom-in-left-leave-active {
  418. opacity: 0;
  419. -webkit-transform: scale(0.45, 0.45);
  420. transform: scale(0.45, 0.45); }
  421. .collapse-transition {
  422. -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
  423. transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; }
  424. .horizontal-collapse-transition {
  425. -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
  426. transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; }
  427. .el-list-enter-active,
  428. .el-list-leave-active {
  429. -webkit-transition: all 1s;
  430. transition: all 1s; }
  431. .el-list-enter, .el-list-leave-active {
  432. opacity: 0;
  433. -webkit-transform: translateY(-30px);
  434. transform: translateY(-30px); }
  435. .el-opacity-transition {
  436. -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  437. transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  438. .el-collapse {
  439. border-top: 1px solid #ebeef5;
  440. border-bottom: 1px solid #ebeef5; }
  441. .el-collapse-item__header {
  442. display: -webkit-box;
  443. display: -ms-flexbox;
  444. display: flex;
  445. -webkit-box-align: center;
  446. -ms-flex-align: center;
  447. align-items: center;
  448. height: 48px;
  449. line-height: 48px;
  450. background-color: #fff;
  451. color: #303133;
  452. cursor: pointer;
  453. border-bottom: 1px solid #ebeef5;
  454. font-size: 13px;
  455. font-weight: 500;
  456. -webkit-transition: border-bottom-color .3s;
  457. transition: border-bottom-color .3s;
  458. outline: none; }
  459. .el-collapse-item__arrow {
  460. margin: 0 8px 0 auto;
  461. -webkit-transition: -webkit-transform .3s;
  462. transition: -webkit-transform .3s;
  463. transition: transform .3s;
  464. transition: transform .3s, -webkit-transform .3s;
  465. font-weight: 300; }
  466. .el-collapse-item__arrow.is-active {
  467. -webkit-transform: rotate(90deg);
  468. transform: rotate(90deg); }
  469. .el-collapse-item__header.focusing:focus:not(:hover) {
  470. color: #1b73a5; }
  471. .el-collapse-item__header.is-active {
  472. border-bottom-color: transparent; }
  473. .el-collapse-item__wrap {
  474. will-change: height;
  475. background-color: #fff;
  476. overflow: hidden;
  477. -webkit-box-sizing: border-box;
  478. box-sizing: border-box;
  479. border-bottom: 1px solid #ebeef5; }
  480. .el-collapse-item__content {
  481. padding-bottom: 25px;
  482. font-size: 13px;
  483. color: #303133;
  484. line-height: 1.769230769230769; }
  485. .el-collapse-item:last-child {
  486. margin-bottom: -1px; }