1#layout > #modal { 2 position: fixed; 3 bottom: 0; 4 left: 0; 5 right: 0; 6 top: 0; 7 8 background-color: rgba(0, 0, 0, .6); 9 opacity: 0; 10 font-size: @font-size; 11 line-height: @line-height; 12 pointer-events: none; 13 transition: opacity .2s ease-in; // This is coupled with a `setTimout` in modal.js 14 z-index: 1000; 15 16 &.active { 17 opacity: 1; 18 pointer-events: auto; 19 } 20 21 > div { 22 height: 100%; 23 pointer-events: none; 24 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 } 29} 30 31#modal-content { 32 display: flex; 33 flex: 10; 34 flex-direction: column; 35 justify-content: stretch; 36 37 > .content { 38 padding: 1em; 39 40 > * { 41 width: 100%; 42 } 43 } 44} 45 46#modal-ghost { 47 display: none; 48} 49 50.modal-area { 51 display: flex; 52 flex-direction: row; 53 flex-grow: 1; 54 justify-content: stretch; 55} 56 57.modal-header { 58 padding: .25em 0; 59 position: relative; 60 text-align: center; 61 62 > button { 63 position: absolute; 64 top: .75em; 65 right: .75em; 66 67 background-color: @gray; 68 border: none; 69 border-radius: 50%; 70 color: @text-color-inverted; 71 height: 1.5em; 72 line-height: 1em; 73 padding: 0; 74 text-align: center; 75 width: 1.5em; 76 77 -webkit-appearance: none; 78 -moz-appearance: none; 79 -ms-appearance: none; 80 appearance: none; 81 } 82 83 > button:hover { 84 opacity: .8; 85 } 86 87 > button > .icon-cancel:before { 88 margin-right: 0; 89 } 90} 91 92.modal-header h1 { 93 padding: .25em; 94 margin: 0; 95} 96 97.modal-window { 98 overflow: auto; 99 pointer-events: auto; 100 101 display: flex; 102 align-items: stretch; 103 flex-direction: column; 104 105 background-color: @body-bg-color; 106 border-radius: .5em; 107 box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6); 108 flex: 1; 109 margin: 0 auto; 110 max-height: 80%; 111 min-height: 40vh; 112 max-width: 60em; 113} 114