menu.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719
  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. /* Break-point
  122. --------------------------*/
  123. /* Break-points
  124. -------------------------- */
  125. /* Scrollbar
  126. -------------------------- */
  127. /* Placeholder
  128. -------------------------- */
  129. /* BEM
  130. -------------------------- */
  131. /* Element Chalk Variables */
  132. /* Transition
  133. -------------------------- */
  134. /* Color
  135. -------------------------- */
  136. /* 53a8ff */
  137. /* 66b1ff */
  138. /* 79bbff */
  139. /* 8cc5ff */
  140. /* a0cfff */
  141. /* b3d8ff */
  142. /* c6e2ff */
  143. /* d9ecff */
  144. /* ecf5ff */
  145. /* Link
  146. -------------------------- */
  147. /* Border
  148. -------------------------- */
  149. /* Fill
  150. -------------------------- */
  151. /* Typography
  152. -------------------------- */
  153. /* Size
  154. -------------------------- */
  155. /* z-index
  156. -------------------------- */
  157. /* Disable base
  158. -------------------------- */
  159. /* Icon
  160. -------------------------- */
  161. /* Checkbox
  162. -------------------------- */
  163. /* Radio
  164. -------------------------- */
  165. /* Select
  166. -------------------------- */
  167. /* Alert
  168. -------------------------- */
  169. /* MessageBox
  170. -------------------------- */
  171. /* Message
  172. -------------------------- */
  173. /* Notification
  174. -------------------------- */
  175. /* Input
  176. -------------------------- */
  177. /* Cascader
  178. -------------------------- */
  179. /* Group
  180. -------------------------- */
  181. /* Tab
  182. -------------------------- */
  183. /* Button
  184. -------------------------- */
  185. /* cascader
  186. -------------------------- */
  187. /* Switch
  188. -------------------------- */
  189. /* Dialog
  190. -------------------------- */
  191. /* Table
  192. -------------------------- */
  193. /* Pagination
  194. -------------------------- */
  195. /* Popup
  196. -------------------------- */
  197. /* Popover
  198. -------------------------- */
  199. /* Tooltip
  200. -------------------------- */
  201. /* Tag
  202. -------------------------- */
  203. /* Tree
  204. -------------------------- */
  205. /* Dropdown
  206. -------------------------- */
  207. /* Badge
  208. -------------------------- */
  209. /* Card
  210. --------------------------*/
  211. /* Slider
  212. --------------------------*/
  213. /* Steps
  214. --------------------------*/
  215. /* Menu
  216. --------------------------*/
  217. /* Rate
  218. --------------------------*/
  219. /* DatePicker
  220. --------------------------*/
  221. /* Loading
  222. --------------------------*/
  223. /* Scrollbar
  224. --------------------------*/
  225. /* Carousel
  226. --------------------------*/
  227. /* Collapse
  228. --------------------------*/
  229. /* Transfer
  230. --------------------------*/
  231. /* Header
  232. --------------------------*/
  233. /* Footer
  234. --------------------------*/
  235. /* Main
  236. --------------------------*/
  237. /* Timeline
  238. --------------------------*/
  239. /* Backtop
  240. --------------------------*/
  241. /* Link
  242. --------------------------*/
  243. /* Calendar
  244. --------------------------*/
  245. /* Form
  246. -------------------------- */
  247. /* Avatar
  248. --------------------------*/
  249. /* Break-point
  250. --------------------------*/
  251. /* Element Chalk Variables */
  252. /* Transition
  253. -------------------------- */
  254. /* Color
  255. -------------------------- */
  256. /* 53a8ff */
  257. /* 66b1ff */
  258. /* 79bbff */
  259. /* 8cc5ff */
  260. /* a0cfff */
  261. /* b3d8ff */
  262. /* c6e2ff */
  263. /* d9ecff */
  264. /* ecf5ff */
  265. /* Link
  266. -------------------------- */
  267. /* Border
  268. -------------------------- */
  269. /* Fill
  270. -------------------------- */
  271. /* Typography
  272. -------------------------- */
  273. /* Size
  274. -------------------------- */
  275. /* z-index
  276. -------------------------- */
  277. /* Disable base
  278. -------------------------- */
  279. /* Icon
  280. -------------------------- */
  281. /* Checkbox
  282. -------------------------- */
  283. /* Radio
  284. -------------------------- */
  285. /* Select
  286. -------------------------- */
  287. /* Alert
  288. -------------------------- */
  289. /* MessageBox
  290. -------------------------- */
  291. /* Message
  292. -------------------------- */
  293. /* Notification
  294. -------------------------- */
  295. /* Input
  296. -------------------------- */
  297. /* Cascader
  298. -------------------------- */
  299. /* Group
  300. -------------------------- */
  301. /* Tab
  302. -------------------------- */
  303. /* Button
  304. -------------------------- */
  305. /* cascader
  306. -------------------------- */
  307. /* Switch
  308. -------------------------- */
  309. /* Dialog
  310. -------------------------- */
  311. /* Table
  312. -------------------------- */
  313. /* Pagination
  314. -------------------------- */
  315. /* Popup
  316. -------------------------- */
  317. /* Popover
  318. -------------------------- */
  319. /* Tooltip
  320. -------------------------- */
  321. /* Tag
  322. -------------------------- */
  323. /* Tree
  324. -------------------------- */
  325. /* Dropdown
  326. -------------------------- */
  327. /* Badge
  328. -------------------------- */
  329. /* Card
  330. --------------------------*/
  331. /* Slider
  332. --------------------------*/
  333. /* Steps
  334. --------------------------*/
  335. /* Menu
  336. --------------------------*/
  337. /* Rate
  338. --------------------------*/
  339. /* DatePicker
  340. --------------------------*/
  341. /* Loading
  342. --------------------------*/
  343. /* Scrollbar
  344. --------------------------*/
  345. /* Carousel
  346. --------------------------*/
  347. /* Collapse
  348. --------------------------*/
  349. /* Transfer
  350. --------------------------*/
  351. /* Header
  352. --------------------------*/
  353. /* Footer
  354. --------------------------*/
  355. /* Main
  356. --------------------------*/
  357. /* Timeline
  358. --------------------------*/
  359. /* Backtop
  360. --------------------------*/
  361. /* Link
  362. --------------------------*/
  363. /* Calendar
  364. --------------------------*/
  365. /* Form
  366. -------------------------- */
  367. /* Avatar
  368. --------------------------*/
  369. /* Break-point
  370. --------------------------*/
  371. .fade-in-linear-enter-active,
  372. .fade-in-linear-leave-active {
  373. -webkit-transition: opacity 200ms linear;
  374. transition: opacity 200ms linear; }
  375. .fade-in-linear-enter,
  376. .fade-in-linear-leave,
  377. .fade-in-linear-leave-active {
  378. opacity: 0; }
  379. .el-fade-in-linear-enter-active,
  380. .el-fade-in-linear-leave-active {
  381. -webkit-transition: opacity 200ms linear;
  382. transition: opacity 200ms linear; }
  383. .el-fade-in-linear-enter,
  384. .el-fade-in-linear-leave,
  385. .el-fade-in-linear-leave-active {
  386. opacity: 0; }
  387. .el-fade-in-enter-active,
  388. .el-fade-in-leave-active {
  389. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  390. transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  391. .el-fade-in-enter,
  392. .el-fade-in-leave-active {
  393. opacity: 0; }
  394. .el-zoom-in-center-enter-active,
  395. .el-zoom-in-center-leave-active {
  396. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  397. transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  398. .el-zoom-in-center-enter,
  399. .el-zoom-in-center-leave-active {
  400. opacity: 0;
  401. -webkit-transform: scaleX(0);
  402. transform: scaleX(0); }
  403. .el-zoom-in-top-enter-active,
  404. .el-zoom-in-top-leave-active {
  405. opacity: 1;
  406. -webkit-transform: scaleY(1);
  407. transform: scaleY(1);
  408. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  409. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  410. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  411. 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);
  412. -webkit-transform-origin: center top;
  413. transform-origin: center top; }
  414. .el-zoom-in-top-enter,
  415. .el-zoom-in-top-leave-active {
  416. opacity: 0;
  417. -webkit-transform: scaleY(0);
  418. transform: scaleY(0); }
  419. .el-zoom-in-bottom-enter-active,
  420. .el-zoom-in-bottom-leave-active {
  421. opacity: 1;
  422. -webkit-transform: scaleY(1);
  423. transform: scaleY(1);
  424. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  425. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  426. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  427. 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);
  428. -webkit-transform-origin: center bottom;
  429. transform-origin: center bottom; }
  430. .el-zoom-in-bottom-enter,
  431. .el-zoom-in-bottom-leave-active {
  432. opacity: 0;
  433. -webkit-transform: scaleY(0);
  434. transform: scaleY(0); }
  435. .el-zoom-in-left-enter-active,
  436. .el-zoom-in-left-leave-active {
  437. opacity: 1;
  438. -webkit-transform: scale(1, 1);
  439. transform: scale(1, 1);
  440. -webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  441. transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  442. transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  443. 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);
  444. -webkit-transform-origin: top left;
  445. transform-origin: top left; }
  446. .el-zoom-in-left-enter,
  447. .el-zoom-in-left-leave-active {
  448. opacity: 0;
  449. -webkit-transform: scale(0.45, 0.45);
  450. transform: scale(0.45, 0.45); }
  451. .collapse-transition {
  452. -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
  453. transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; }
  454. .horizontal-collapse-transition {
  455. -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
  456. transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; }
  457. .el-list-enter-active,
  458. .el-list-leave-active {
  459. -webkit-transition: all 1s;
  460. transition: all 1s; }
  461. .el-list-enter, .el-list-leave-active {
  462. opacity: 0;
  463. -webkit-transform: translateY(-30px);
  464. transform: translateY(-30px); }
  465. .el-opacity-transition {
  466. -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  467. transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  468. .el-menu {
  469. border-right: solid 1px #e6e6e6;
  470. list-style: none;
  471. position: relative;
  472. margin: 0;
  473. padding-left: 0;
  474. background-color: #FFFFFF; }
  475. .el-menu::before,
  476. .el-menu::after {
  477. display: table;
  478. content: ""; }
  479. .el-menu::after {
  480. clear: both; }
  481. .el-menu.el-menu--horizontal {
  482. border-bottom: solid 1px #e6e6e6; }
  483. .el-menu--horizontal {
  484. border-right: none; }
  485. .el-menu--horizontal > .el-menu-item {
  486. float: left;
  487. height: 60px;
  488. line-height: 60px;
  489. margin: 0;
  490. border-bottom: 2px solid transparent;
  491. color: #909399; }
  492. .el-menu--horizontal > .el-menu-item a,
  493. .el-menu--horizontal > .el-menu-item a:hover {
  494. color: inherit; }
  495. .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
  496. background-color: #fff; }
  497. .el-menu--horizontal > .el-submenu {
  498. float: left; }
  499. .el-menu--horizontal > .el-submenu:focus, .el-menu--horizontal > .el-submenu:hover {
  500. outline: none; }
  501. .el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
  502. color: #303133; }
  503. .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  504. border-bottom: 2px solid #2D74E7;
  505. color: #303133; }
  506. .el-menu--horizontal > .el-submenu .el-submenu__title {
  507. height: 60px;
  508. line-height: 60px;
  509. border-bottom: 2px solid transparent;
  510. color: #909399; }
  511. .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  512. background-color: #fff; }
  513. .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  514. position: static;
  515. vertical-align: middle;
  516. margin-left: 8px;
  517. margin-top: -3px; }
  518. .el-menu--horizontal .el-menu .el-menu-item,
  519. .el-menu--horizontal .el-menu .el-submenu__title {
  520. background-color: #FFFFFF;
  521. float: none;
  522. height: 36px;
  523. line-height: 36px;
  524. padding: 0 10px;
  525. color: #909399; }
  526. .el-menu--horizontal .el-menu .el-menu-item.is-active,
  527. .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  528. color: #303133; }
  529. .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
  530. .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  531. outline: none;
  532. color: #303133; }
  533. .el-menu--horizontal > .el-menu-item.is-active {
  534. border-bottom: 2px solid #2D74E7;
  535. color: #303133; }
  536. .el-menu--collapse {
  537. width: 64px; }
  538. .el-menu--collapse > .el-menu-item [class^="el-icon-"],
  539. .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  540. margin: 0;
  541. vertical-align: middle;
  542. width: 24px;
  543. text-align: center; }
  544. .el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
  545. .el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  546. display: none; }
  547. .el-menu--collapse > .el-menu-item span,
  548. .el-menu--collapse > .el-submenu > .el-submenu__title span {
  549. height: 0;
  550. width: 0;
  551. overflow: hidden;
  552. visibility: hidden;
  553. display: inline-block; }
  554. .el-menu--collapse > .el-menu-item.is-active i {
  555. color: inherit; }
  556. .el-menu--collapse .el-menu .el-submenu {
  557. min-width: 200px; }
  558. .el-menu--collapse .el-submenu {
  559. position: relative; }
  560. .el-menu--collapse .el-submenu .el-menu {
  561. position: absolute;
  562. margin-left: 5px;
  563. top: 0;
  564. left: 100%;
  565. z-index: 10;
  566. border: 1px solid #E4E7ED;
  567. border-radius: 2px;
  568. -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  569. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
  570. .el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  571. -webkit-transform: none;
  572. transform: none; }
  573. .el-menu--popup {
  574. z-index: 100;
  575. min-width: 200px;
  576. border: none;
  577. padding: 5px 0;
  578. border-radius: 2px;
  579. -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  580. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
  581. .el-menu--popup-bottom-start {
  582. margin-top: 5px; }
  583. .el-menu--popup-right-start {
  584. margin-left: 5px;
  585. margin-right: 5px; }
  586. .el-menu-item {
  587. height: 56px;
  588. line-height: 56px;
  589. font-size: 14px;
  590. color: #303133;
  591. padding: 0 20px;
  592. list-style: none;
  593. cursor: pointer;
  594. position: relative;
  595. -webkit-transition: border-color .3s, background-color .3s, color .3s;
  596. transition: border-color .3s, background-color .3s, color .3s;
  597. -webkit-box-sizing: border-box;
  598. box-sizing: border-box;
  599. white-space: nowrap; }
  600. .el-menu-item * {
  601. vertical-align: middle; }
  602. .el-menu-item i {
  603. color: #909399; }
  604. .el-menu-item:hover, .el-menu-item:focus {
  605. outline: none;
  606. background-color: #eaf1fd; }
  607. .el-menu-item.is-disabled {
  608. opacity: 0.25;
  609. cursor: not-allowed;
  610. background: none !important; }
  611. .el-menu-item [class^="el-icon-"] {
  612. margin-right: 5px;
  613. width: 24px;
  614. text-align: center;
  615. font-size: 18px;
  616. vertical-align: middle; }
  617. .el-menu-item.is-active {
  618. color: #2D74E7; }
  619. .el-menu-item.is-active i {
  620. color: inherit; }
  621. .el-submenu {
  622. list-style: none;
  623. margin: 0;
  624. padding-left: 0; }
  625. .el-submenu__title {
  626. height: 56px;
  627. line-height: 56px;
  628. font-size: 14px;
  629. color: #303133;
  630. padding: 0 20px;
  631. list-style: none;
  632. cursor: pointer;
  633. position: relative;
  634. -webkit-transition: border-color .3s, background-color .3s, color .3s;
  635. transition: border-color .3s, background-color .3s, color .3s;
  636. -webkit-box-sizing: border-box;
  637. box-sizing: border-box;
  638. white-space: nowrap; }
  639. .el-submenu__title * {
  640. vertical-align: middle; }
  641. .el-submenu__title i {
  642. color: #909399; }
  643. .el-submenu__title:hover, .el-submenu__title:focus {
  644. outline: none;
  645. background-color: #eaf1fd; }
  646. .el-submenu__title.is-disabled {
  647. opacity: 0.25;
  648. cursor: not-allowed;
  649. background: none !important; }
  650. .el-submenu__title:hover {
  651. background-color: #eaf1fd; }
  652. .el-submenu .el-menu {
  653. border: none; }
  654. .el-submenu .el-menu-item {
  655. height: 50px;
  656. line-height: 50px;
  657. padding: 0 45px;
  658. min-width: 200px; }
  659. .el-submenu__icon-arrow {
  660. position: absolute;
  661. top: 50%;
  662. right: 20px;
  663. margin-top: -7px;
  664. -webkit-transition: -webkit-transform .3s;
  665. transition: -webkit-transform .3s;
  666. transition: transform .3s;
  667. transition: transform .3s, -webkit-transform .3s;
  668. font-size: 12px; }
  669. .el-submenu.is-active .el-submenu__title {
  670. border-bottom-color: #2D74E7; }
  671. .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  672. -webkit-transform: rotateZ(180deg);
  673. transform: rotateZ(180deg); }
  674. .el-submenu.is-disabled .el-submenu__title,
  675. .el-submenu.is-disabled .el-menu-item {
  676. opacity: 0.25;
  677. cursor: not-allowed;
  678. background: none !important; }
  679. .el-submenu [class^="el-icon-"] {
  680. vertical-align: middle;
  681. margin-right: 5px;
  682. width: 24px;
  683. text-align: center;
  684. font-size: 18px; }
  685. .el-menu-item-group > ul {
  686. padding: 0; }
  687. .el-menu-item-group__title {
  688. padding: 7px 0 7px 20px;
  689. line-height: normal;
  690. font-size: 12px;
  691. color: #909399; }
  692. .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
  693. -webkit-transition: .2s;
  694. transition: .2s;
  695. opacity: 0; }