jiku-ui/lib/theme-chalk/side-nav.css

A Component Library for Vue.js.

.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active,.hn-fade-in-enter,.hn-fade-in-leave-active,.hn-fade-in-linear-enter,.hn-fade-in-linear-leave,.hn-fade-in-linear-leave-active{opacity:0}.hn-side-menu,.hn-side-menu--collapse .hn-side-submenu{position:relative}.hn-side-menu--collapse>.hn-side-menu__tree--root>.hn-side-menu-item.is-active i,.hn-side-menu-item.is-active i{color:inherit}.hn-side-menu-item,.hn-side-submenu__title{list-style:none;white-space:nowrap;line-height:50px}.hn-side-menu-item:focus,.hn-side-menu-item:hover,.hn-side-submenu__title:focus,.hn-side-submenu__title:hover{outline:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.hn-fade-in-linear-enter-active,.hn-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.hn-fade-in-enter-active,.hn-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.hn-zoom-in-center-enter-active,.hn-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.hn-zoom-in-center-enter,.hn-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.hn-zoom-in-top-enter-active,.hn-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.hn-zoom-in-top-enter,.hn-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.hn-zoom-in-bottom-enter-active,.hn-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.hn-zoom-in-bottom-enter,.hn-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.hn-zoom-in-left-enter-active,.hn-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.hn-zoom-in-left-enter,.hn-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.hn-list-enter-active,.hn-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.hn-list-enter,.hn-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.hn-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.hn-side-menu{margin:0;height:100%;padding-left:0;list-style:none}.hn-side-menu::after,.hn-side-menu::before{display:table;content:""}.hn-side-menu::after{clear:both}.hn-side-menu--collapse{width:60px}.hn-side-menu--collapse>.hn-side-menu__tree--root>.hn-side-menu-item .hn-side-menu-item__title-text,.hn-side-menu--collapse>.hn-side-menu__tree--root>.hn-side-submenu>.hn-side-submenu__title .hn-side-submenu__title-text{height:0;width:0;visibility:hidden;display:inline-block;overflow:hidden}.hn-side-menu--collapse>.hn-side-menu__tree--root>.hn-side-menu-item .hn-side-menu-item__title-icon{margin:0;line-height:50px;vertical-align:top;text-align:center}.hn-side-menu--collapse>.hn-side-menu__tree--root>.hn-side-submenu>.hn-side-submenu__title .hn-side-submenu__title-icon{margin:0;line-height:50px;vertical-align:top;text-align:center}.hn-side-menu--collapse>.hn-side-menu__tree--root>.hn-side-submenu>.hn-side-submenu__title .hn-side-submenu__icon-arrow{display:none}.hn-side-menu--collapse .hn-side-menu .hn-side-submenu{min-width:180px}.hn-side-menu--collapse .hn-side-submenu .hn-side-menu{position:absolute;margin-left:5px;top:0;left:100%;z-index:10;border:1px solid #E4E7ED;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.hn-side-menu-item__mark,.hn-side-submenu__mark{left:0;content:"";width:4px}.hn-side-menu--collapse .hn-side-submenu.is-opened>.hn-side-submenu__title .hn-side-submenu__icon-arrow{-webkit-transform:none;transform:none}.hn-side-menu--popup{z-index:100;min-width:200px;border:none;padding:5px 0;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.hn-side-menu--popup-bottom-start{margin-top:5px}.hn-side-menu--popup-right-start{margin-left:5px;margin-right:5px}.hn-side-menu-item{display:-webkit-box;display:-ms-flexbox;display:flex;height:50px;font-size:14px;cursor:pointer;position:relative;-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}.hn-side-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:0 0!important}.hn-side-menu-item .hn-side-menu-item__title-icon{margin-right:10px;text-align:center;font-size:20px;line-height:50px;vertical-align:top}.hn-side-menu-item .hn-side-menu-item__title-text{display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:20px;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.hn-side-menu-item__mark{position:absolute;height:100%}.hn-side-submenu{list-style:none;margin:0;padding-left:0}.hn-side-submenu__title{display:-webkit-box;display:-ms-flexbox;display:flex;height:50px;font-size:14px;cursor:pointer;position:relative;-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}.hn-side-submenu.is-disabled .hn-side-menu-item,.hn-side-submenu.is-disabled .hn-side-submenu__title,.hn-side-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:0 0!important}.hn-side-submenu__title .hn-side-submenu__title-icon{line-height:50px;vertical-align:top;margin-right:10px;text-align:center;font-size:20px}.hn-side-submenu__title .hn-side-submenu__title-text{display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:37px;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.hn-side-submenu .hn-side-menu{border:none}.hn-side-submenu .hn-side-menu-item{height:50px;line-height:50px;min-width:180px}.hn-side-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}.hn-side-submenu__mark{position:absolute;height:100%}.hn-side-submenu.is-active .hn-side-submenu__title{border-bottom-color:#409EFF}.hn-side-submenu.is-opened>.hn-side-submenu__title .hn-side-submenu__icon-arrow{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.horizontal-collapse-transition .hn-side-submenu__title .hn-side-submenu__icon-arrow{-webkit-transition:.2s;transition:.2s;opacity:0}