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