vue-router-tab.css 4.8 KB

1
  1. .router-tab{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.router-tab-header{position:relative;z-index:9;border-bottom:2px solid #409eff;box-shadow:0 1px 3px 0 rgba(0,0,0,.12),0 0 3px 0 rgba(0,0,0,.04);transition:all .2s ease-in-out}.router-tab-header.is-scroll{padding:0 15px}.router-tab-header.is-scroll .nav-next,.router-tab-header.is-scroll .nav-prev{display:block}.router-tab-header.is-scroll .router-tab-scroll{overflow:hidden}.router-tab-scroll{overflow:visible}.router-tab-nav{margin:0;padding:0;white-space:nowrap}.router-tab-item,.router-tab-nav{position:relative;display:inline-block}.router-tab-item{margin-right:-1px;padding:0 10px;color:#4d4d4d;line-height:32px;font-size:13px;background-color:#fff;border:1px solid #e6e6e6;border-bottom:none;cursor:pointer;transition:all .3s ease-in-out;transform-origin:left bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.router-tab-item.actived{background-color:#409eff;border-color:#409eff;color:#fff}.router-tab-item.actived .tab-close{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAElBMVEUAAAD///////////////////8+Uq06AAAABnRSTlMAMODmgGDCpqsuAAAAKklEQVQI12NAA44MDCJASkiAURFIMSoKCYBEhQ0ZoBRUEKEkkIFBFM0MAGCVAlS4n94EAAAAAElFTkSuQmCC)}.router-tab-item:not(.actived).contextmenu,.router-tab-item:not(.actived):hover{color:#000;background-color:#f5f5f5;box-shadow:0 -2px 4px rgba(0,0,0,.08)}.router-tab-item:not(.actived):active{background-color:#e5e5e5}.router-tab-item .tab-title{display:inline-block;max-width:100px;min-width:30px;vertical-align:top;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.router-tab-item .tab-icon{margin-right:5px;vertical-align:top;font-size:16px;line-height:32px}.router-tab-item .tab-close{position:relative;display:inline-block;top:-6px;right:-8px;margin-left:-5px;width:16px;height:16px;text-align:center;font-size:12px;border-radius:50%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAD1BMVEUAAACKioqHh4eHh4eHh4ckdXKMAAAABXRSTlMAMOKAYO4XA80AAAAqSURBVAjXY0ADhgwMwkBKSIBREUgxKgoJMIC4QA6EggoilDgyMIigmQEAVU8CEFHyN0cAAAAASUVORK5CYII=);background-position:50% 50%;background-repeat:no-repeat;transition:background-color .2s ease-in-out}.router-tab-item .tab-close:before{line-height:16px}.router-tab-item .tab-close:hover{background-color:rgba(0,0,0,.1)}.router-tab-item .tab-close:active{background-color:rgba(0,0,0,.2)}.router-tab .nav-next,.router-tab .nav-prev{display:none;position:absolute;top:0;width:15px;height:100%;line-height:32px;text-align:center;color:#ccc;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAIVBMVEUAAADLy8vLy8vMzMzLy8vMzMzMzMzLy8vOzs7R0dHMzMxrVUxsAAAACnRSTlMAxPfmyqRVMSQW6sfkFgAAACVJREFUCNdjQAINYJJVAERyeoGp4lUgik0LRkEFYUqgGmDaoQAA/hUGH4pvYMsAAAAASUVORK5CYII=);background-position:40% 50%;background-repeat:no-repeat;transition:all .2s ease-in-out;box-shadow:0 0 4px rgba(0,0,0,.2);cursor:pointer}.router-tab .nav-next:hover,.router-tab .nav-prev:hover{color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAJFBMVEUAAAD///////////////////////////////////////////+0CY3pAAAAC3RSTlMAxPfmyqRVMSQWBs9fOA0AAAAlSURBVAjXY0ACDWByqQCI5PQGU8W7QRSbNoyCCsKUQDXAtEMBAD2yB6ekaOhfAAAAAElFTkSuQmCC);background-color:#409eff;border-color:#409eff}.router-tab .nav-next:active,.router-tab .nav-prev:active{opacity:.8}.router-tab .nav-prev{left:0}.router-tab .nav-next{right:0;transform:rotate(180deg)}.router-tab-container{position:relative;-ms-flex:1;flex:1;height:0;overflow-x:hidden;overflow-y:auto;background:#fff;transition:all .4s ease-in-out}.router-tab-contextmenu{position:fixed;z-index:999;min-width:120px;border-top:2px solid #409eff;font-size:13px;background:#fff;box-shadow:0 1px 6px 3px rgba(0,0,0,.2);transition:all .3s ease-in-out;transform-origin:left top}.router-tab-contextmenu .contextmenu-item{display:block;padding:5px 20px;line-height:1.5;color:#555;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.router-tab-contextmenu .contextmenu-item:hover{color:#333;background:#f5f5f5}.router-tab-contextmenu .contextmenu-item:active{background:#e5e5e5}.router-tab-contextmenu .contextmenu-item[disabled]{color:#aaa;background:none;pointer-events:none;cursor:default}.is-router-page-fullscreen .router-tab-container{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;z-index:990}.router-tab-zoom-enter-active,.router-tab-zoom-leave-active{transition:all .4s}.router-tab-zoom-enter,.router-tab-zoom-leave-to{transform:scale(0);opacity:0}.router-tab-swap-enter-active,.router-tab-swap-leave-active{transition:all .5s}.router-tab-swap-enter,.router-tab-swap-leave-to{opacity:0}.router-tab-swap-enter{transform:translateX(-30px)}.router-tab-swap-leave-to{transform:translateX(30px)}