menu.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  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. .el-menu {
  232. border-right: solid 1px #e6e6e6;
  233. list-style: none;
  234. position: relative;
  235. margin: 0;
  236. padding-left: 0;
  237. background-color: #fff; }
  238. .el-menu::before,
  239. .el-menu::after {
  240. display: table;
  241. content: ""; }
  242. .el-menu::after {
  243. clear: both; }
  244. .el-menu--horizontal {
  245. border-right: none;
  246. border-bottom: solid 1px #e6e6e6; }
  247. .el-menu--horizontal > .el-menu-item {
  248. float: left;
  249. height: 60px;
  250. line-height: 60px;
  251. margin: 0;
  252. border-bottom: 2px solid transparent;
  253. color: #909399; }
  254. .el-menu--horizontal > .el-menu-item a,
  255. .el-menu--horizontal > .el-menu-item a:hover {
  256. color: inherit; }
  257. .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
  258. background-color: #fff; }
  259. .el-menu--horizontal > .el-submenu {
  260. float: left; }
  261. .el-menu--horizontal > .el-submenu:focus, .el-menu--horizontal > .el-submenu:hover {
  262. outline: none; }
  263. .el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
  264. color: #303133; }
  265. .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  266. border-bottom: 2px solid #C8A063;
  267. color: #303133; }
  268. .el-menu--horizontal > .el-submenu .el-submenu__title {
  269. height: 60px;
  270. line-height: 60px;
  271. border-bottom: 2px solid transparent;
  272. color: #909399; }
  273. .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  274. background-color: #fff; }
  275. .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  276. position: static;
  277. vertical-align: middle;
  278. margin-left: 8px;
  279. margin-top: -3px; }
  280. .el-menu--horizontal .el-menu .el-menu-item,
  281. .el-menu--horizontal .el-menu .el-submenu__title {
  282. background-color: #fff;
  283. float: none;
  284. height: 36px;
  285. line-height: 36px;
  286. padding: 0 10px;
  287. color: #909399; }
  288. .el-menu--horizontal .el-menu .el-menu-item.is-active,
  289. .el-menu--horizontal .el-menu .el-submenu__title.is-active {
  290. color: #303133; }
  291. .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
  292. .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  293. outline: none;
  294. color: #303133; }
  295. .el-menu--horizontal > .el-menu-item.is-active {
  296. border-bottom: 2px solid #C8A063;
  297. color: #303133; }
  298. .el-menu--collapse {
  299. width: 64px; }
  300. .el-menu--collapse > .el-menu-item [class^="el-icon-"],
  301. .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  302. margin: 0;
  303. vertical-align: middle;
  304. width: 24px;
  305. text-align: center; }
  306. .el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
  307. .el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  308. display: none; }
  309. .el-menu--collapse > .el-menu-item span,
  310. .el-menu--collapse > .el-submenu > .el-submenu__title span {
  311. height: 0;
  312. width: 0;
  313. overflow: hidden;
  314. visibility: hidden;
  315. display: inline-block; }
  316. .el-menu--collapse > .el-menu-item.is-active i {
  317. color: inherit; }
  318. .el-menu--collapse .el-menu .el-submenu {
  319. min-width: 200px; }
  320. .el-menu--collapse .el-submenu {
  321. position: relative; }
  322. .el-menu--collapse .el-submenu .el-menu {
  323. position: absolute;
  324. margin-left: 5px;
  325. top: 0;
  326. left: 100%;
  327. z-index: 10;
  328. border: 1px solid #e4e7ed;
  329. border-radius: 2px;
  330. -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  331. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
  332. .el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  333. -webkit-transform: none;
  334. transform: none; }
  335. .el-menu--popup {
  336. z-index: 100;
  337. min-width: 200px;
  338. border: none;
  339. padding: 5px 0;
  340. border-radius: 2px;
  341. -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  342. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
  343. .el-menu--popup-bottom-start {
  344. margin-top: 5px; }
  345. .el-menu--popup-right-start {
  346. margin-left: 5px;
  347. margin-right: 5px; }
  348. .el-menu-item {
  349. height: 56px;
  350. line-height: 56px;
  351. font-size: 14px;
  352. color: #303133;
  353. padding: 0 20px;
  354. list-style: none;
  355. cursor: pointer;
  356. position: relative;
  357. -webkit-transition: border-color .3s, background-color .3s, color .3s;
  358. transition: border-color .3s, background-color .3s, color .3s;
  359. -webkit-box-sizing: border-box;
  360. box-sizing: border-box;
  361. white-space: nowrap; }
  362. .el-menu-item * {
  363. vertical-align: middle; }
  364. .el-menu-item i {
  365. color: #909399; }
  366. .el-menu-item:hover, .el-menu-item:focus {
  367. outline: none;
  368. background-color: #faf6ef; }
  369. .el-menu-item.is-disabled {
  370. opacity: 0.25;
  371. cursor: not-allowed;
  372. background: none !important; }
  373. .el-menu-item [class^="el-icon-"] {
  374. margin-right: 5px;
  375. width: 24px;
  376. text-align: center;
  377. font-size: 18px;
  378. vertical-align: middle; }
  379. .el-menu-item.is-active {
  380. color: #C8A063; }
  381. .el-menu-item.is-active i {
  382. color: inherit; }
  383. .el-submenu {
  384. list-style: none;
  385. margin: 0;
  386. padding-left: 0; }
  387. .el-submenu__title {
  388. height: 56px;
  389. line-height: 56px;
  390. font-size: 14px;
  391. color: #303133;
  392. padding: 0 20px;
  393. list-style: none;
  394. cursor: pointer;
  395. position: relative;
  396. -webkit-transition: border-color .3s, background-color .3s, color .3s;
  397. transition: border-color .3s, background-color .3s, color .3s;
  398. -webkit-box-sizing: border-box;
  399. box-sizing: border-box;
  400. white-space: nowrap; }
  401. .el-submenu__title * {
  402. vertical-align: middle; }
  403. .el-submenu__title i {
  404. color: #909399; }
  405. .el-submenu__title:hover, .el-submenu__title:focus {
  406. outline: none;
  407. background-color: #faf6ef; }
  408. .el-submenu__title.is-disabled {
  409. opacity: 0.25;
  410. cursor: not-allowed;
  411. background: none !important; }
  412. .el-submenu__title:hover {
  413. background-color: #faf6ef; }
  414. .el-submenu .el-menu {
  415. border: none; }
  416. .el-submenu .el-menu-item {
  417. height: 50px;
  418. line-height: 50px;
  419. padding: 0 45px;
  420. min-width: 200px; }
  421. .el-submenu__icon-arrow {
  422. position: absolute;
  423. top: 50%;
  424. right: 20px;
  425. margin-top: -7px;
  426. -webkit-transition: -webkit-transform .3s;
  427. transition: -webkit-transform .3s;
  428. transition: transform .3s;
  429. transition: transform .3s, -webkit-transform .3s;
  430. font-size: 12px; }
  431. .el-submenu.is-active .el-submenu__title {
  432. border-bottom-color: #C8A063; }
  433. .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  434. -webkit-transform: rotateZ(180deg);
  435. transform: rotateZ(180deg); }
  436. .el-submenu.is-disabled .el-submenu__title,
  437. .el-submenu.is-disabled .el-menu-item {
  438. opacity: 0.25;
  439. cursor: not-allowed;
  440. background: none !important; }
  441. .el-submenu [class^="el-icon-"] {
  442. vertical-align: middle;
  443. margin-right: 5px;
  444. width: 24px;
  445. text-align: center;
  446. font-size: 18px; }
  447. .el-menu-item-group > ul {
  448. padding: 0; }
  449. .el-menu-item-group__title {
  450. padding: 7px 0 7px 20px;
  451. line-height: normal;
  452. font-size: 12px;
  453. color: #909399; }
  454. .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
  455. -webkit-transition: .2s;
  456. transition: .2s;
  457. opacity: 0; }