menu.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. @use '../helpers/baseMixin.scss';
  2. .vxe-menu {
  3. position: relative;
  4. &.is--collapsed {
  5. .vxe-menu--item-link-title,
  6. .vxe-menu--item-custom-title,
  7. .vxe-menu--item-link-collapse {
  8. display: none;
  9. }
  10. }
  11. &.is--loading {
  12. min-height: 4em;
  13. }
  14. }
  15. .vxe-menu {
  16. color: var(--vxe-ui-font-color);
  17. font-family: var(--vxe-ui-font-family);
  18. background-color: var(--vxe-ui-layout-background-color);
  19. }
  20. .vxe-menu--collapse-wrapper {
  21. display: none;
  22. position: absolute;
  23. overflow: auto;
  24. background-color: var(--vxe-ui-layout-background-color);
  25. &.is--collapsed {
  26. display: block;
  27. @include baseMixin.createAnimationTransition(all, 0.25s);
  28. }
  29. &:not(.is--enter) {
  30. .vxe-menu--item-link-title,
  31. .vxe-menu--item-custom-title,
  32. .vxe-menu--item-link-collapse {
  33. display: none;
  34. }
  35. }
  36. &.is--enter {
  37. box-shadow: var(--vxe-ui-menu-collapse-wrapper-box-shadow);
  38. }
  39. }
  40. .vxe-menu--item-link {
  41. display: flex;
  42. flex-direction: row;
  43. align-items: center;
  44. color: var(--vxe-ui-font-color);
  45. text-decoration: none;
  46. user-select: none;
  47. &:hover {
  48. color: var(--vxe-ui-menu-item-hover-color);
  49. background-color: var(--vxe-ui-base-hover-background-color);
  50. }
  51. }
  52. .vxe-menu--item-link,
  53. .vxe-menu--item-link-title,
  54. .vxe-menu--item-custom-title {
  55. overflow: hidden;
  56. text-overflow: ellipsis;
  57. white-space: nowrap;
  58. }
  59. .vxe-menu--item-link-icon {
  60. flex-shrink: 0;
  61. width: var(--vxe-ui-menu-icon-width);
  62. text-align: center;
  63. }
  64. .vxe-menu--item-link-title,
  65. .vxe-menu--item-custom-title {
  66. flex-grow: 1;
  67. padding-left: 0.2em;
  68. }
  69. .vxe-menu--item-link-collapse {
  70. flex-shrink: 0;
  71. padding: 0.5em;
  72. i {
  73. display: inline-block;
  74. font-size: 0.8em;
  75. @include baseMixin.createAnimationTransition(transform, 0.25s);
  76. }
  77. }
  78. .vxe-menu--item-wrapper {
  79. &.vxe-menu--item-level1 {
  80. & > .vxe-menu--item-link {
  81. padding: 0 var(--vxe-ui-layout-padding-double);
  82. }
  83. }
  84. @for $i from 1 to 8 {
  85. &.vxe-menu--item-level#{$i} {
  86. & > .vxe-menu--item-link {
  87. padding: 0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * $i);
  88. }
  89. }
  90. }
  91. }
  92. .vxe-menu--item-group {
  93. display: none;
  94. }
  95. .vxe-menu--item-wrapper {
  96. &.is--active {
  97. & > .vxe-menu--item-link {
  98. font-weight: 700;
  99. }
  100. }
  101. &.is--exact-active {
  102. & > .vxe-menu--item-link {
  103. color: var(--vxe-ui-font-primary-color);
  104. background-color: var(--vxe-ui-base-active-background-color);
  105. }
  106. }
  107. &.is--expand {
  108. & > .vxe-menu--item-group {
  109. display: block;
  110. }
  111. }
  112. }
  113. .vxe-menu--item-level3 {
  114. font-size: 13px;
  115. }
  116. .vxe-menu--item-link {
  117. height: var(--vxe-ui-menu-item-height-default);
  118. }
  119. .vxe-menu {
  120. font-size: var(--vxe-ui-font-size-default);
  121. &.size--medium {
  122. font-size: var(--vxe-ui-font-size-medium);
  123. .vxe-menu--item-link {
  124. height: var(--vxe-ui-menu-item-height-medium);
  125. }
  126. }
  127. &.size--small {
  128. font-size: var(--vxe-ui-font-size-small);
  129. .vxe-menu--item-link {
  130. height: var(--vxe-ui-menu-item-height-small);
  131. }
  132. }
  133. &.size--mini {
  134. font-size: var(--vxe-ui-font-size-mini);
  135. .vxe-menu--item-link {
  136. height: var(--vxe-ui-menu-item-height-mini);
  137. }
  138. }
  139. &.size--small,
  140. &.size--mini {
  141. .vxe-menu--item-level3 {
  142. font-size: 12px;
  143. }
  144. }
  145. }