vue-stripe-menu/dist/vue-stripe-menu.css

Creating a navigation menu with animations like on Stripe

.vsm-menu{perspective:2000px}.vsm-menu,.vsm-menu *{box-sizing:border-box}.vsm-menu .vsm-dropdown{position:absolute;z-index:1000;left:0;right:0;top:50px;pointer-events:none;transform:rotateX(-15deg);transform-origin:50% -50px;opacity:0;will-change:transform,opacity;transition-property:transform,opacity;transition-duration:.25s}.vsm-menu.vsm-dropdown-active .vsm-dropdown{opacity:1;pointer-events:auto;transform:none}.vsm-menu.vsm-dropdown-active .vsm-dropdown-section.vsm-active{pointer-events:auto}.vsm-root{display:flex;align-items:center;padding:0;margin:0}.vsm-root>li{list-style:none}.vsm-link-container>*{font:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.vsm-link-container>:focus{outline:none}.vsm-link-container>button{background:none;border:none}.vsm-link{display:inline-block;height:50px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:50px;margin:0;padding:0 25px;color:#6772e5;transition:color .1s ease}.vsm-link.vsm-active,.vsm-link:hover{color:#32325d}.vsm-link>*{position:relative;display:block}.vsm-background,.vsm-background-alt{position:absolute;top:0;left:0;will-change:transform;transition-property:transform;transition-duration:.25s}.vsm-background{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3),0 -18px 60px -10px rgba(0,0,0,.025);width:380px;height:400px;transform:translateX(0);transform-origin:0 0}.vsm-background-alt{right:0;height:1000px;background:#f6f9fc}.vsm-arrow,.vsm-dropdown-container{position:absolute;left:0;transition-duration:.25s}.vsm-arrow{top:-6px;margin:0 0 0 -6px;width:12px;height:12px;transform:rotate(45deg);border-radius:4px 0 0 0;background:#fff;box-shadow:-3px -3px 5px rgba(82,95,127,.04);will-change:transform;transition-property:transform;pointer-events:none}.vsm-dropdown-container{overflow:hidden;width:500px;top:0;transform:translateX(0);will-change:transform,width,height;border-radius:6px;transition-property:transform,width,height}.vsm-dropdown-section{opacity:0;pointer-events:none;will-change:transform,opacity;transition-property:transform,opacity;transition-duration:.25s}.vsm-dropdown-section.vsm-active{opacity:1;transform:translateX(0)}.vsm-dropdown-section.vsm-left{transform:translateX(-150px)}.vsm-dropdown-section.vsm-right{transform:translateX(150px)}.vsm-dropdown-content{position:absolute;top:0;left:0}.vsm-mob-container{display:none;margin-left:10px}.vsm-mob-container.vsm-open .vsm-mob{pointer-events:none}.vsm-mob-container.vsm-open .vsm-mob-content{display:flex}.vsm-mob__hamburger{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;cursor:pointer}.vsm-mob__hamburger:hover .vsm-mob-line{background:#32325d}.vsm-mob-line{width:24px;height:3px;background:#6772e5;transition:background .1s ease}.vsm-mob-line:nth-child(2){margin-top:5px;margin-bottom:5px}.vsm-mob-content{position:absolute;left:10px;top:10px;right:10px;justify-content:flex-end;perspective:2000px}.vsm-mob-content__wrap{background:#fff;box-shadow:0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3),0 -18px 60px -10px rgba(0,0,0,.025);border-radius:4px;overflow:hidden;position:relative;white-space:nowrap;flex-grow:1;transform-origin:100% 0;will-change:transform,opacity;transition-property:transform,opacity;transition-duration:.25s}.vsm-mob-close{position:absolute;right:0;top:0;width:50px;height:50px;cursor:pointer}.vsm-mob-close:hover:after,.vsm-mob-close:hover:before{background:#32325d}.vsm-mob-close:after,.vsm-mob-close:before{content:"";position:absolute;background:#6772e5;border-radius:1px;left:12.5px;right:12.5px;top:25px;height:3px;transform:rotate(45deg);transition:background .1s ease}.vsm-mob-close:after{transform:rotate(-45deg)}.vsm-mob-anim{transition:.25s}.vsm-mob-anim-enter-active{opacity:0;transform:scale(.95)}.vsm-mob-anim-enter-to{opacity:1;transform:scale(1)}.vsm-mob-anim-leave-active,.vsm-mob-anim-leave-enter{transform:scale(1)}.vsm-mob-anim-leave-to{transform:scale(.95);opacity:0}.vsm-no-transition .vsm-arrow,.vsm-no-transition .vsm-background,.vsm-no-transition .vsm-background-alt,.vsm-no-transition .vsm-dropdown-container,.vsm-no-transition .vsm-dropdown-section,.vsm-no-transition_dropdown .vsm-dropdown{transition:none}.vsm-has-dropdown:not(a){cursor:default}