beta-parity-react/ui/Modal/index.css

Beta Parity React Components

.modal{background-color:rgba(0,0,0,.3);font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;height:100vh;left:0;letter-spacing:.01rem;line-height:1.125rem;opacity:0;overflow:visible;padding:1rem;position:fixed;top:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:linear;width:100vw;z-index:2000}.modal.active{opacity:1}.modal-dialog{display:flex;height:-moz-fit-content;height:fit-content;margin:10vh auto;max-height:80vh;max-width:500px;width:auto;--tw-translate-y:-3rem;align-items:center;border-radius:.375rem;flex-direction:column;justify-content:space-between;overflow:auto;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.active .modal-dialog,.modal-dialog{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active .modal-dialog{--tw-translate-y:0px}.modal-dialog.modal-static-animation{--tw-scale-x:101%;--tw-scale-y:101%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal.small .modal-dialog{max-width:300px}.modal.large .modal-dialog{max-width:800px}.modal.extra-large .modal-dialog{max-width:1140px}.modal-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;padding:1rem;width:100%}.modal-header>button{border-radius:.375rem;padding:.25rem .5rem;--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity))}@media (hover:hover) and (pointer:fine){.modal-header>button:hover{--tw-bg-opacity:1;background-color:rgb(227 227 227/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}}.modal-body{border-bottom-width:1px;border-top-width:1px;overflow:auto;--tw-border-opacity:1;border-color:rgb(203 203 203/var(--tw-border-opacity))}.modal-body,.modal-footer{padding:1rem;width:100%}.modal-footer{align-items:center;display:flex;flex-shrink:0;gap:.5rem;justify-content:flex-end}