ivue-material-plus/dist/unplugin-vue-components/styles/ivue-menu.css

A high quality UI components Library with Vue.js

:root{--ivue-menu-font-size:14px;--ivue-menu-horizontal-height:60px;--ivue-menu-horizontal-submenu-padding:0 20px;--ivue-menu-horizontal-submenu-item-padding:8px 16px;--ivue-menu-horizontal-submenu-item-font-size:14px;--ivue-menu-vertical-item-padding:14px 24px;--ivue-menu-vertical-group-title-padding-left:24px;--ivue-menu-item-font-size:14px;--ivue-menu-item-group-title-font-size:14px;--ivue-menu-item-group-title-padding-left:8px;--ivue-menu-item-group-title-height:48px;--ivue-menu-dropdown-max-height:200px;--ivue-menu-dropdown-padding:5px 0;--ivue-menu-dropdown-radius:4px;--ivue-menu-dropdown-shadow:0 1px 6px rgba(0, 0, 0, 0.2);--ivue-menu-dark:#515a6e;--ivue-menu-vertical-item-color:rgba(255, 255, 255, 0.5);--ivue-menu-vertical-active-bg:rgb(153 202 248 / 35%);--ivue-menu-group-title-color:rgba(255, 255, 255, 0.36);--ivue-menu-submenu-bg:#363e4f}.ivue-menu{position:relative;display:block;margin:0;padding:0;outline:0;list-style:none;color:var(--ivue-text-color);font-size:var(--ivue-menu-font-size);z-index:10}.ivue-menu-light{background:var(--ivue-white-color)}.ivue-menu-dark{background:var(--ivue-menu-dark)}.ivue-menu-primary{background:var(--ivue-primary-color)}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-item,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-item,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-item{color:var(--ivue-menu-vertical-item-color);border:none}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-item:hover,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-item:hover,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-item:hover{color:var(--ivue-white-color);border:none}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-submenu,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu{color:var(--ivue-menu-vertical-item-color);border:none}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-submenu:hover,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu:hover,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu:hover{color:var(--ivue-white-color);border:none}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-submenu--active,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu--active,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu--active{color:var(--ivue-white-color)}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu .ivue-menu-item,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item{color:var(--ivue-title-color)}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item--selected,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu .ivue-menu-item--selected,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item--selected{color:var(--ivue-primary-color)}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item:hover,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu .ivue-menu-item:hover,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item:hover{background:var(--ivue-background-color-select-hover)}.ivue-menu-dark.ivue-menu-horizontal .ivue-menu-item--active,.ivue-menu-dark.ivue-menu-vertical .ivue-menu-item--active,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-item--active{color:var(--ivue-white-color)}.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-item,.ivue-menu-primary.ivue-menu-horizontal .ivue-menu-submenu{color:var(--ivue-white-color)}.ivue-menu-horizontal{height:var(--ivue-menu-horizontal-height);line-height:var(--ivue-menu-horizontal-height)}.ivue-menu-horizontal .ivue-menu-item,.ivue-menu-horizontal .ivue-menu-submenu{position:relative;float:left;padding:var(--ivue-menu-horizontal-submenu-padding);height:inherit;line-height:inherit;color:var(--ivue-title-color);cursor:pointer;z-index:3;-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);border-bottom:2px solid transparent}.ivue-menu-horizontal .ivue-menu-item:hover,.ivue-menu-horizontal .ivue-menu-submenu:hover{color:var(--ivue-primary-color);border-bottom:2px solid var(--ivue-primary-color)}.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-dropdown{min-width:100%;width:auto;max-height:none;left:0}.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item{display:-webkit-box;display:-ms-flexbox;display:flex;padding:var(--ivue-menu-horizontal-submenu-item-padding);font-size:var(--ivue-menu-horizontal-submenu-item-font-size);height:auto;line-height:normal;border-bottom:0;margin:0;line-height:normal;clear:both;color:var(--ivue-title-color);white-space:nowrap;list-style:none;cursor:pointer;-webkit-transition:background var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:background var(--ivue-default-transition-time) var(--ivue-ease-in-out);width:100%}.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item--active{color:var(--ivue-primary-color)}.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item--group__title{font-size:12px;height:30px;line-height:30px}.ivue-menu-horizontal .ivue-menu-submenu .ivue-menu-item:hover{background:var(--ivue-background-color-select-hover)}.ivue-menu-horizontal .ivue-menu-submenu--title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ivue-menu-horizontal .ivue-menu-submenu--icon{-webkit-transition:inherit;transition:inherit;-webkit-transition:-webkit-transform var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:-webkit-transform var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:transform var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:transform var(--ivue-default-transition-time) var(--ivue-ease-in-out),-webkit-transform var(--ivue-default-transition-time) var(--ivue-ease-in-out)}.ivue-menu-horizontal .ivue-menu-submenu--active{color:var(--ivue-primary-color);border-bottom:2px solid var(--ivue-primary-color)}.ivue-menu-horizontal .ivue-menu-submenu--opened__icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.ivue-menu-horizontal .ivue-menu-item--active{color:var(--ivue-primary-color);border-bottom:2px solid var(--ivue-primary-color)}.ivue-menu-horizontal.ivue-menu-light::after{content:"";position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:var(--ivue-border-color)}.ivue-menu-vertical .ivue-menu-item{position:relative;padding:var(--ivue-menu-vertical-item-padding);z-index:1;-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);cursor:pointer;text-overflow:ellipsis;overflow:hidden}.ivue-menu-vertical .ivue-menu-item::after{content:"";position:absolute;top:0;bottom:0;right:0;display:block;z-index:10;width:2px;opacity:0;background:var(--ivue-primary-color);-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition)}.ivue-menu-vertical .ivue-menu-item:hover{color:var(--ivue-primary-color)}.ivue-menu-vertical .ivue-menu-item--active:not(.ivue-menu-submenu){color:var(--ivue-primary-color);background:var(--ivue-menu-vertical-active-bg);z-index:2}.ivue-menu-vertical .ivue-menu-item--active:not(.ivue-menu-submenu)::after{opacity:1}.ivue-menu-vertical .ivue-menu-item--group__title{text-align:left;padding-left:var(--ivue-menu-vertical-group-title-padding-left)}.ivue-menu-vertical .ivue-menu-submenu--title{padding:var(--ivue-menu-vertical-item-padding);position:relative;cursor:pointer;z-index:1;-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);text-align:left}.ivue-menu-vertical .ivue-menu-submenu--title:hover{color:var(--ivue-primary-color)}.ivue-menu-vertical .ivue-menu-submenu--icon{position:absolute;top:0;bottom:0;right:24px;-webkit-transition:initial;transition:initial;-webkit-transition:-webkit-transform var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:-webkit-transform var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:transform var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:transform var(--ivue-default-transition-time) var(--ivue-ease-in-out),-webkit-transform var(--ivue-default-transition-time) var(--ivue-ease-in-out)}.ivue-menu-vertical .ivue-menu-submenu--opened__icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.ivue-menu-vertical.ivue-menu-light::after{content:"";position:absolute;top:0;bottom:0;right:0;z-index:1;display:block;width:1px;height:100%;background:var(--ivue-border-color)}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-item::after{display:none}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-item--active{color:var(--ivue-white-color)!important;background:var(--ivue-primary-color)!important}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-item--group__title{color:var(--ivue-menu-group-title-color)}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu--title{background:var(--ivue-menu-dark)}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu--title:hover{color:var(--ivue-white-color)}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu--opened{background:var(--ivue-menu-submenu-bg)}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu .ivue-menu-item{color:var(--ivue-menu-vertical-item-color)}.ivue-menu-dark.ivue-menu-vertical .ivue-menu-submenu .ivue-menu-item:hover{color:var(--ivue-white-color);background:var(--ivue-menu-submenu-bg)}.ivue-menu-item{position:relative;display:block;outline:0;list-style:none;font-size:var(--ivue-menu-font-size);z-index:1;cursor:pointer;text-align:left;-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);color:var(--ivue-text-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ivue-menu-item-router-link{color:currentColor}.ivue-menu-item--group{line-height:normal}.ivue-menu-item--group__title{height:var(--ivue-menu-item-group-title-height);line-height:var(--ivue-menu-item-group-title-height);padding-left:var(--ivue-menu-item-group-title-padding-left);font-size:var(--ivue-menu-item-group-title-font-size);color:var(--ivue-legend-color)}.ivue-menu-dropdown{position:absolute;width:inherit;max-height:var(--ivue-menu-dropdown-max-height);overflow:auto;padding:var(--ivue-menu-dropdown-padding);background-color:var(--ivue-white-color);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--ivue-menu-dropdown-radius);-webkit-box-shadow:var(--ivue-menu-dropdown-shadow);box-shadow:var(--ivue-menu-dropdown-shadow);z-index:900}.ivue-menu-dropdown--list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}