byted-vui/packages/theme-chalk/lib/menu.css

A Component Library for Vue.js.

.vi-menu,.vi-menu--horizontal>.vi-menu-item:not(.is-disabled):focus,.vi-menu--horizontal>.vi-menu-item:not(.is-disabled):hover,.vi-menu--horizontal>.vi-submenu .vi-submenu__title:hover{background-color:#fff}.vi-menu--collapse .vi-menu .vi-submenu,.vi-menu--popup{min-width:200px}.vi-menu{border-right:solid 1px #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0}.vi-menu::after,.vi-menu::before{display:table;content:""}.vi-menu::after{clear:both}.vi-menu--horizontal{border-right:none;border-bottom:solid 1px #e6e6e6}.vi-menu--horizontal>.vi-menu-item{float:left;height:70px;line-height:70px;margin:0;border-bottom:2px solid transparent;color:#909399}.vi-menu--horizontal>.vi-menu-item a,.vi-menu--horizontal>.vi-menu-item a:hover{color:inherit}.vi-menu--horizontal>.vi-submenu{float:left}.vi-menu--horizontal>.vi-submenu:focus,.vi-menu--horizontal>.vi-submenu:hover{outline:0}.vi-menu--horizontal>.vi-submenu:focus .vi-submenu__title,.vi-menu--horizontal>.vi-submenu:hover .vi-submenu__title{color:#464D62}.vi-menu--horizontal>.vi-submenu.is-active .vi-submenu__title{border-bottom:2px solid #445D89;color:#464D62}.vi-menu--horizontal>.vi-submenu .vi-submenu__title{height:70px;line-height:70px;border-bottom:2px solid transparent;color:#909399}.vi-menu--horizontal>.vi-submenu .vi-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.vi-menu--horizontal .vi-menu .vi-menu-item,.vi-menu--horizontal .vi-menu .vi-submenu__title{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px;color:#909399}.vi-menu--horizontal .vi-menu .vi-menu-item.is-active,.vi-menu--horizontal .vi-menu .vi-submenu__title.is-active{color:#464D62}.vi-menu--horizontal .vi-menu-item:not(.is-disabled):focus,.vi-menu--horizontal .vi-menu-item:not(.is-disabled):hover{outline:0;color:#464D62}.vi-menu--horizontal>.vi-menu-item.is-active{border-bottom:2px solid #445D89;color:#464D62}.vi-menu--collapse{width:64px}.vi-menu--collapse>.vi-menu-item [class^=vi-icon-],.vi-menu--collapse>.vi-submenu>.vi-submenu__title [class^=vi-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.vi-menu--collapse>.vi-menu-item .vi-submenu__icon-arrow,.vi-menu--collapse>.vi-submenu>.vi-submenu__title .vi-submenu__icon-arrow{display:none}.vi-menu--collapse>.vi-menu-item span,.vi-menu--collapse>.vi-submenu>.vi-submenu__title span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}.vi-menu--collapse>.vi-menu-item.is-active i{color:inherit}.vi-menu--collapse .vi-submenu{position:relative}.vi-menu--collapse .vi-submenu .vi-menu{position:absolute;margin-left:5px;top:0;left:100%;z-index:10;border:1px solid #e4e7ed;border-radius:2px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.vi-menu-item,.vi-submenu__title{height:56px;line-height:56px;list-style:none;position:relative;white-space:nowrap}.vi-menu--collapse .vi-submenu.is-opened>.vi-submenu__title .vi-submenu__icon-arrow{-webkit-transform:none;transform:none}.vi-menu--popup{z-index:100;border:none;padding:5px 0;border-radius:2px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.vi-menu--popup-bottom-start{margin-top:2px}.vi-menu--popup-right-start{margin-left:1px;margin-right:1px}.vi-menu-item{font-size:14px;color:#464D62;padding:0 20px;cursor:pointer;-webkit-transition:border-color .3s,background-color .3s,color .3s;transition:border-color .3s,background-color .3s,color .3s;-webkit-box-sizing:border-box;box-sizing:border-box}.vi-menu-item *{vertical-align:middle}.vi-menu-item i{color:#909399}.vi-menu-item:focus,.vi-menu-item:hover{outline:0;background-color:#eceff3}.vi-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:0 0!important}.vi-menu-item [class^=vi-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px;vertical-align:middle}.vi-menu-item.is-active{color:#445D89}.vi-menu-item.is-active i{color:inherit}.vi-submenu{list-style:none;margin:0;padding-left:0}.vi-submenu__title{font-size:14px;color:#464D62;padding:0 20px;cursor:pointer;-webkit-transition:border-color .3s,background-color .3s,color .3s;transition:border-color .3s,background-color .3s,color .3s;-webkit-box-sizing:border-box;box-sizing:border-box}.vi-submenu__title *{vertical-align:middle}.vi-submenu__title i{color:#909399}.vi-submenu__title:focus,.vi-submenu__title:hover{outline:0;background-color:#eceff3}.vi-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:0 0!important}.vi-submenu__title:hover{background-color:#eceff3}.vi-submenu .vi-menu{border:none}.vi-submenu .vi-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.vi-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-size:12px}.vi-submenu.is-active .vi-submenu__title{border-bottom-color:#445D89}.vi-submenu.is-opened>.vi-submenu__title .vi-submenu__icon-arrow{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.vi-submenu.is-disabled .vi-menu-item,.vi-submenu.is-disabled .vi-submenu__title{opacity:.25;cursor:not-allowed;background:0 0!important}.vi-submenu [class^=vi-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.vi-menu-item-group>ul{padding:0}.vi-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#909399}.horizontal-collapse-transition .vi-submenu__title .vi-submenu__icon-arrow{-webkit-transition:.2s;transition:.2s;opacity:0}