@pageblock/attributes-modal/index.css

Create advanced and accessible modal dialogs for Webflow with no-code.

:root{--modal-animation-duration:0.3s;--modal-animation-easing:cubic-bezier(0.22,1,0.36,1);--modal-overlay-bg:rgba(0,0,0,.35);--modal-overlay-blur:5px;--modal-bg:#fff;--modal-shadow:0 10px 40px rgba(0,0,0,.12),0 0 10px rgba(0,0,0,.08);--modal-border-radius:16px;--modal-max-width:500px;--modal-side-panel-width:400px}[data-pb-modal=overlay]{background-color:var(--modal-overlay-bg);inset:0;opacity:0;position:fixed;transition:opacity var(--modal-animation-duration) var(--modal-animation-easing),visibility var(--modal-animation-duration) var(--modal-animation-easing);visibility:hidden;z-index:999}[data-pb-modal=overlay].cc-active{opacity:1!important;visibility:visible!important}[data-pb-modal=sheet]{background:var(--modal-bg);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);left:50%;max-width:var(--modal-max-width);opacity:0;position:fixed;top:50%;transform:translate(-50%,-50%);transition:transform var(--modal-animation-duration) var(--modal-animation-easing),opacity var(--modal-animation-duration) var(--modal-animation-easing),visibility var(--modal-animation-duration) var(--modal-animation-easing);visibility:hidden;width:90%;will-change:transform,opacity;z-index:1000}[data-pb-modal=sheet].cc-active{opacity:1!important;visibility:visible!important}[data-animation=fade] [data-pb-modal=sheet]{opacity:0;transform:translate(-50%,-50%)}[data-animation=fade] [data-pb-modal=sheet].cc-active{opacity:1}[data-animation=slide-up] [data-pb-modal=sheet]{opacity:0;transform:translate(-50%,20px)}[data-animation=slide-up] [data-pb-modal=sheet].cc-active{opacity:1;transform:translate(-50%,-50%)}[data-animation=slide-down] [data-pb-modal=sheet]{opacity:0;transform:translate(-50%,-70%)}[data-animation=slide-down] [data-pb-modal=sheet].cc-active{opacity:1;transform:translate(-50%,-50%)}[data-animation=zoom] [data-pb-modal=sheet]{opacity:0;transform:translate(-50%,-50%) scale(.95)}[data-animation=zoom] [data-pb-modal=sheet].cc-active{opacity:1;transform:translate(-50%,-50%) scale(1)}[data-animation=slide-right] [data-pb-modal=sheet]{opacity:0;transform:translate(-60%,-50%)}[data-animation=slide-right] [data-pb-modal=sheet].cc-active{opacity:1;transform:translate(-50%,-50%)}[data-animation=slide-left] [data-pb-modal=sheet]{opacity:0;transform:translate(-40%,-50%)}[data-animation=slide-left] [data-pb-modal=sheet].cc-active{opacity:1;transform:translate(-50%,-50%)}[data-variant=bottom-sheet] [data-pb-modal=sheet]{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;bottom:0!important;left:0!important;max-width:100%!important;right:0!important;top:auto!important;transform:translateY(100%);width:100%!important}[data-variant=bottom-sheet] [data-pb-modal=sheet].cc-active{transform:translateY(0)}[data-variant=side-panel] [data-pb-modal=sheet]{border-radius:0!important;bottom:0!important;height:100%!important;left:auto!important;max-width:var(--modal-side-panel-width);right:0!important;top:0!important;transform:translateX(100%);width:90%}[data-variant=side-panel] [data-pb-modal=sheet].cc-active{transform:translateX(0)}[data-variant=left-panel] [data-pb-modal=sheet]{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;max-width:var(--modal-side-panel-width);right:auto!important;top:0!important;transform:translateX(-100%);width:90%}[data-variant=left-panel] [data-pb-modal=sheet].cc-active{transform:translateX(0)}[data-pb-modal=close]{background:none;border:none;color:#666;cursor:pointer;padding:.5rem;position:absolute;right:1rem;top:1rem;transition:color .2s ease}[data-pb-modal=close]:hover{color:#000}@media (max-width:767px){[data-pb-modal=sheet]{max-width:none;width:95%}[data-variant=mobile-full] [data-pb-modal=sheet]{border-radius:0;height:100%;max-width:100%;width:100%}}[data-pb-modal=sheet] :focus{outline:2px solid rgba(0,120,212,.5);outline-offset:2px}
/*# sourceMappingURL=index.css.map */