@use '../helpers/baseMixin.scss'; .vxe-menu { position: relative; &.is--collapsed { .vxe-menu--item-link-title, .vxe-menu--item-custom-title, .vxe-menu--item-link-collapse { display: none; } } &.is--loading { min-height: 4em; } } .vxe-menu, .vxe-menu--collapse-wrapper { font-size: var(--vxe-ui-font-size-default); color: var(--vxe-ui-font-color); font-family: var(--vxe-ui-font-family); background-color: var(--vxe-ui-layout-background-color); } .vxe-menu--collapse-wrapper { display: none; position: absolute; overflow: auto; &.is--collapsed { display: block; @include baseMixin.createAnimationTransition(all, 0.25s); } &:not(.is--enter) { .vxe-menu--item-link-title, .vxe-menu--item-custom-title, .vxe-menu--item-link-collapse { display: none; } } &.is--enter { box-shadow: var(--vxe-ui-menu-collapse-wrapper-box-shadow); } } .vxe-menu--item-link { display: flex; flex-direction: row; align-items: center; height: var(--vxe-ui-menu-item-height); color: var(--vxe-ui-font-color); text-decoration: none; user-select: none; &:hover { color: var(--vxe-ui-menu-item-hover-color); background-color: var(--vxe-ui-base-hover-background-color); } } .vxe-menu--item-link, .vxe-menu--item-link-title, .vxe-menu--item-custom-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vxe-menu--item-link-icon { flex-shrink: 0; width: var(--vxe-ui-menu-icon-width); text-align: center; } .vxe-menu--item-link-title, .vxe-menu--item-custom-title { flex-grow: 1; padding-left: 0.2em; } .vxe-menu--item-link-collapse { flex-shrink: 0; padding: 0.5em; i { display: inline-block; font-size: 0.8em; @include baseMixin.createAnimationTransition(transform, 0.25s); } } .vxe-menu--item-wrapper { &.vxe-menu--item-level1 { & > .vxe-menu--item-link { padding: 0 var(--vxe-ui-layout-padding-double); } } @for $i from 1 to 8 { &.vxe-menu--item-level#{$i} { & > .vxe-menu--item-link { padding: 0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * $i); } } } } .vxe-menu--item-level3 { font-size: 13px; } .vxe-menu--item-group { display: none; } .vxe-menu--item-wrapper { &.is--active { & > .vxe-menu--item-link { font-weight: 700; } } &.is--exact-active { & > .vxe-menu--item-link { color: var(--vxe-ui-font-primary-color); background-color: var(--vxe-ui-base-active-background-color); } } &.is--expand { & > .vxe-menu--item-group { display: block; } } }