@odyzeo/popup/dist/popup.css

Odyzeo popup component with Vue

.popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);opacity:0;visibility:hidden}.popup__inner{position:relative;min-width:315px;max-width:90%;max-height:90%;min-height:50px;border-radius:5px;box-shadow:0 0 5px 0 rgba(75,75,75,.4);background:#fff;overflow-x:hidden;transition:all .2s ease}@media (max-width:639px){.popup__inner{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;max-width:100%;max-height:none;border-radius:0}}.popup__close{position:absolute;top:0;right:0;z-index:1;padding:10px;font-size:12px;cursor:pointer;color:#000}.popup__icon-close{width:10px;height:10px;display:block}.popup-menu .popup__inner{height:100%;width:320px;max-height:100%;min-width:auto;border-radius:0}@media (max-width:639px){.popup-menu .popup__inner{position:relative;max-width:100%}}.popup-menu.popup-menu--left{justify-content:flex-start}.popup-menu.popup-menu--right{justify-content:flex-end}.popup-menu.popup-menu--bottom .popup__inner,.popup-menu.popup-menu--top .popup__inner{height:auto;width:100%;max-height:100%;max-width:none;min-width:auto}.popup-menu.popup-menu--top{align-items:flex-start;justify-content:stretch}.popup-menu.popup-menu--bottom{align-items:flex-end;justify-content:stretch}.popup-transition-fade,.popup-transition-slide-bottom,.popup-transition-slide-left,.popup-transition-slide-right,.popup-transition-slide-top{transition:opacity .3s,visibility .3s}.popup-transition-fade .popup__inner{transform:none}.popup-transition-slide-left .popup__inner{transform:translateX(-100%)}.popup-transition-slide-left .popup--open .popup__inner{transform:translateX(0)}.popup-transition-slide-right .popup__inner{transform:translateX(100%)}.popup-transition-slide-right .popup--open .popup__inner{transform:translateX(0)}.popup-transition-slide-top .popup__inner{transform:translateY(-100%)}.popup-transition-slide-top .popup--open .popup__inner{transform:translateY(0)}.popup-transition-slide-bottom .popup__inner{transform:translateY(100%)}.popup-transition-slide-bottom .popup--open .popup__inner{transform:translateY(0)}.popup--open{opacity:1;visibility:visible;transition-delay:0s}.popup--open .popup__inner{transform:translateY(0)}body.open-popup{overflow:hidden}