modals.scss (2111B)
1 .redux-templates-modal-overlay { 2 position: fixed; 3 top: 0; 4 left: 0; 5 right: 0; 6 bottom: 0; 7 background: rgba(255, 255, 255, 0.6); 8 display: flex; 9 align-items: center; 10 justify-content: center; 11 z-index: 600000; 12 } 13 14 .redux-templates-modal-wrapper { 15 width: 550px; 16 height: 400px; 17 background: #fcfcfc; 18 position: relative; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 //pointer-events: none; 23 flex-direction: column; 24 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); 25 26 div { 27 width: 100%; 28 } 29 30 .redux-templates-modal-header { 31 border-bottom: 1px solid #ddd; 32 flex: 0 0 60px; 33 padding: 10px 15px; 34 display: flex; 35 align-items: center; 36 justify-content: space-between; 37 box-sizing: border-box; 38 39 h3 { 40 margin: 0; 41 font-size: 1.2rem; 42 } 43 44 button { 45 border: none; 46 cursor: pointer; 47 } 48 49 .redux-templates-modal-close { 50 font-size: 20px; 51 background: transparent; 52 color: #9b9b9b; 53 } 54 55 } 56 57 .redux-templates-modal-body { 58 flex: 1 1 auto; 59 padding-left: 30px; 60 padding-right: 30px; 61 box-sizing: border-box; 62 background: #fff; 63 position: relative; 64 h5 { 65 font-size: 1.1em; 66 font-weight: 600; 67 } 68 69 ul { 70 list-style-position: inside; 71 list-style-type: disc; 72 } 73 74 .error { 75 color: #f00; 76 } 77 } 78 79 .redux-templates-modal-footer { 80 border-top: 1px solid #ddd; 81 flex: 0 0 60px; 82 align-items: center; 83 display: flex; 84 padding: 0 20px; 85 box-sizing: border-box; 86 87 .button { 88 margin-right: 20px; 89 cursor: pointer; 90 } 91 92 i.fas { 93 margin-right: 3px; 94 } 95 } 96 97 .redux-templates-modal-spinner-wrapper { 98 flex: 1 1 auto; 99 align-items: center; 100 justify-content: center; 101 display: flex; 102 } 103 }