META-INF.web.lib.themes.navigation.css Maven / Gradle / Ivy
@charset "utf-8";.nav-main{position:fixed;top:0;z-index:12;height:100%;width:100px;color:#fff;background:#111213}.nav-main a{color:#fff}.nav-box{position:relative;perspective:200px;-webkit-perspective:200px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;height:100%;z-index:99;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none}.nav-ul li a{display:block;width:100px;height:100px;overflow:hidden;text-align:center;position:relative;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}.nav-ul li a:before{content:'';position:absolute;left:-240px;top:0;width:200px;height:100%;background:#629feb;z-index:1;transform:skew(30deg,0);-webkit-transform:skew(30deg,0);-ms-transform:skew(30deg,0);-moz-transform:skew(30deg,0);-o-transform:skew(30deg,0);transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}.nav-ul li a:hover{background:#357dd7}.nav-ul li a:hover:before{left:-30px}.nav-ul li a:after{content:'';position:absolute;width:100%;height:30px;left:0;top:20px;z-index:1}.nav-ul li a span{display:block;margin-top:60px;perspective:;position:relative;z-index:1}.nav-slide{position:fixed;left:100px;top:0;width:240px;height:100%;background:#252829;transform:rotateY(120deg);-webkit-transform:rotateY(120deg);-moz-transform:rotateY(120deg);-o-transform:rotateY(120deg);-ms-transform:rotateY(120deg);z-index:99;visibility:hidden;transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition-timing-function:cubic-bezier(.08,.72,.71,.96);-webkit-transition-timing-function:cubic-bezier(.08,.72,.71,.96)}.nav-slide.hover{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-o-transform:rotateY(0);-ms-transform:rotateY(0);z-index:15;visibility:visible}.nav-slide-o li a{line-height:50px;display:block;padding:0 20px;font-size:14px;overflow:hidden;text-align:left;position:relative;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s}.nav-slide-o li a:before{content:'';position:absolute;left:-230%;top:0;width:200%;height:100%;background:#629feb;z-index:1;transform:skew(30deg,0);-webkit-transform:skew(30deg,0);-moz-transform:skew(30deg,0);-o-transform:skew(30deg,0);-ms-transform:skew(30deg,0);transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s}.nav-slide-o li a:hover{background:#357dd7}.nav-slide-o li a:hover:before{left:-60px}.nav-slide-o li a span{position:relative;z-index:1}.nav-slide-o{display:none}