jiku-ui
Version:
A Component Library for Vue.js.
1 lines • 9.51 kB
CSS
.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-menu--collapse .hn-menu .hn-submenu,.hn-menu--popup{min-width:200px}.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-menu{border-right:solid 1px #e6e6e6;list-style:none;position:relative;margin:0;padding-left:0;background-color:#FFF}.hn-menu--horizontal>.hn-menu-item:not(.is-disabled):focus,.hn-menu--horizontal>.hn-menu-item:not(.is-disabled):hover,.hn-menu--horizontal>.hn-submenu .hn-submenu__title:hover{background-color:#fff}.hn-menu::after,.hn-menu::before{display:table;content:""}.hn-menu::after{clear:both}.hn-menu.hn-menu--horizontal{border-bottom:solid 1px #e6e6e6}.hn-menu--horizontal{border-right:none}.hn-menu--horizontal>.hn-menu-item{float:left;height:60px;line-height:60px;margin:0;border-bottom:2px solid transparent;color:#909399}.hn-menu--horizontal>.hn-menu-item a,.hn-menu--horizontal>.hn-menu-item a:hover{color:inherit}.hn-menu--horizontal>.hn-submenu{float:left}.hn-menu--horizontal>.hn-submenu:focus,.hn-menu--horizontal>.hn-submenu:hover{outline:0}.hn-menu--horizontal>.hn-submenu:focus .hn-submenu__title,.hn-menu--horizontal>.hn-submenu:hover .hn-submenu__title{color:#303133}.hn-menu--horizontal>.hn-submenu.is-active .hn-submenu__title{border-bottom:2px solid #409EFF;color:#303133}.hn-menu--horizontal>.hn-submenu .hn-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#909399}.hn-menu--horizontal>.hn-submenu .hn-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}.hn-menu--horizontal .hn-menu .hn-menu-item,.hn-menu--horizontal .hn-menu .hn-submenu__title{background-color:#FFF;float:none;height:36px;line-height:36px;padding:0 10px;color:#909399}.hn-menu--horizontal .hn-menu .hn-menu-item.is-active,.hn-menu--horizontal .hn-menu .hn-submenu.is-active>.hn-submenu__title{color:#303133}.hn-menu--horizontal .hn-menu-item:not(.is-disabled):focus,.hn-menu--horizontal .hn-menu-item:not(.is-disabled):hover{outline:0;color:#303133}.hn-menu--horizontal>.hn-menu-item.is-active{border-bottom:2px solid #409EFF;color:#303133}.hn-menu--collapse{width:64px}.hn-menu--collapse>.hn-menu-item [class^=hn-icon-],.hn-menu--collapse>.hn-submenu>.hn-submenu__title [class^=hn-icon-]{margin:0;vertical-align:middle;width:24px;text-align:center}.hn-menu--collapse>.hn-menu-item .hn-submenu__icon-arrow,.hn-menu--collapse>.hn-submenu>.hn-submenu__title .hn-submenu__icon-arrow{display:none}.hn-menu--collapse>.hn-menu-item span,.hn-menu--collapse>.hn-submenu>.hn-submenu__title span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}.hn-menu--collapse>.hn-menu-item.is-active i{color:inherit}.hn-menu--collapse .hn-submenu{position:relative}.hn-menu--collapse .hn-submenu .hn-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)}.hn-menu-item,.hn-submenu__title{height:56px;line-height:56px;list-style:none;position:relative;white-space:nowrap}.hn-menu--collapse .hn-submenu.is-opened>.hn-submenu__title .hn-submenu__icon-arrow{-webkit-transform:none;transform:none}.hn-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)}.hn-menu--popup-bottom-start{margin-top:5px}.hn-menu--popup-right-start{margin-left:5px;margin-right:5px}.hn-menu-item{font-size:14px;color:#303133;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}.hn-menu-item *{vertical-align:middle}.hn-menu-item i{color:#909399}.hn-menu-item:focus,.hn-menu-item:hover{outline:0;background-color:#ecf5ff}.hn-menu-item.is-disabled{opacity:.25;cursor:not-allowed;background:0 0}.hn-menu-item [class^=hn-icon-]{margin-right:5px;width:24px;text-align:center;font-size:18px;vertical-align:middle}.hn-menu-item.is-active{color:#409EFF}.hn-menu-item.is-active i{color:inherit}.hn-submenu{list-style:none;margin:0;padding-left:0}.hn-submenu__title{font-size:14px;color:#303133;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}.hn-submenu__title *{vertical-align:middle}.hn-submenu__title i{color:#909399}.hn-submenu__title:focus,.hn-submenu__title:hover{outline:0;background-color:#ecf5ff}.hn-submenu__title.is-disabled{opacity:.25;cursor:not-allowed;background:0 0}.hn-submenu__title:hover{background-color:#ecf5ff}.hn-submenu .hn-menu{border:none}.hn-submenu .hn-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.hn-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-submenu.is-active .hn-submenu__title{border-bottom-color:#409EFF}.hn-submenu.is-opened>.hn-submenu__title .hn-submenu__icon-arrow{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.hn-submenu.is-disabled .hn-menu-item,.hn-submenu.is-disabled .hn-submenu__title{opacity:.25;cursor:not-allowed;background:0 0}.hn-submenu [class^=hn-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center;font-size:18px}.hn-menu-item-group>ul{padding:0}.hn-menu-item-group__title{padding:7px 0 7px 20px;line-height:normal;font-size:12px;color:#909399}.horizontal-collapse-transition .hn-submenu__title .hn-submenu__icon-arrow{-webkit-transition:.2s;transition:.2s;opacity:0}