1 | .modaldialog__container {
|
2 | position: relative;
|
3 | align-items: center;
|
4 | cursor: default;
|
5 | display: flex;
|
6 | flex: 0 1 auto;
|
7 | flex-direction: column;
|
8 | opacity: 1;
|
9 | color: black;
|
10 | background: rgba(245, 245, 245, 0.85);
|
11 | border: 1px solid #575757;
|
12 | z-index: 2;
|
13 | border-radius: 0.5rem;
|
14 | box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
|
15 | @media screen and (min-width: 360px) {
|
16 | .modaldialog__container {
|
17 | max-height: 90vh;
|
18 | margin: 3.3rem; } }
|
19 |
|
20 | .modaldialog__header {
|
21 | min-width: 30.4rem;
|
22 | border-radius: 0.5rem 0.5rem 0 0;
|
23 | align-items: center;
|
24 | font-family: 'PT Sans';
|
25 | font-size: 2rem;
|
26 | margin: 0;
|
27 | padding: 2rem 2rem 1.5rem 2rem;
|
28 | border-bottom: 0.5rem solid #f0f0f0;
|
29 | background: #fafafa; }
|
30 | .modaldialog__header svg {
|
31 | margin-right: 1.6rem; }
|
32 |
|
33 | .modaldialog__closemodalbutton {
|
34 | cursor: pointer;
|
35 | position: absolute;
|
36 | background: white;
|
37 | border-radius: 100%;
|
38 | display: flex;
|
39 | flex-direction: row-reverse; }
|
40 | @media screen and (max-width: 360px) {
|
41 | .modaldialog__closemodalbutton {
|
42 | right: 0.5rem;
|
43 | top: 0.5rem; } }
|
44 | @media screen and (min-width: 360px) {
|
45 | .modaldialog__closemodalbutton {
|
46 | right: -3rem;
|
47 | top: -2rem; } }
|
48 |
|
49 | .modaldialog__buttons {
|
50 | border-top: 1px solid #575757;
|
51 | padding: 0.5rem 0;
|
52 | width: 100%;
|
53 | background: white;
|
54 | display: flex;
|
55 | align-items: center;
|
56 | justify-content: flex-end; }
|
57 |
|
58 | .modaldialog__body {
|
59 | display: flex;
|
60 | flex-direction: column;
|
61 | justify-content: center;
|
62 | min-width: 32rem;
|
63 | background: #fdfdfd;
|
64 | flex: 1 1 auto;
|
65 | padding: 2.4rem 1.2rem;
|
66 | overflow-y: auto; }
|
67 |
|
68 | .modal__background {
|
69 | position: fixed;
|
70 | height: 100%;
|
71 | top: 0;
|
72 | left: 0;
|
73 | width: 100%;
|
74 | background: rgba(0, 0, 0, 0.5);
|
75 | z-index: 4;
|
76 | opacity: 1;
|
77 | display: flex;
|
78 | align-items: center;
|
79 | justify-content: center;
|
80 | -webkit-tap-highlight-color: transparent; }
|
81 |
|
82 | .actionmodal__trigger {
|
83 | color: red; }
|