vexip-ui/css/menu.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-menu-vars{--vxp-menu-bg-color:transparent;--vxp-menu-bg-color-hover:var(--vxp-fill-color-hover);--vxp-menu-bg-color-selected:var(--vxp-color-primary-opacity-8);--vxp-menu-b-color:var(--vxp-border-color-light-2);--vxp-menu-d-color:var(--vxp-border-color-light-1);--vxp-menu-o-color:var(--vxp-color-primary-opacity-6);--vxp-menu-item-x-span:8px;--vxp-menu-item-y-span:4px;--vxp-menu-label-color:var(--vxp-content-color-base);--vxp-menu-label-color-hover:var(--vxp-menu-label-color);--vxp-menu-label-color-visible:var(--vxp-color-primary-base);--vxp-menu-label-color-selected:var(--vxp-color-primary-base);--vxp-menu-label-color-disabled:var(--vxp-content-color-disabled);--vxp-menu-marker-bg-color:var(--vxp-color-primary-base);--vxp-menu-popper-bg-color:var(--vxp-bg-color-base);--vxp-menu-popper-b-color:var(--vxp-border-color-light-2);--vxp-menu-popper-radius:var(--vxp-radius-base);--vxp-menu-popper-s-color:var(--vxp-shadow-color-base);--vxp-menu-group-color:var(--vxp-content-color-secondary);--vxp-menu-group-span:6px;--vxp-menu-indent-width:20px}.vxp-menu{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;flex-direction:column;width:100%;padding:0;margin:0;background-color:var(--vxp-menu-bg-color);border-inline-end:var(--vxp-border-shape) var(--vxp-menu-b-color);outline:0;transition:width var(--vxp-transition-base),var(--vxp-transition-shadow)}.vxp-menu,.vxp-menu *,.vxp-menu ::after,.vxp-menu ::before{box-sizing:border-box}.vxp-menu--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-menu--horizontal{flex-direction:row;width:auto;border-inline-end:0}.vxp-menu::after,.vxp-menu::before{display:table;content:""}.vxp-menu::after{clear:both}.vxp-menu--reduced{width:calc(var(--vxp-menu-indent-width) * 2 + 24px)}.vxp-menu__popper{padding:0;transform-origin:0 0!important}html.rtl .vxp-menu__popper,html[dir=rtl] .vxp-menu__popper{transform-origin:100% 0!important}.vxp-menu__popper--drop{padding:5px 0}.vxp-menu__item{padding:0;margin-top:var(--vxp-menu-item-y-span);list-style:none;background-color:transparent!important}.vxp-menu>.vxp-menu__item:first-child{margin-top:0}.vxp-menu__item>.vxp-tooltip{height:100%}.vxp-menu__item>.vxp-tooltip>.vxp-tooltip__trigger{display:block;height:100%}.vxp-menu--horizontal .vxp-menu__item{padding:0;padding-inline:calc(var(--vxp-menu-item-x-span) * .5);margin-top:0}.vxp-menu__popper .vxp-menu__item{padding:0}.vxp-menu__popper .vxp-menu__item:first-child{margin-top:0}.vxp-menu__label{position:relative;display:flex;align-items:center;width:100%;height:100%;padding:10px 0;padding-inline:20px;color:var(--vxp-menu-label-color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-menu-bg-color);outline:0;transition:padding-inline-start var(--vxp-transition-base),var(--vxp-transition-color),var(--vxp-transition-background),var(--vxp-transition-shadow)}.vxp-menu__label::after{position:absolute;inset-inline-start:-1px;top:0;bottom:0;display:block;width:3px;content:"";background-color:var(--vxp-menu-marker-bg-color);opacity:0;transition:var(--vxp-transition-opacity)}.vxp-menu__popper .vxp-menu__label::after{display:none}.vxp-menu__label--marker-left::after{inset-inline:0 auto}.vxp-menu--horizontal .vxp-menu__label::after{inset:auto 0;width:auto;height:2px}.vxp-menu--horizontal .vxp-menu__label--marker-top::after{top:0}.vxp-menu--horizontal .vxp-menu__label--marker-bottom::after{bottom:0}.vxp-menu__label--marker-none::after{display:none}.vxp-menu__label:hover{color:var(--vxp-menu-label-color-hover)}.vxp-menu__label:hover,.vxp-menu__popper .vxp-menu__item--group-visible>.vxp-menu__label{background-color:var(--vxp-menu-bg-color-hover)}.vxp-menu--horizontal .vxp-menu__label:hover,.vxp-menu--horizontal .vxp-menu__popper .vxp-menu__item--group-visible>.vxp-menu__label{background-color:var(--vxp-menu-bg-color)}.vxp-menu--horizontal .vxp-menu__label:hover::after,.vxp-menu--horizontal .vxp-menu__popper .vxp-menu__item--group-visible>.vxp-menu__label::after{opacity:100%}.vxp-menu__popper .vxp-menu__label:hover,.vxp-menu__popper .vxp-menu__popper .vxp-menu__item--group-visible>.vxp-menu__label{background-color:var(--vxp-menu-bg-color-hover)}.vxp-menu__item--disabled .vxp-menu__label:hover::after,.vxp-menu__item--disabled .vxp-menu__popper .vxp-menu__item--group-visible>.vxp-menu__label::after{opacity:0}.vxp-menu__item--son-selected>.vxp-menu__label{color:var(--vxp-menu-label-color-selected)}.vxp-menu--horizontal .vxp-menu__item--son-selected>.vxp-menu__label::after{opacity:100%}.vxp-menu__item--disabled .vxp-menu__item--son-selected>.vxp-menu__label::after{opacity:0}.vxp-menu--horizontal .vxp-menu__item--group-visible>.vxp-menu__label::after,.vxp-menu--horizontal .vxp-menu__item--selected .vxp-menu__label::after{opacity:100%}.vxp-menu__label:focus-visible{box-shadow:0 0 0 2px var(--vxp-menu-o-color)}.vxp-menu__item--selected .vxp-menu__label{color:var(--vxp-menu-label-color-selected);background-color:var(--vxp-menu-bg-color-selected)}.vxp-menu__item--selected .vxp-menu__label::after{opacity:100%}.vxp-menu--horizontal :not(.vxp-menu__popper) .vxp-menu__item--selected .vxp-menu__label,.vxp-menu--horizontal>.vxp-menu__item--selected .vxp-menu__label{background-color:var(--vxp-menu-bg-color)}.vxp-menu__item--disabled .vxp-menu__label,.vxp-menu__item--disabled .vxp-menu__label:hover{color:var(--vxp-menu-label-color-disabled);cursor:not-allowed;background-color:var(--vxp-menu-bg-color)}.vxp-menu__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;min-width:14px;margin-inline-end:10px;transition:margin var(--vxp-transition-base)}.vxp-menu--reduced .vxp-menu__icon{margin:0;margin-inline:5px}.vxp-menu--horizontal .vxp-menu__icon{margin-inline-end:6px}.vxp-menu__popper .vxp-menu__icon{margin-inline:-2px 6px}.vxp-menu__title{display:inline-block;width:calc(100% - 34px);overflow:hidden;white-space:nowrap;opacity:100%;transition:width var(--vxp-transition-base),var(--vxp-transition-opacity)}.vxp-menu__title--in-group{padding-inline-end:20px}.vxp-menu--reduced .vxp-menu__title{width:0;pointer-events:none;opacity:0}.vxp-menu--horizontal .vxp-menu__title{width:auto}.vxp-menu--horizontal .vxp-menu__title--in-group{padding-inline-start:12px}.vxp-menu__popper .vxp-menu__title{width:auto;opacity:100%}.vxp-menu__item--no-icon .vxp-menu__title{width:100%}.vxp-menu--horizontal .vxp-menu__item--no-icon .vxp-menu__title{margin-inline-end:0}.vxp-menu__arrow{position:absolute;inset-inline-end:22px;opacity:100%;transition:var(--vxp-transition-opacity),var(--vxp-transition-transform)}.vxp-menu__arrow--visible{transform:rotate(180deg)}.vxp-menu--reduced .vxp-menu__arrow{pointer-events:none;opacity:0}.vxp-menu--dropdown .vxp-menu__arrow,.vxp-menu__label--in-popper>.vxp-menu__arrow{inset-inline-end:12px}.vxp-menu--horizontal .vxp-menu__arrow{position:relative;inset-inline-end:auto;margin-inline:6px 0;transform:rotate(0)}.vxp-menu--horizontal .vxp-menu__arrow--visible{transform:rotate(180deg)}.vxp-menu__popper .vxp-menu__arrow{inset-inline-end:12px;opacity:100%;transform:rotate(-90deg)}html.rtl .vxp-menu__popper .vxp-menu__arrow,html[dir=rtl] .vxp-menu__popper .vxp-menu__arrow{transform:rotate(90deg)}.vxp-menu__list{padding-inline-start:0;margin:0}.vxp-menu__list::after,.vxp-menu__list::before{display:table;content:""}.vxp-menu__popper .vxp-menu__list{display:inline-flex;flex-direction:column;min-width:70px;padding:5px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-menu-popper-bg-color);border:var(--vxp-border-shape) var(--vxp-menu-popper-b-color);border-radius:var(--vxp-menu-popper-radius);box-shadow:var(--vxp-shadow-shape) var(--vxp-menu-popper-s-color)}.vxp-menu__rest-handler{position:relative;display:flex;align-items:center;width:100%;height:100%;padding:10px 0;padding-inline:20px;cursor:pointer;background-color:var(--vxp-menu-bg-color);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-menu__rest-handler--selected{color:var(--vxp-menu-label-color-hover)}.vxp-menu-group{margin-top:var(--vxp-menu-group-span);white-space:nowrap;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-menu>.vxp-menu-group:first-child,.vxp-menu__popper .vxp-menu-group:first-child{margin-top:0}.vxp-menu-group__label{position:relative;color:var(--vxp-menu-group-color);background-color:var(--vxp-menu-bg-color)}.vxp-menu-group__label::before{position:absolute;inset-inline-start:50%;top:50%;width:24px;height:1px;content:"";background-color:var(--vxp-menu-d-color);opacity:0;transition:var(--vxp-transition-opacity);transform:translate(-50%,-50%)}.vxp-menu-group__title{display:inline-block;padding:8px 20px;font-size:var(--vxp-font-size-secondary);transition:var(--vxp-transition-opacity)}.vxp-menu--horizontal .vxp-menu-group__title{display:none}.vxp-menu__popper .vxp-menu-group__title{display:inline-block}.vxp-menu-group__list{position:relative;display:flex;flex-direction:column;width:100%;padding:0}.vxp-menu--horizontal .vxp-menu-group__list{flex-direction:row;width:auto}.vxp-menu__popper .vxp-menu-group__list{flex-direction:column}.vxp-menu--reduced .vxp-menu-group__label::before{opacity:100%}.vxp-menu--reduced .vxp-menu-group__title{opacity:0}