react-morphing-modal
Version:
React morphing modal! The easiest way to be fancy!
2 lines • 5.44 kB
CSS
.RMM__close-button{position:absolute;top:20px;right:20px;cursor:pointer;height:56px;width:56px;background:rgba(0,0,0,.4);border-radius:50%;border:none;text-indent:100%;overflow:hidden;color:transparent;white-space:nowrap;-webkit-transition:opacity .365s,-webkit-transform .365s;transition:opacity .365s,-webkit-transform .365s;transition:transform .365s,opacity .365s;transition:transform .365s,opacity .365s,-webkit-transform .365s;z-index:10002;-webkit-transform:scale(0);transform:scale(0);opacity:0}.RMM__close-button:after,.RMM__close-button:before{content:"";position:absolute;top:50%;left:50%;height:2px;width:24px;background:#fff}.RMM__close-button:before{-webkit-transform:translate(-50%) rotate(45deg);transform:translate(-50%) rotate(45deg)}.RMM__close-button:after{-webkit-transform:translate(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.RMM__close-button:hover{background:rgba(0,0,0,.6)}.RMM__close-button--is-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.RMM__container{position:fixed;top:0;left:0;height:100%;width:100%;pointer-events:none;opacity:0;visibility:hidden;z-index:10000}.RMM__container--is-active{pointer-events:auto;opacity:1;visibility:visible}.RMM__body{position:relative;height:100%;overflow:auto;padding:6rem 15%;z-index:10001;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.RMM__body--is-active{opacity:1}.RMM__body--no-padding{padding:0}.RMM__placeholder{position:fixed;top:0;left:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;-webkit-transition-duration:.365s;transition-duration:.365s}@media only screen and (max-width:480px){.RMM__body{padding:6rem 3%}}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlYWN0TW9ycGhpbmdNb2RhbC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsbUJBQ0UsaUJBQWtCLENBQ2xCLFFBQVMsQ0FDVCxVQUFXLENBQ1gsY0FBZSxDQUNmLFdBQVksQ0FDWixVQUFXLENBQ1gseUJBQThCLENBQzlCLGlCQUFrQixDQUNsQixXQUFZLENBQ1osZ0JBQWlCLENBQ2pCLGVBQWdCLENBQ2hCLGlCQUFrQixDQUNsQixrQkFBbUIsQ0FDbkIsd0RBQTRDLENBQTVDLGdEQUE0QyxDQUE1Qyx3Q0FBNEMsQ0FBNUMsZ0VBQTRDLENBQzVDLGFBQWMsQ0FDZCwwQkFBbUIsQ0FBbkIsa0JBQW1CLENBQ25CLFNBQVksQ0FDWixtREFDRSxVQUFXLENBQ1gsaUJBQWtCLENBQ2xCLE9BQVEsQ0FDUixRQUFTLENBQ1QsVUFBVyxDQUNYLFVBQVcsQ0FDWCxlQUFrQixDQUNwQiwwQkFDRSwrQ0FBd0MsQ0FBeEMsdUNBQTBDLENBQzVDLHlCQUNFLGdEQUF5QyxDQUF6Qyx3Q0FBMkMsQ0FDN0MseUJBQ0UseUJBQWdDLENBQ2xDLDhCQUNFLDBCQUFtQixDQUFuQixrQkFBbUIsQ0FDbkIsU0FBWSxDQUVoQixnQkFDRSxjQUFlLENBQ2YsS0FBTSxDQUNOLE1BQU8sQ0FDUCxXQUFZLENBQ1osVUFBVyxDQUNYLG1CQUFvQixDQUNwQixTQUFVLENBQ1YsaUJBQWtCLENBQ2xCLGFBQWdCLENBQ2hCLDJCQUNFLG1CQUF1QixDQUN2QixTQUFVLENBQ1Ysa0JBQXFCLENBRXpCLFdBQ0UsaUJBQWtCLENBQ2xCLFdBQVksQ0FDWixhQUFjLENBQ2QsZ0JBQWlCLENBQ2pCLGFBQWMsQ0FDZCxTQUFVLENBQ1YsOEJBQXdCLENBQXhCLHNCQUEwQixDQUMxQixzQkFDRSxTQUFZLENBQ2QsdUJBQ0UsU0FBWSxDQUVoQixrQkFDRSxjQUFlLENBQ2YsS0FBTSxDQUNOLE1BQU8sQ0FDUCxxREFBdUMsQ0FBdkMsNkNBQXVDLENBQXZDLHFDQUF1QyxDQUF2Qyx1REFBdUMsQ0FDdkMsaUNBQTJCLENBQTNCLHlCQUE2QixDQUUvQix5Q0FDRSxXQUNFLGVBQWtCLENBQUUiLCJmaWxlIjoiUmVhY3RNb3JwaGluZ01vZGFsLm1pbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuUk1NX19jbG9zZS1idXR0b24ge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMjBweDtcbiAgcmlnaHQ6IDIwcHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgaGVpZ2h0OiA1NnB4O1xuICB3aWR0aDogNTZweDtcbiAgYmFja2dyb3VuZDogcmdiYSgwLCAwLCAwLCAwLjQpO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGJvcmRlcjogbm9uZTtcbiAgdGV4dC1pbmRlbnQ6IDEwMCU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMzY1cywgb3BhY2l0eSAwLjM2NXM7XG4gIHotaW5kZXg6IDEwMDAyO1xuICB0cmFuc2Zvcm06IHNjYWxlKDApO1xuICBvcGFjaXR5OiAwOyB9XG4gIC5STU1fX2Nsb3NlLWJ1dHRvbjo6YmVmb3JlLCAuUk1NX19jbG9zZS1idXR0b246OmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiA1MCU7XG4gICAgbGVmdDogNTAlO1xuICAgIGhlaWdodDogMnB4O1xuICAgIHdpZHRoOiAyNHB4O1xuICAgIGJhY2tncm91bmQ6ICNmZmY7IH1cbiAgLlJNTV9fY2xvc2UtYnV0dG9uOjpiZWZvcmUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUpIHJvdGF0ZSg0NWRlZyk7IH1cbiAgLlJNTV9fY2xvc2UtYnV0dG9uOjphZnRlciB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSkgcm90YXRlKC00NWRlZyk7IH1cbiAgLlJNTV9fY2xvc2UtYnV0dG9uOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNik7IH1cbiAgLlJNTV9fY2xvc2UtYnV0dG9uLS1pcy1hY3RpdmUge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgb3BhY2l0eTogMTsgfVxuXG4uUk1NX19jb250YWluZXIge1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIG9wYWNpdHk6IDA7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgei1pbmRleDogMTAwMDA7IH1cbiAgLlJNTV9fY29udGFpbmVyLS1pcy1hY3RpdmUge1xuICAgIHBvaW50ZXItZXZlbnRzOiBpbml0aWFsO1xuICAgIG9wYWNpdHk6IDE7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTsgfVxuXG4uUk1NX19ib2R5IHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiA2cmVtIDE1JTtcbiAgei1pbmRleDogMTAwMDE7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zaXRpb246IG9wYWNpdHkgMC4yczsgfVxuICAuUk1NX19ib2R5LS1pcy1hY3RpdmUge1xuICAgIG9wYWNpdHk6IDE7IH1cbiAgLlJNTV9fYm9keS0tbm8tcGFkZGluZyB7XG4gICAgcGFkZGluZzogMDsgfVxuXG4uUk1NX19wbGFjZWhvbGRlciB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiB0cmFuc2Zvcm0sIG9wYWNpdHk7XG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDAuMzY1czsgfVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSB7XG4gIC5STU1fX2JvZHkge1xuICAgIHBhZGRpbmc6IDZyZW0gMyU7IH0gfVxuIl19 */