@nozzlegear/react-win-dialog/dist/all.css

An attempt to recreate the Dialog element from WinJS.

.react-win-dialog-overlay{display:none}.react-win-dialog-overlay.open{position:fixed;top:0;left:0;right:0;height:100vh;width:100vw;display:block;z-index:1999;background:rgba(51,51,51,0.7);opacity:1}.react-win-dialog-container{position:fixed;top:0;left:0;right:0;height:100vh;width:100vw;z-index:2000;display:flex;flex-direction:column;overflow:hidden;justify-content:center;align-content:center;outline:0}.react-win-dialog-container .react-win-dialog{outline-color:#0078d7;outline-style:solid;outline-width:1px;box-sizing:border-box;padding:18px 24px 24px;width:100%;height:auto;min-width:320px;max-width:456px;min-height:184px;max-height:758px;margin-left:auto;margin-right:auto;background:#f2f2f2;color:#333;font-size:16px;letter-spacing:normal;display:flex;flex-direction:column}.react-win-dialog-container .react-win-dialog.danger{outline-color:#e31c1c}.react-win-dialog-container .react-win-dialog .react-win-dialog-content{overflow:auto;flex-grow:1}.react-win-dialog-container .react-win-dialog .react-win-dialog-content .react-win-dialog-loading-container{display:flex;justify-content:center;align-items:center}.react-win-dialog-container .react-win-dialog .react-win-dialog-title{margin-bottom:24px;padding-bottom:6px;border-bottom:1px solid #ddd;font-size:20px;font-weight:400;line-height:1.2;margin:0 0 10px 0;color:#333;font-family:inherit}.react-win-dialog-container .react-win-dialog p,.react-win-dialog-container .react-win-dialog .control-group{margin:0 0 15px 0}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer{display:flex;margin:0;padding:10px 0 0 0}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button{flex:1;color:#000;font-weight:400;font-size:16px;padding:5px 10px;margin:0 2px;border-width:2px;border-radius:0;border-style:solid;background-clip:border-box;background-color:rgba(0,0,0,0.2);border-color:transparent;-webkit-appearance:none;line-height:1.333;touch-action:manipulation;cursor:pointer;text-transform:none;overflow:visible;text-decoration:none;text-align:center}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button:first-child{margin-left:0}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button:last-child{margin-right:0}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button.primary{background-color:#0078d7;color:#fff}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button.primary.danger{background-color:#e31c1c}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button:hover{border-color:rgba(0,0,0,0.4);text-decoration:none}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button:hover:not(.primary):not(.danger){color:#000}.react-win-dialog-container .react-win-dialog .react-win-dialog-footer > button:active{background-color:rgba(0,0,0,0.4)}